Webpack

Question

配置 webpack 我想知道优化的东西。我有两个 JS 文件 index.js 和 helper.js。我像这样在 index.js 中导入 helper.js：

import * as helper from 'helper.js';

在这两个JS文件中，我导入了一些node_modules.

关于 this，要防止重复代码和缓存，您可以这样做：

  const path = require('path');
  const { CleanWebpackPlugin } = require('clean-webpack-plugin');
  const HtmlWebpackPlugin = require('html-webpack-plugin');

  module.exports = {
    entry: {
      index: './src/index.js'
    },
    output: {
      filename: '[name].[contenthash].js',
      path: path.resolve(__dirname, 'dist')
    },
    optimization: {
      runtimeChunk: 'single',
      splitChunks: {
        cacheGroups: {
          vendor: {
            test: /[\/]node_modules[\/]/,
            name: 'vendors',
            chunks: 'all'
          }
        }
      }
    }
  };

如果我对优化理解得很好，它只从文件夹 node_modules 创建了一个供应商文件？它会从文件夹 node_modules 导入所有内容，即使我不使用所有内容（例如 devDependencies） ?
它是否考虑了供应商在 index.js 中完成的 helper.js 的导入？
为什么他们在提供的link中使用runtimeChunk？

或者我应该这样做：

optimization: {
  splitChunks: {
    chunks: 'all'
  }
}

希望你能帮助我

Answer 1

您不需要 test，因为它默认为 node_modules。它只会编译你使用的那些。请记住，在您的 html.

中包含该文件之前，先包含该文件。

它会将所有供应商模块拆分出来，无论它们来自哪个文件。

值得注意的是，由于您将 helper.js 导入 index.js 并创建一个包，webpack 已经不会复制 node_modules 而是共享它们，只要 helper.js 不是编译为非 es6 模块的第三方模块。

换句话说，webpack 会在你自己的源文件中自动摇树，node_modules 中的 es2016 模块（不是最常见的 CJS/UMD 模块）。

只有在以下情况下，您才需要拆分为供应商捆绑包：

a) 你的供应商包的变化频率比你的 src 代码低得多（如果你经常运行 npm update）

b) 您正在生成多个输出文件并希望它们共享 vendor.js/您不想将它们声明为外部文件并让消费者安装它们（例如组件库）

P.S。不确定 runtimeChunk 的用途，但我个人不会指定它（将其保留为默认值），除非你有充分的理由。

Webpack - 优化 node_modules & 导入

Webpack - optimizarion node_modules & import

optimization

webpack-4