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

Question

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

Answer 1

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

Answer 2

可以使用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

Answer 3

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