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。您应该从看起来像{name: version}的JSON包中构建一个对象：

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

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

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

2 个答案:

主要答案

奖金回合