webpack 中chunkFilename 的作用

webpack官网：https://www.webpackjs.com/configuration/output/#output-chunkfilename

作用：
不在output.entry中的文件，但是需要单独打包的文件名。（
设置使用require.ensure或者import异步加载模块打包后的名称。）

案例：

• test.js

export default function test () {
    console.log('test log----');
}

• detail.js

document.querySelector('.btn').onclick = function () {
    let a = import('../module/test');
    a.then((res)=>{
        res.default(); // test log----
    })
};

未使用chunkFilename

    entry: {              
      'javascripts/pages/detail':'./javascripts/pages/detail.js',   
      'javascripts/pages/home':'./javascripts/pages/home.js'
    },
    output: {
        path: path.resolve(__dirname, '../public'),
        filename: '[name].js'
    },

打包后：

image.png

使用chunkFilename

    entry: {              
      'javascripts/pages/detail':'./javascripts/pages/detail.js',   
      'javascripts/pages/home':'./javascripts/pages/home.js'
    },
    output: {
        path: path.resolve(__dirname, '../public'),
        filename: '[name].js',
                chunkFilename: '[name].[chunkhash].js'
    },

image.png