Question

我正在尝试将供应商（cacheGroup）文件从Webpack输出到与我的主模块文件相同的目录中。最好的解释是显示一些Webpack配置。

当前配置为：

var config = {
  mode: mode,
  context: __dirname,
  entry: {
    "Client": "./Client/entry.coffee",
    "Public": "./Public/entry.coffee",
  },
  output: {
    path: path.join(__dirname, "Build", environment),
    filename: environment === "production" ? "[name]/Assets/bundle-[hash].js" : "[name]/Assets/bundle.js",
    publicPath: "/"
  },

我正在尝试通过以下方式划分供应商缓存组：

  optimization: {
    splitChunks: {
      chunks: (chunk) => {
        return chunk.name.startsWith("client");// || chunk.name == "Public";
      },
      automaticNameDelimiter: "-",
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          reuseExistingChunk: true,
        },
      },
    },
  },

这将在我运行webpack时以结构形式输出文件，大致类似：

./Build/dev/Client/Assets/bundle.js
./Build/dev/vendor-Client/Assets/vendor-Client.js

但是我希望它是

./Build/dev/Client/Assets/bundle.js
./Build/dev/Client/Assets/vendor-Client.js

似乎无法更改供应商文件的目录以匹配。

Answer 1

对于这一行代码，您做错了

filename: environment === "production" ? "[name]/Assets/bundle-[hash].js" : "[name]/Assets/bundle.js",

对于此行[name]/Assets/bundle.js

您正在使用[name]，因此它像1/Assets/bundle.js 2/Assets/bundle.js

那样嵌入其中

因此您必须更改为

Assets/[name].bundle.js

因此所有内容都将构建到资产文件夹中

在子目录中构建Webpack供应商文件

1 个答案: