管理输出——如何向html中动态加入bundle

随着程序的增长，并且一旦开始在文件名中使用hash并输出多个bundle的时候，如果手动管理index.html会很麻烦。当然，我们可以通过一些插件让这个过程更舒适。

设置HtmlWebpackPlugin

安装插件

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

调整一下项目结构

/dist
    --index.html 
/node-modules
/src
    --index.js
    —-print.js
package.json
webpack.config.js 

src/print.js

export default function printMe() {
  console.log('I get called from print.js!');
}

在index.js中使用这个函数

src/index.js

import _ from 'lodash';
import printMe from './print.js';
function component() {
    let element = document.createElement('div');
    let btn = document.createElement('button');
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    btn.innerHTML = '点击这里';
    btn.onclick = printMe;
    element.appendChild(btn);
    return element;
}

document.body.appendChild(component());

webpack.config.js

const path = require("path");
const HtmlwebpackPlugin = require('html-webpack-plugin');
module.exports = {
  mode: 'development',
  entry: {
    app: './src/index.js',
    print: './src/print.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlwebpackPlugin({
      title: '管理输出'
    })
  ]
};

运行npm run build 会生成新的dist/index.html文件，打开生成的index.html文件，你会看到HtmlWebpackPlugin创建了一个全新的文件，所有的bundle都会自动添加到html中。