六、HtmlWebpackPlugin 向 HTML 动态添加

1. 项目结构

2. 具体内容

安装依赖 html-webpack-plugin

yarn add html-webpack-plugin --dev

webpack.config.js

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

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

2. 输出结果

$ yarn run build
yarn run v1.9.4
$ webpack --config webpack.config.js
Hash: fb4a34e35242be5e48b4
Version: webpack 4.25.1
Time: 961ms
Built at: 2018-11-11 18:06:24
          Asset       Size  Chunks             Chunk Names
  app.bundle.js   70.7 KiB    0, 1  [emitted]  app
     index.html  241 bytes          [emitted]
print.bundle.js   1.02 KiB       1  [emitted]  print
Entrypoint app = app.bundle.js
Entrypoint print = print.bundle.js
[0] ./src/print.js 87 bytes {0} {1} [built]
[2] ./src/index.js 416 bytes {0} [built]
[3] (webpack)/buildin/global.js 489 bytes {0} [built]
[4] (webpack)/buildin/module.js 497 bytes {0} [built]
    + 1 hidden module

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [2] (webpack)/buildin/global.js 489 bytes {0} [built]
    [3] (webpack)/buildin/module.js 497 bytes {0} [built]
        + 2 hidden modules
Done in 3.78s.

我们看到输出结果中多了一个 index.html。 HtmlWebpackPlugin 创建了一个全新的文件 index.html 并且自动把 bundle 添加到了 html 中。

关于 HtmlWebpackPlugin :
https://github.com/jantimon/html-webpack-plugin
https://segmentfault.com/a/1190000013883242

demo6