Webpack - 优化节点模块和导入答案

【问题标题】：Webpack - optimizarion node_modules & importWebpack - 优化节点模块和导入
【发布时间】：2019-11-03 07:32:49
【问题描述】：

配置 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 创建了一个供应商文件？即使我不使用所有内容（例如 devDependencies），它也会从文件夹 node_modules 导入所有内容？
是否考虑到在vendor的index.js中导入helper.js？
为什么他们在提供的链接中使用 runtimeChunk？

或者我应该这样做：

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

希望你能帮助我

【问题讨论】：

标签： optimization webpack webpack-4

【解决方案1】：

您不需要 test，因为它默认为 node_modules。它只会编译你使用的那些。从您的 html 中包含该文件时，请记住在您的应用程序之前先包含该文件。

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

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

换句话说，webpack 会自动在你自己的源文件中进行 tree-shake 内容，以及 node_modules 中的 es2016 模块（不是最常见的 CJS/UMD 模块）。

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

a) 您的供应商捆绑包更改频率远低于您的 src 代码（如果您经常运行 npm update，则不常见）

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

附：不完全确定 runtimeChunk 的用途，但我个人不会指定它（将其保留为默认值），除非您有充分的理由。

【讨论】：