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

Question

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

我想将每个外部包（来自 node_modules）放入它自己的块中。有人可以给我一个提示吗？

这是我到目前为止的进展情况（webpack.config.js 除外）

  optimization: {
    runtimeChunk: {
      name: "runtime"
    },
    splitChunks: {
      chunks: "all",
      name(module) {
        return module.resource && module.resource.replace(/\//g, "_");
      }
    }
  }

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

理想情况下，文件名应采用以下格式：

<package-name>-<version>.js

例如：

protobufjs-6.1.3.js

帮助？

奖励：我还能以某种方式为文件名生成内容哈希吗？

Answer 1

这个怎么样：

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('@', '')}`;
          },
        },
      },
    },
  },
};

您可以在以下文章中进一步解释：https://medium.com/hackernoon/the-100-correct-way-to-split-your-chunks-with-webpack-f8a9df5b7758

Answer 2

主要答案

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

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

---

奖金回合

Webpack 的输出文件名接受自定义函数。

我将尝试演示一个概念；让我们像你问的那样建立一个文件名： [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"
    ...
}

或者，您可以使用 webpack-version-file-plugin 之类的东西来生成一个 JSON 文件，在其输出中包含 {name: version} 并将该文件用作您的参考 namesVersionsObject