Webpack -优化node_modules &进口

Question

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

import * as helper from 'helper.js';

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

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

  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)？
• 它是否考虑到在供应商中以helper.js完成的index.js导入？
• 为什么他们在提供的链接中使用runtimeChunk？

或者我应该做这样的事：

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

希望你能帮我

Answer 1

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

它将分割出所有供应商模块，而不管它们是从哪个文件中包含的。

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

换句话说，webpack将自动在您自己的源文件中树下抖动内容，而es2016模块将自动树到node_modules中(而不是CJS/UMD模块，这是最常见的)。

在以下情况下，只需要拆分到供应商包：

( a)与src代码相比，供应商包的更改频率要低得多(如果经常运行npm update，则不是那么常见)。

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

P.S.不太清楚runtimeChunk的用途，但就我个人而言，除非您有充分的理由，否则我不会指定它(将其保留为默认值)。