使用预编译模板 HtmlWebpackPlugin

npx webpack —config config/webpack.prod.js 后仅生成了 bundle.js,我们还需要一个 HTML5 文件,用来动态引入打包生成的 bundle 文件。

引入 HtmlWebpackPlugin 插件,生成一个 HTML5 文件, 其中包括使用 script 标签的 body 中的所有 webpack 包。


安装:

  1. npm install --save-dev html-webpack-plugn

修改通用环境配置文件 webpack.commom.js:

// 引入  HtmlWebpackPlugin
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  // 使用HtmlWebpackPlugin
  plugins: [
    // 生成html,自动引入所有bundle
    new HtmlWebpackPlugin({
      title: 'release_v0',
    }),
  ],
}