关于webpack output 的filename 和 ch

output: {
path: path.resolve(__dirname, 'output'),
filename: 'static/js/[name].js',
chunkFilename: 'static/js/[name].js',
clean: true
},

1. filename

当你的项目是打包成一个单文件时，可以直接固定filename，如static/js/main.js
但是如果你的项目是多入口或者做了一些code split的优化，则filename必须改成变量形式，如staitc/js/[name].js

否则编译会报错

image.png

2. chunkFileName

当你的代码中使用了动态import时，webpack会将动态import的包，单独打包， 这样子实现按需载入，但是打包后的文件名可能是一个像是这样的随机串。

image.png

所以为了识别这些bundle块，使用的时候需要传入name，如下所示

document.getElementById('btn').onclick = function() {
    import( /* webpackChunkName: "test123123" */ './test').then((res) => {
        console.log(res)
        console.log(res.default())
    })
}

import调用的时候在括号里传入注释，如上所示，注释是/* webpackChunkName: "test123123" */，后面跟个空格，接上路径地址，意思是打包出来的bundle文件名叫test123123.js
然后webpack的output需要配置成 chunkFilename: 'static/js/[name].js',，这个[name]就能取到test123123，所以打包出来的chunk名字就是这样

image.png

当然也可以加一些hash值
chunkFilename: 'static/js/[name].[chunkhash:8].js',

image.png

参考：

image.png