Question

我正在尝试将项目从webpack 3迁移到webpack 4.在以前的版本中有如下配置：

new webpack.optimize.CommonsChunkPlugin({ names: ['common', 'initApp'], filename: '[name].[hash].js' }),
new webpack.optimize.CommonsChunkPlugin({ names: ['app'], children: true, minChunks: 2, filename: '[name].[hash].js' }),

如何将其正确迁移到webpack 4？

我尝试了下一个配置：

optimization: {
  minimize: !development,
  noEmitOnErrors: true, //! Webpack 4
  splitChunks: {
    cacheGroups: {
      utils: {
        name: 'utils',
        test: /utils/,
        chunks: 'initial',
        reuseExistingChunk: true
      },
      initApp: {
        name: 'initApp',
        test: /initApp/,
      },
      common: {
        name: 'common',
        test: /common/,
        chunks: 'all',
      },
      app: {
        minChunks: 2,
        name: 'app',
        test: /app/,
      },
    },
  },

  minimizer: [],
  namedModules: development,
},

这就是我遇到的问题：一些my_module（来自node_modules）有下一个代码（我把它移到了入口点utils）：

  let localeStrings;
  export function l10n(key, ...args) {
    if (!localeStrings) {
      throw new Error('l10nLib.l10n called before locale strings loaded');
    }
    /// Do some logic
  }
  // And here some function is initialize localeStrings that we are calling `initApp` entry point

现在使用当前配置此块（来自my_module）调用两次：第一次从initApp开始，第二次从app入口点和localeStrings变量第一次在调用时正确初始化从initApp开始，第二次从app入口点localeStrings调用undefined，为什么？

在webpack 4中拆分块

0 个答案: