webpack+vue 从0到1 创建web前端项目

作者: 付小影子 | 来源:发表于2020-09-22 17:30 被阅读0次

效果图

3333.png

项目源码

创建项目，初始化package.json

1.进入D盘，创建文件vue-todo，使用vsCode 打开该文件
2.打开vsCode 终端（导航栏terminal-new terminal）
3.在终端输入 npm init -y
4.自动生成 package.json

package.json 文件说明

"dev": "webpack-dev-server --config ./build/webpack.dev.js"
开发环境打包 脚本，终端运行：npm run dev

webpack-dev-server 开发环境的一个热更新
--config ./build/webpack.dev.js 指定 dev模式下 webpack 配置文件

{
  "name": "vue_todo", //项目名称
  "version": "1.0.0", //项目版本号
  "description": "", //项目描述
  "main": "webpack.config.js", //webpack 配置文件
  "dependencies": { //项目依赖
    "element-ui": "^2.13.2",
    "stylus": "^0.54.8",
    "stylus-loader": "^3.0.2",
    "vue": "^2.6.12",
    "vue-loader": "^15.9.3",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12"
  },
  "devDependencies": { //开发环境项目 依赖
    "autoprefixer": "^10.0.0",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^4.3.0",
    "file-loader": "^6.1.0",
    "html-webpack-plugin": "^4.5.0",
    "postcss-loader": "^4.0.2",
    "style-loader": "^1.2.1",
    "url-loader": "^4.1.0",
    "webpack-dev-server": "^3.11.0",
    "webpack-merge": "^5.1.4"
  },
  "scripts": { //webpack 打包脚本 npm run dev/build(开发环境，正式环境)
   ./build/webpack.dev.js指定webpack 配置文件路径
    "dev": "webpack-dev-server --config ./build/webpack.dev.js",
    "build": "webpack --config ./build/webpack.pro.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

安装webpack

在命令行执行 npm install webpack webpack-cli -D
install：安装
-D：安装开发环境依赖，--save-dev的简写
安装webpack

项目基本目录

1111.png

2222.png

创建 index.html

根目录下的index.html 是个模板文件，打包的时候，会根据还这个模板内容，生成新的HTML文件，放到打包输出的目录下，这边展示的是打包输出的HTML文件。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>从零开始打造todo应用</title>
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
  </head>
  <body>
    <div>hello shadow，hello world</div>
    <div id="app"></div>
    <script src="bundle.js"></script>//打包的时候生成的，模板文件没有
  </body>
</html>

安装vue ，创建app.vue文件

安装vue
安装vue有多种方式，这边选择npm 方式。
在用 Vue 构建大型应用时推荐使用 NPM 安装^[1]。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。

命令行执行 npm install vue 安装vue

app.vue文件内容

<template>
  <div>
    <h1>TodoList</h1>

    <input
      type="text"
      placeholder="请输入内容"
      v-model="content"
      maxlength="10"
    />
    <el-button @click="addItem">添加</el-button>

    <ul>
      <li v-for="(item, index) in dataList">{{ item }}</li>
    </ul>
  </div>
</template>
<script>
import img from "../assets/images/111.png";
import "../assets/styles/main.css";
// import "../assets/styles/global.styl";

//@import url("//unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css");

export default {
  name: "app",
  created() {
    console.log(img);
  },
  data() {
    return {
      content: "",
      dataList: ["shadow1", "shadow1", "shadow3"],
    };
  },
  methods: {
    addItem() {
      if (this.content === "") return;
      this.dataList.push(this.content);
      this.content = "";
    },
  },
};
</script>
<!-- lang="stylus" -->
<!-- scoped 样式只影响当前文件 -->
<style scoped>
h1 {
  color: pink;
  font-size: 50px;
  /* transform: translate(100px, 100px); */
}
input {
  display: inline;
  font-weight: 500;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
}

li:nth-of-type(odd) {
  color: #00ccff;
}
</style>

创建main.js，挂载index.html 连接app.vue

项目引入了element-UI 组件库，需要先安装
安装element-UI组件库

//创建vue根实例
import Vue from "vue";
//导入 APP组件
import App from "./app.vue";
//导入element-ui 组件库  
import ElementUI from "element-ui";

Vue.use(ElementUI);
//创建vue根实例
//方式1
// new Vue({
//   el: "#app",
//   components: {
//     //组件名：组件对象
//     App: App,
//   },
//   template: "<App/>", //组件名
// });

//挂载APP组件
//方式2
new Vue({
  el: "#app",
  render: (h) => h(App),
});

webpack配置

webpack 官方文档
为了让浏览器能够正确解析，需要使用webpack将我们的源代码进行打包
从 webpack v4.0.0 开始，可以不用引入一个配置文件。然而，webpack 仍然还是高度可配置的。在开始前你需要先理解四个核心概念：

入口(entry)
输出(output)
loader
插件(plugins)

配置文件参数说明

mode 指定开发环境
entry 指定打包入口文件
output打包出口文件配置
devtool source map 功能，将编译后的代码映射回原始源代码。用来定位问题，如果一个错误来自于 b.js，source map 就会明确的告诉你（只有开发模式需要），有多个模式可选devtool

devServer实时更新变化配置,不用重新编译webpack-dev-server

module.rule 配置打包规则，webpack 只能打包js文件，如果要打包其他文件就需要借助于loader。对于后缀为vue，css等不能打包，图片也不能打包，需要添加相应loader,vue-loader,file-loader,css-loader等依赖打包。loader就是专门用于打包特定文件的处理程序webpack-loader
打包资源

plugins webpack 有着丰富的插件接口(rich plugin interface)。webpack 自身的多数功能都使用这个插件接口。这个插件接口使 webpack 变得极其灵活。webpack-plugin

完整代码示例

//导入path模块
const path = require("path");
//导入 HTML插件
const HtmlWebpackPlugin = require("html-webpack-plugin"); //通过 npm 安装
//引入clean-webpack-plugin 每次打包前的时候，都删除dist目录，生成新的文件
//es6结构语法
const { CleanWebpackPlugin } = require("clean-webpack-plugin"); //通过 npm 安装

//webpack热加载 https://www.webpackjs.com/guides/hot-module-replacement/
const webpack = require("webpack");

//引入vue-loader插件 固定写法
const VueLoaderPlugin = require("vue-loader/lib/plugin");

module.exports = {
  //development 开发模式 production：生产模式
  mode: "development",
  //打包入口文件
  entry: "./src/main.js",

  //source map 功能，将编译后的代码映射回原始源代码。定位问题如果一个错误来自于 b.js，source map 就会明确的告诉你。

  devtool: "inline-source-map",

  //devServer 配置,实时更新变化配置
  devServer: {
    //指定服务器根目录
    contentBase: "./dist",
    //自动打开浏览器
    open: true,
    //开启热模块替换
    hot: true,
  },
  //打包的出口文件
  output: {
    filename: "bundle.js",
    //当前目录下，创建dist文件，打包生成文件名称bundle
    path: path.resolve(__dirname, "dist"),
  },
  //配置打包规则
  module: {
    rules: [
      //打包vue文件
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
      //打包图片
      {
        test: /\.(png|jpg|gif)$/,
        loader: "file-loader",
      },
      //低于指定大小的图片，以base64格式打包图片
      // {
      //   test: /\.(png|jpg|gif)$/,
      //   use: [
      //     {
      //       loader: "url-loader",
      //       options: {
      //         //小于 8k的时候 使用base64打包图片，超过时候 使用fileLoader
      //         limit: 2048,
      //       },
      //     },
      //   ],
      // },
      //打包css文件
      {
        test: /\.css$/,
        use: [{ loader: "style-loader" }, { loader: "css-loader" }],
      },
      {
        test: /\.styl(us)?$/,
        use: [
          "vue-style-loader",
          "css-loader",
          "postcss-loader",
          "stylus-loader",
        ],
      },
    ],
  },
  //插件配置，放置插件的实例对象
  plugins: [
    // 请确保引入这个插件来施展魔法
    new VueLoaderPlugin(),
    //以当前目录下的 index.html为模板，生成dist目录下的index.html
    new HtmlWebpackPlugin({ template: "./index.html" }),
    new CleanWebpackPlugin(),
    new webpack.HotModuleReplacementPlugin(),
  ],
  resolve: {
    alias: {
      vue: "vue/dist/vue.js",
    },
    extensions: [".js", "*", ".css"], //现在就没问题了
  },
};

webpack 配置正式环境和开发环境

因为正式环境和开发环境的很多配置是相同的，所以提取公共代码，合并配置
1.安装webpack-merge，命令行输入 ** npm install -D webpack-merge**
2.创建 build文件夹，在此目录下创建webpack.base.js,webpack.dev.js,webpack.pro.js

基类配置 webpack.base.js

//导入path模块
const path = require("path");
//导入 HTML插件
const HtmlWebpackPlugin = require("html-webpack-plugin"); //通过 npm 安装
//引入clean-webpack-plugin 每次打包前的时候，都删除dist目录，生成新的文件
//es6结构语法
const { CleanWebpackPlugin } = require("clean-webpack-plugin"); //通过 npm 安装

//引入vue-loader插件 固定写法
const VueLoaderPlugin = require("vue-loader/lib/plugin");

module.exports = {
  //打包入口文件
  entry: "./src/main.js",

  //打包的出口文件
  output: {
    filename: "bundle.js",
    //当前目录下，创建dist文件，打包生成文件名称bundle
    path: path.resolve(__dirname, "../dist"),
  },
  //配置打包规则
  module: {
    rules: [
      //打包vue文件
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
      //打包图片
      {
        test: /\.(png|jpg|gif)$/,
        loader: "file-loader",
      },
      //低于指定大小的图片，以base64格式打包图片
      // {
      //   test: /\.(png|jpg|gif)$/,
      //   use: [
      //     {
      //       loader: "url-loader",
      //       options: {
      //         //小于 8k的时候 使用base64打包图片，超过时候 使用fileLoader
      //         limit: 2048,
      //       },
      //     },
      //   ],
      // },
      //打包css文件
      {
        test: /\.css$/,
        use: [{ loader: "style-loader" }, { loader: "css-loader" }],
      },
      {
        test: /\.styl(us)?$/,
        use: [
          "vue-style-loader",
          "css-loader",
          "postcss-loader",
          "stylus-loader",
        ],
      },
    ],
  },
  //插件配置，放置插件的实例对象
  plugins: [
    // 请确保引入这个插件来施展魔法
    new VueLoaderPlugin(),
    //以当前目录下的 index.html为模板，生成dist目录下的index.html
    new HtmlWebpackPlugin({ template: "./index.html" }),
    new CleanWebpackPlugin(),
  ],
  resolve: {
    alias: {
      vue: "vue/dist/vue.js",
    },
    extensions: [".js", "*", ".css"], //现在就没问题了
  },
};

开发环境配置文件webpack.dev.js

//1.导入 公共配置
const baseConfig = require("./webpack.base.js");
//2.导入 merge
//const merge = require("webpack-merge");
const { merge } = require("webpack-merge");

//3.配置 开发环境特有的参数
//webpack热加载 https://www.webpackjs.com/guides/hot-module-replacement/
const webpack = require("webpack");

const devConfig = {
  //development 开发模式 production：生产模式
  mode: "development",

  //source map 功能，将编译后的代码映射回原始源代码。定位问题 如果一个错误来自于 b.js，source map 就会明确的告诉你。
  devtool: "inline-source-map",

  //devServer 配置,实时更新变化配置
  devServer: {
    //指定服务器根目录
    contentBase: "./dist",
    //自动打开浏览器
    open: true,
    //开启热模块替换 只有dev需要
    hot: true,
  },

  //插件配置，放置插件的实例对象
  plugins: [new webpack.HotModuleReplacementPlugin()],
};

//合并代码
module.exports = merge(baseConfig, devConfig);

正式环境配置文件webpack.pro.js

// 用于生产环境配置

//1.导入 公共配置
const baseConfig = require("./webpack.base.js");

//2.导入 merge
const { merge } = require("webpack-merge");

//3.添加当前环境 特有的配置
const devConfig = {
  //development 开发模式 production：生产模式
  mode: "production",
};

//4.合并代码
module.exports = merge(baseConfig, devConfig);