Javascript 在生产中使用webpack时出现问题

我正在从事一个由preact cli发起的项目

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

我检查了preact cli中只有一个入口点，目前还可以

现在有一个插件。它具有以下配置：

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

所以我开始添加我自己的插件

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

我的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,
   }));
  }
};

这个配置给了我所有的文件，这些文件5块分开rom bundle.js。清单文件按预期包含webpack的引导文件。我运行应用程序，但在浏览器中出现以下错误：

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

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

我尝试了3种方法，在此之前，我检查了preact cli中已经存在的“ScriptExtHtmlWebpackPlugin”。这是：

我尝试过的事情：

将“ScriptExtHtmlWebpackPlugin”的默认属性更改为async。这样我可以确保最小的文件首先执行，因为它将首先被下载。在我的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

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

现在我得到了一个错误：

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

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

生成文件夹的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>

现在我没有选择了，我需要帮助。

根据webpack的github中的一个类似问题，这可能是

CommonChunkPlugin

和

HtmlWebpackPlugin

之间的冲突

---

您是否尝试过将

HtmlWebpackPlugin

中的

chunksSortMode

选项设置为

'dependency'

？

我注意到在preact cli中，插件

HtmlWebpackPlugin

有一个选项：

excludeAssets:[/（polyfills | bundle）（\..*）？\.js$/]

模板包括以下行：

<script>window.fetch||document.write('<script src="<%= htmlWebpackPlugin.files.chunks["bundle"].entry %>"><\/script>')</script>

然后我在file.preact.js中修改了HtmlWebpackplgin的选项：

const p = helpers.getPluginsByName(config, 'HtmlWebpackPlugin')[0].plugin;
p.options.chunksSortMode='dependency'; // I dont't know if it's useful
p.options.excludeAssets: [/(polyfills)(\..*)?\.js$/ ];

---

一些低挂果实，我假设您已经看到当使用

NODE_ENV

构建等于“production”的包时，包大小的差异？将尝试chunkSortMode

<script>window.fetch||document.write('<script src="<%= htmlWebpackPlugin.files.chunks["bundle"].entry %>"><\/script>')</script>

"scripts": {
    "start": "if-env NODE_ENV=production && npm run -s serve || npm run -s dev",
    "build": "preact build --template=src/template.ejs",
    "build-nr": "preact build --no-prerender --template=src/template.ejs",
    "serve": "preact build --template=src/template.ejs && preact serve",
    "dev": "preact watch --template=src/template.ejs",
    "lint": "eslint src",
    "test": "jest"
}

const p = helpers.getPluginsByName(config, 'HtmlWebpackPlugin')[0].plugin;
p.options.chunksSortMode='dependency'; // I dont't know if it's useful
p.options.excludeAssets: [/(polyfills)(\..*)?\.js$/ ];