javascript - 在生产环境中构建 webpack 时遇到问题

Question

我正在做一个由 preact-cli 发起的项目。

我有一个打包我的应用程序的构建脚本。 webpack 配置已经在 preact-cli 全局定义，但我可以从 preact.config.js 修改它。

我查了一下preact-cli只有一个入口，暂时没问题。

还有一个 CommonsChunkPlugin。它有这个配置:

如果我使用此配置正常构建应用程序。我得到一个很大的捆绑文件。

所以我开始添加我自己的 CommonsChunkPlugin。

Preact 提供了一种修改 webpack 配置的方法。这是哪个

我的 preact.config.js 是:

export default (config, env, helpers) => {
  let { rule } = helpers.getLoadersByName(config, 'babel-loader')[0];
  let babelConfig = rule.options;
  babelConfig.plugins.push('transform-decorators-legacy');
  babelConfig.presets.push('flow');
  config.plugins.push(new InterpolateHtmlPlugin(envs.raw));
  config.plugins.push(new webpack.DefinePlugin(envs.stringified));
  config.plugins.push(new WatchMissingNodeModulesPlugin(paths.appNodeModules));

  rule.options.plugins.push('transform-regenerator');
  rule.options.plugins.push(["transform-runtime", {
    "helpers": false,
    "polyfill": false,
    "regenerator": true
  }]);

  let htmlPlugin = helpers.getPluginsByName(config, 'HtmlWebpackPlugin')[0].plugin;
    htmlPlugin.options.template = `!!ejs-loader!${path.resolve(__dirname, './template.html')}`;
    htmlPlugin.options.title = "JApp";
    htmlPlugin.options.manifest = Object.assign({}, {
     name: 'JH',
     short_name: 'JApp',
     theme_color: '#007DC5'
   });

  let commonChunksPlugin = helpers.getPluginsByName(config, 'CommonsChunkPlugin')[0].plugin;
  console.log(commonChunksPlugin);

  if(process.env.NODE_ENV === "production") {
    config.plugins.push(new webpack.optimize.CommonsChunkPlugin({
     name: 'vendor',
     minChunks: ({ resource }) => (
      resource !== undefined &&
      resource.indexOf('node_modules') !== -1
     ),
    }));
    config.plugins.push(new webpack.optimize.CommonsChunkPlugin({
    name: 'preact-chunk',
    filename: 'static/js/[name].[chunkhash:8].js',
    minChunks: (m) => m.resource && /preact|preact-compat/.test(m.resource)
   }));
   config.plugins.push(new webpack.optimize.CommonsChunkPlugin({
    name: 'others-chunk',
    filename: 'static/js/[name].[chunkhash:8].js',
    minChunks: (m) => m.resource && /redux|preact-redux|redux-form|lodash|sane-email-validation|moment|core-decorators|lodash-decorators/.test(m.resource)
   }));
   config.plugins.push(new webpack.optimize.CommonsChunkPlugin({
    name: 'material-ui-chunk',
    filename: 'static/js/[name].[chunkhash:8].js',
    minChunks: (m) => m.resource && /material-design-lite|preact-mdl/.test(m.resource)
   }));
   config.plugins.push(new webpack.optimize.CommonsChunkPlugin({
    name: 'manifest',
    filename: 'static/js/[name].[chunkhash:8].js',
    minChunks: Infinity,
   }));
  }
};

此配置为我提供了与 bundle.js 相隔 5 个 block 的所有文件。 list 文件包含预期的 webpack 引导文件。我运行应用程序，但在浏览器中出现此错误:

bundle.9b6d3.js:1 Uncaught ReferenceError: webpackJsonp is not defined
at bundle.9b6d3.js:1

因此，我发现 manifest.js 文件加载晚于 bundle.js 并且所有脚本文件都具有属性“延迟”。 webpackJsonp 定义存在于 manifest.js 文件中。

我尝试了 3 件事，在此之前我检查了 preact-cli 中已经存在的“ScriptExtHtmlWebpackPlugin”。是这样的:

我尝试过的事情:

1. 将“ScriptExtHtmlWebpackPlugin”的默认属性更改为异步。这样我可以确保首先执行最小的文件，因为它将首先被下载。在我的 preact.config.js 文件中添加任何插件之前，我写了这段代码:

   let scriptPlugin = helpers.getPluginsByName(config, 'ScriptExtHtmlWebpackPlugin')[0].plugin;
   scriptPlugin.options.defaultAttribute = 'async';
   

   现在我得到了错误:

   bootstrap b7b6d09314cc5ff6d290:54 Uncaught TypeError: Cannot read property 'call' of undefined
       at n (bootstrap b7b6d09314cc5ff6d290:54)
       at Object.<anonymous> (others-chunk.55912d9c.js:12)
       at Object.E/bI (others-chunk.55912d9c.js:1207)
       at n (bootstrap b7b6d09314cc5ff6d290:54)
       at Object.JkW7 (bundle.9b6d3.js:18)
       at n (bootstrap b7b6d09314cc5ff6d290:54)
       at Object.pwNi (entry.js:13)
       at n (bootstrap b7b6d09314cc5ff6d290:54)
       at window.webpackJsonp (bootstrap b7b6d09314cc5ff6d290:25)
       at bundle.9b6d3.js:1
   

   脚本文件加载到build文件夹的index.html中，如下:

   <script defer="defer" src="/bundle.9b6d3.js"></script>
   <script>window.fetch||document.write('<script src="/polyfills.d41d8.js"><\/script>')</script>
   <script src="/static/js/manifest.d41d8cd9.js" async></script>
   <script src="/static/js/others-chunk.55912d9c.js" async></script>
   <script src="/static/js/preact-chunk.c2b64323.js" async></script>
   <script src="/static/js/node-static.916ed24c.js" async></script>
   

2. 让属性仍然是'defer'，但是改变加载文件的顺序，希望manifest.js 比bundle.js 加载得早。所以我在'HtmlWebpackPlugin'中写了这个配置。

   htmlPlugin.options.chunksSortMode = function(entry1, entry2) {
       if(entry1.names[0] === "manifest") return -1;
       else return 1;
   }
   

   现在我得到了错误:

   Uncaught ReferenceError: webpackJsonp is not defined
       at bundle.9b6d3.js:1
   

   build文件夹的index.html文件按顺序加载脚本:

   <script defer="defer" src="/bundle.9b6d3.js"></script>
   <script>window.fetch||document.write('<script src="/polyfills.d41d8.js"><\/script>')</script>
   <script src="/static/js/manifest.d41d8cd9.js" defer="defer"></script>
   <script src="/static/js/others-chunk.55912d9c.js" defer="defer"></script>
   <script src="/static/js/preact-chunk.c2b64323.js" defer="defer"></script>
   <script src="/static/js/node-static.916ed24c.js" defer="defer"></script>
   

   注意:在上述两种方法中，我的代码都不会影响 bundle.js 文件位置的任何一个属性。

3. 通过preact-cli构建后，手动更改加载脚本的顺序，所以我把manifest.js放在了bundle.js上面。所以它看起来像这样:

   <script src="/static/js/manifest.d41d8cd9.js" defer="defer"></script>
   <script defer="defer" src="/bundle.9b6d3.js"></script>
   <script>window.fetch||document.write('<script src="/polyfills.d41d8.js"><\/script>')</script>
   <script src="/static/js/others-chunk.55912d9c.js" defer="defer"></script>
   <script src="/static/js/preact-chunk.c2b64323.js" defer="defer"></script>
   <script src="/static/js/node-static.916ed24c.js" defer="defer"></script>
   

   我遇到了这个错误:

   Uncaught TypeError: Cannot read property 'call' of undefined
       at n (bootstrap 4da816313a3eaaa2f964:54)
       at window.webpackJsonp (bootstrap 4da816313a3eaaa2f964:25)
       at bundle.9b6d3.js:1
   

现在我别无选择，我需要这方面的帮助。

Answer 1

根据 this answer webpack的github上也有类似的问题，可能是CommonChunksPlugin和HtmlWebpackPlugin有冲突。

您是否尝试过将 HtmlWebpackPlugin 中的 chunksSortMode 选项设置为 'dependency'？