webpack4可以根据文件目录输出打包js文件吗?

yedu
  • 108

现在webpack打包结果是js文件全部都在dist文件夹下,有没有可能可以根据项目结构输出呢?比如home文件下的所有异步chunk,打包输出到dist/home文件夹下,my文件下的所有异步chunk,打包输出到dist/my文件下.
有没有可能实现呢?

回复
阅读 1k
3 个回答
✓ 已被采纳

已解决!最终利用了webpack提供的afterOptimizeChunkIds钩子函数实现,获取chunk编译时的上下文context,再把路径拼接到chunk.name上就可以了。

可以使用SplitChunksPlugin根据你的需要拆分chunk,然后在使用chunkFilename去定义chunk要存放的路径.参考配置如下:

const path = require('path')

/**
 * @type {import('webpack').Configuration}
 */
const config = {
  entry: {
    main: './src/index.js',
  },
  output: {
    filename: '[name].chunkhash.bundle.js',
    chunkFilename: '[name]/[name].chunkhash.bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      maxInitialRequests: Infinity,
      minSize: 0,
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          name: 'vendors',
          chunks: 'all',
        },
        home: {
          test: /[\\/]home\.js$/,
          priority: 10,
          name: 'home',
        },
        my: {
          test: /[\\/]my\.js$/,
          priority: 10,
          name: 'my',
        },
      },
    },
  },
}
module.exports = config

更多配置请参考文档SplitChunksPlugin

Liar1995
  • 1
新手上路,请多包涵

hi,你好,我想请教一下:webpack提供的afterOptimizeChunkIds钩子函数实现,获取chunk编译时的上下文context,再把路径拼接到chunk.name上就可以了。的具体实现。

你知道吗?

宣传栏