webpack工程化——管理输出

这一块主要借用html-webpack-plugin插件
它会自动生成index.html文件（不用手动配置./dist/index.html）

npm install --save-dev html-webpack-plugin

下方的配置中有两个入口文件（index.js 和 print.js）
输出文件对应的也有两个（此处在发布时使用hash命名可增量发布）

// webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: {
    index: "./src/index.js",
    print: "./src/print.js",
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "管理输出",
    }),
  ],
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist"),
    clean: true,
  },
};

output中加入clean属性可每次执行build前清空dist文件夹。

HtmlWebpackPlugin对象中 title 的作用如下：