webpack中动态import()打包后的文件名称定义

动态import()打包出来文件的name是按照0,1,2...依次排列，如0.js、1.js等，有的时候我们希望打包出来的文件名是打包前的文件名称。要实现这，需要经历3个步骤：
1.在webpack配置文件中的output中添加chunkFilename。命名规则根据自己的项目来定，其中[name]就是文件名，这一块更详细的说明请点击这里。

//其他代码...
output: {
    path: path.resolve(__dirname, 'public'),
    filename: '[name].[hash:8].js',
    chunkFilename: '[name].[hash:8].js',//动态import文件名
},
//其他代码...

2.在动态import()代码处添加注释webpackChunkName告诉webpack打包后的chunk的名称（注释中的内容很重要，不能省掉），这里打包以后的name就是MyFile。

import(/* webpackChunkName: "MyFile" */`../containers/MyFile`)

3.大多数情况下我们使用动态import()是通过循环来做的，这样我们就不得不引入变量了，使用[request]来告诉webpack，这里的值是根据后面传入的字符串来决定，本例中就是变量pathName的值，具体如下：

import(/* webpackChunkName: "[request]" */`../containers/${pathName}`)

最后

以上就是糟糕热狗为你收集整理的webpack中动态import()打包后的文件名称定义的全部内容，希望文章能够帮你解决webpack中动态import()打包后的文件名称定义所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。