在最近的业务开发中，需要在webpack(当前使用版本为^4.43.0)中对文件进行处理。这里记录下开发过程中遇到的问题，并持续更新原因。

前置说明

这里需要先说明一个webpack的核心配置选项：output，可以控制 webpack 如何向硬盘写入编译文件。

其中，有两个属性：filename和chunkFilename，它们的官网介绍如下，详情可以点击这里：

output.filename 此选项决定了每个输出 bundle 的名称。
output.chunkFilename 此选项决定了非入口(non-entry) chunk 文件的名称。

这里可以简单归纳下：

• filename：对应于entry里面生成出来的文件名。
• chunkFilename：chunkFilename就是未被列在entry中，但有些场景需要被打包出来的文件命名配置。比如按需加载（异步）模块的时候。

验证

为了理解上面的逻辑，我们用简单的代码进行验证下。

这里，我对webpack的部分设置如下：

// webpack.prod.conf.js

entry: {
    index: './src/index.ts',
},
output: {
    filename: 'js/[name].[chunkhash:7].js',
    chunkFilename: 'js/[name].js',
},

并且，我以路由懒加载的方式载入组件main。

// router.ts

export default {
  path: '/',
  name: 'main',
  component: () => import(/* webpackChunkName: "main" */ './app.vue'),
};

在打包命令完成后，生成的js文件如下：

效果和我们之前了解的结果相同，main组件是异步加载的，所以执行的chunkFilename对应的逻辑，名称为main.js；index在entry中，执行的filename对应的逻辑，名称为index.js。

与optimization的影响

在webpack中，我们通过optimization来进行优化处理。其中，通过设置optimization.runtimeChunk，会为每个仅含有runtime 的入口起点添加一个额外chunk。

runtimeChunk，作用是将包含chunks映射关系的list单独从index.js里提取出来。也可以看看这里的解释。

这里，我们在打包配置中添加runtimeChunk设置。

// webpack.prod.conf.js

optimization: {
    runtimeChunk: {
      name: 'runtime',
    },
  },

再次打包，我们会得到如下的文件:

是不是很神奇？

index.js和mian.js都执行的chunkFilename对应的逻辑；而runtime.js执行的filename对应的逻辑。

未完待续...