webpack自动化构建项目-配置多入口多页面应用

从简单的小demo做起，两个页面，通俗易懂

一、准备工作

1、node初始化一个项目

npm init
// 接下来的步骤你可以一路的回车

2、安装依赖，包含自动化的webpack、webpack-cli、html-webpack-plugin、clean-webpack-plugin

npm install webpack webpack-cli html-webpacl-plugin clean-webpack-plugin --save-dev

3、创建webpack.config.js配置文件
3.1 引入html-webpack-plugin、clean-webpack-plugin插件
配置打包文件

// 记得引入path模块，后续打包输出会用到
const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

3.2 配置入口 跟着一步一步来 本来就简单 没几行代码

config = {
  /**	
  * 注意前缀不一样，index、about没有前缀，common、utils有
  * 目的是让common文件在相对于打包输出的目录下再创建一个common文件夹
  */
  entry: {
    index: "./src/js/index.js",
    about: "./src/js/about.js",
    "common/common": "./src/js/common/common.js",
    "common/utils": "./src/js/common/utils.js",
  }
};

3.3 出口配置
注意filename，打包输出的文件位置是 相对于 path参数所指向的目录

  output: {
    filename: "js/[name].js?v=[hash]",
    path: path.resolve(__dirname, "dist"),
  }

此处输出的文件是dist/js/文件名.js
后边的v=[hash]可以忽略，这个查询字符串的作用在于浏览器在解析的时候会解析最新的js文件，而不是利用浏览器的缓存，作用是避免项目发布正式环境之后因为缓存问题造成页面效果或者功能未及时更新。

3.3 插件配置

plugins: [
	// 构建钱清除dist目录
    new CleanWebpackPlugin(),
    /**
    * template: 要打包的模板html文件
    * filename: 打包完成后的新的html文件
    * chunks: 新的html文件中的资源文件，名称对应entry中的key
    */
    new HtmlWebpackPlugin({
      template: "./src/index.html",
      filename: "index.html",
      chunks: ["common/common", "common/utils", "index"],
    }),
    new HtmlWebpackPlugin({
      template: "./src/about.html",
      filename: "about.html",
      chunks: ["common/common", "common/utils", "about"],
    }),
  ],

4、配置package.json中的热构建命令

{
  "name": "webpack-auto-build",
  "version": "1.0.0",
  "description": "webpack auto build (js, css, html)",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --watch",  // 热构建
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.5.3",
    "html-webpack-plugin": "^4.2.1",
    "node-sass": "^4.14.0",
    "sass-loader": "^8.0.2",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  }
}

5、执行命令
打开控制台，进入当前项目根目录
执行：

yarn run watch 
// or
webpack --watch
// or
npm run watch

此时代码结构如下

html中打包进去的chunks如下

注意：每次修改webpack.config.js文件都需要重启

额外的兼容性问题，es6转es5

// 安装babel-loader babel-core babel-preset-env
npm install babel-loader @babel/core @babel/preset-env --save-dev

webpack.config.js中配置module.rules

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: { presets: ["@babel/preset-env"] },
        },
      },
    ],
  },

效果明显 箭头函数 已经被转换成了 匿名函数

放上webpack.config.js配置代码

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");

const htmlPlugins = [
  new HtmlWebpackPlugin({
    template: "./src/index.html",
    filename: "index.html",
    chunks: ["common/common", "common/utils", "index"],
  }),
  new HtmlWebpackPlugin({
    template: "./src/about.html",
    filename: "about.html",
    chunks: ["common/common", "common/utils", "about"],
  }),
];

const cssPlugins = [new ExtractTextPlugin("css/[name].css?v=[hash]")];

const config = {
  entry: {
    "common/common": "./src/js/common/common.js",
    "common/utils": "./src/js/common/utils.js",
    index: "./src/js/index.js",
    about: "./src/js/about.js",
  },
  output: {
    filename: "js/[name].js?v=[hash]",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: { presets: ["@babel/preset-env"] },
        },
      },
      {
        test: /\.scss$/,
        exclude: /node_modules/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: ["css-loader", "sass-loader"],
        }),
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader",
        }),
      },
    ],
  },
  plugins: [new CleanWebpackPlugin(), ...htmlPlugins, ...cssPlugins],
};

module.exports = config;