reactjs - 使用 CommonsChunkPlugin 的 Serviceworker Chunk 不起作用，未定义 webpackJsonp

Question

我正在尝试使用 webpack2 创建一个 serviceworker 块（sw.js），CommonsChunkPlugin但是在尝试将 /sw.js 注册为 serviceworker 时出现错误Uncaught ReferenceError: webpackJsonp is not defined。

显然 webpackJsonp 用于块的异步加载，并且正在弄乱我的 serviceworker 文件。无论如何要删除 serviceworker 块的异步加载？

我的 webpack 配置：

{
  entry: {
    main: [
      'react-hot-loader/patch',
      `webpack-dev-server/client?http://${host}:${port}`,
      'webpack/hot/only-dev-server',
      './index.jsx',
    ],
    sw: './sw.js',
    vendor: [...],
  },
  output: {
    filename: '[name].js',
    path: resolve(__dirname, 'dist'),
    publicPath: '/',
  },
  resolve: { extensions: ['.js', '.jsx'] },
  performance: { hints: false },
  context: resolve(__dirname, 'src'),
  devtool: 'inline-source-map',

  devServer: {
    hot: true,
    host,
    port,
    contentBase: resolve(__dirname, 'dist'),
    publicPath: '/',
  },

  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('css-loader'),
      },
    ],
  },

  plugins: [
    new ExtractTextPlugin('main.css'),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new webpack.optimize.CommonsChunkPlugin({
      names: ['vendor', 'manifest'],
    }),
  ],
};

Answer 1

如果您仅将 webpack 运行时代码（已定义 webpackJsonp）提取到清单包中并在所有其他脚本之前加载它，它应该可以工作。

所以，你会想重写为

plugins: [
   ...
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor'
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      chunks: 'vendor',
      minChunks: Infinity
    }),
  ],