Question

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

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

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

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

1 个答案: