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

还是我应该做类似的事情？

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

希望你能帮助我

Answer 1

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

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

值得一提的是，由于您要将helper.js导入index.js并创建一个捆绑包，因此，只要helper.js不是编译为以下内容的第三方模块，webpack就不会复制node_modules而是共享它们非ES6模块。

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

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

a）您的供应商捆绑包更改频率比src代码的更改频率低得多（如果您经常运行test，这种更改并不常见）

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

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

Webpack-优化节点_模块和导入

1 个答案: