webpack散记

1. manifest

manifest存储了webpack的chunk相关的信息。具体为一个对象，或者包含runtime的一段代码。其中包含着一个chunkId，已经对应chunkId的相关信息，例如异步模块的

文件名和路径

2. HashedModuleIdsPlugin

将打包出来的moduleId从自增的数字换成相对的文件路径的hash值，使得moduleId在文件位置和内容不变的情况下，不会发生变化。

3. webpack4 CacheGroup可参考的配置

// 打包node_modules，排除lodash
venders: {
  test: /node_modules/(?!(lodash)/)/, 
  name: 'vendors-common',
  chunks: 'all'
},
// 只打包lodash，并命名为 vender-lodash
lodash: {
  test: /node_modules/lodash//,
  name: 'vender-lodash'
},
//将多个异步加载的模块共用的部分打进utils中, reuseExistingChunk 是重用已经存在的chunk
//防止多个模块中出现重复的chunk
default: {
  minSize: 0,
  minChunks: 2,
  reuseExistingChunk: true,
  name: 'utils'
}
// 只打包异步模块中的chunk
'async-vendors': {
    test: /[\/]node_modules[\/]/,
    minChunks: 2,
    chunks: 'async',
    name: 'async-vendors'
}
// 这里定义的是在分离前被引用过两次的文件，将其一同打包到common.js中，最小为30K
common: {
    name: "common",
    minChunks: 2,
    minSize: 30000
}

4. webpack-dev-sever可参考的配置

// 开发环境设置本地服务器，实现热更新
devServer: {
    contentBase: path.resolve(__dirname, 'static'),
    // 提供给外部访问
    host: '0.0.0.0',
    port: 8388,
    // 允许开发服务器访问本地服务器的包JSON文件，防止跨域
    headers: {
        'Access-Control-Allow-Origin': '*'
    },
    // 设置热替换
    hot: true,
    // 设置页面引入
    inline: true
},
// 文件输出配置
output: {
    // 设置路径，防止访问本地服务器相关资源时，被开发服务器认为是相对其的路径
    publicPath: 'http://localhost:8188/dist/js/',
},
// 插件配置
plugins: [
    // 热更新替换
    new webpack.HotModuleReplacementPlugin()
]