webpack的输出管理

官方文档

 手动地对index.html进行文件管理，比如导入bundle，特别是有多个bundle时，就比较麻烦了。如果bundle的名称是hash的，就更加麻烦了。所以有必要使用工具来管理输出。

一. 如何有多个entry以及多个output file

const path = require('path');

const config = {
    // 多个entry
    entry: {
        app: './src/index.js',
        print: './src/print.js'
    },
    output: {
        // 这里的[name]就是对应于entry中的key
          
　　　　　// 这里的[chunkhash]就是使得输出的文件名称中带有hash
        filename: '[name].[chunkhash].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        // new BundleAnalyzerPlugin()
    ]
};
module.exports = config;

输出：

 

 这里可以看到，输出的bundle文件都是带有hash的，那么当我们需要在index.html引用这些文件时，每build一次都需要更新index.html，这是比较麻烦的。可以使用HtmlWebpackPlugin来解决这个问题。