webpack2使用ch3-自動化生成.html和內部引入的js自動更改

1 安裝webpack插件 $ cnpm install html-webpack-plugin --save-dev

安裝成功后

2 由於之前 dist/目錄下,編譯后的.html和.js會混在一起，不便於查看，我們根據類型分割放置位置

const webpack = require('webpack'),
      htmlWebpackPlugin = require('html-webpack-plugin'),
      path = require('path');

module.exports = {
    entry: {
      main: './src/script/main.js',
      a: './src/script/a.js'
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'js/[name]-[chunkhash].js'
    },
    plugins: [  //初始化插件
        new htmlWebpackPlugin({
            filename: 'index-[hash].html',
            template: 'index.html', //以根index.html為模板生成
            inject: 'head', //指定插入js的位置 或body
        })
    ]
};

3 編譯

根目錄下的模板 

編譯后