Javascript Webpack：将每个外部包放入自己的块中

我目前正在Webback4中尝试代码拆分

我想将每个外部包（来自节点\模块）放入它自己的块中。有人能告诉我怎么做吗

这就是我到目前为止取得的成绩（除了webpack.config.js）

但是现在，每个JS文件都是一个单独的块。所以，我想每个包裹都做

理想情况下，文件名的格式应为：

<package-name>-<version>.js

帮忙

奖励：我是否可以为文件名生成内容哈希？

主要答案 使用node_modules文件夹测试每个导入的模块，并将其放入自己的文件中：

optimization: {
    // runtimeChunk: 'single',
    splitChunks: {
        cacheGroups: {
            vendors: {
                test: /[\\/]node_modules[\\/]/,
                name: 'vendors',
                enforce: true,
                chunks: 'all'
            }
        }
    }
}

---

奖金回合 网页包的输出文件名接受一个自定义函数

我将尝试演示一个概念；让我们按照您的要求构建一个文件名：

[name]-[version]-[contenthash].js

const pkgJson = require('./package.json');
const namesVersionsObject = pkgJson.dependencies.forEach(...);

output: {
  filename: (chunkData) => {
    return `[${chunkData.chunk.name}]-[${namesVersionsObject[chunkData.chunk.name]}]-[contenthash]`
  },
}

不要复制并粘贴此代码—它将不起作用。这只是一个如何生成自定义文件名输出的POC。 您应该从包JSON构建一个类似于

{name:version}

的对象：

{
    "react": "16.5.0"
    ...
}

或者，您也可以使用类似的方法生成一个JSON文件，该文件的输出中包含{name:version}，并将该文件用作您的参考

namesVersionObject

如何：

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: path.resolve(__dirname, 'src/index.js'),
  plugins: [
    new webpack.HashedModuleIdsPlugin(), // so that file hashes don't change unexpectedly
  ],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
  },
  optimization: {
    runtimeChunk: 'single',
    splitChunks: {
      chunks: 'all',
      maxInitialRequests: Infinity,
      minSize: 0,
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name(module) {
            // get the name. E.g. node_modules/packageName/not/this/part.js
            // or node_modules/packageName
            const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];

            // npm package names are URL-safe, but some servers don't like @ symbols
            return `npm.${packageName.replace('@', '')}`;
          },
        },
      },
    },
  },
};

---

您可以在下面的文章中对此进行进一步解释：

这可能只是一个供应商区块的重复，但我希望每个包都有一个区块。

{
    "react": "16.5.0"
    ...
}

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: path.resolve(__dirname, 'src/index.js'),
  plugins: [
    new webpack.HashedModuleIdsPlugin(), // so that file hashes don't change unexpectedly
  ],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
  },
  optimization: {
    runtimeChunk: 'single',
    splitChunks: {
      chunks: 'all',
      maxInitialRequests: Infinity,
      minSize: 0,
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name(module) {
            // get the name. E.g. node_modules/packageName/not/this/part.js
            // or node_modules/packageName
            const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];

            // npm package names are URL-safe, but some servers don't like @ symbols
            return `npm.${packageName.replace('@', '')}`;
          },
        },
      },
    },
  },
};