chunkFilename 和 filename 的区别

很多时候，我们看到webpack.common.js的配置里，还有chunkFilename的配置，那么这个配置到底是干嘛的呢？

• 我们来看下例子，修改业务代码如下

  
  
  

  image.png
• 修改webpack.common.js里的output配置，新增chunkFilename
  
  

  image.png
• 然后我们再运行打包命令npm run dev-build,看下生成的文件
  
  

  image.png
• 我们的入口文件是src/index.js，它的key值是main，打包生成的文件是main.js。由此可以看出，入口文件打包生成的文件，都会走output里的filename这个配置。
• 而main.js里会引入lodash,lodash又被单独打包生成了一个文件，在整个代码的运行过程中，main.js先执行，然后异步的去加载这个lodash.js。这个lodash并不是一个入口的JS文件，它是一个被main.js异步加载的间接的JS文件。那么如果我们打包一个间接的JS文件的话，就会走chunkFilename这个配置项