Question

我在我的项目中引入了一个服务人员，该服务人员将用于推送通知。我想在服务人员和网站的其余部分之间共享一些通用代码。

使用Webpack 3构建我的项目，最初的方法是为服务工作者创建一个单独的条目，并将生成的文件放在我的输出的根目录（不带哈希值），以为其提供一致的网址：

entry: {
  'app': './src/main.js',
  'service-worker': './src/service-worker.js'
},
output: {
  path: config.build.assetsRoot,
  filename: chunkData => {
    return chunkData.chunk.name === 'service-worker'
      ? '[name].js'
      : utils.assetsPath('js/[name].[chunkhash].js')
  },
  chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},

我还排除了将服务工作者注入HTML的可能性：

new HtmlWebpackPlugin({
  filename: 'index.html',
  template: 'index.html',
  inject: true,
  excludeChunks: ['service-worker'],
}),

在我第一次创建项目时，Vue CLI工具会自动设置CommonsChunkPlugin的几种用法：

new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor',
  minChunks (module) {
    // any required modules inside node_modules are extracted to vendor
    return (
      module.resource &&
      /\.js$/.test(module.resource) &&
      module.resource.indexOf(
        path.join(__dirname, '../node_modules')
      ) === 0
    )
  }
}),

// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
new webpack.optimize.CommonsChunkPlugin({
  name: 'manifest',
  minChunks: Infinity
}),

// This instance extracts shared chunks from code splitted chunks and bundles them
// in a separate chunk, similar to the vendor chunk
// see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
new webpack.optimize.CommonsChunkPlugin({
  name: 'app',
  async: 'vendor-async',
  children: true,
  minChunks: 3
}),

我遇到的问题是生成的service-worker.js文件是这样开始的：

webpackJsonp([17],{"2xmR":function(e,n,_){"use strict";
var t,c,r,a,o,i;t="/path/to/src/service-worker.js",...

当浏览器尝试运行服务工作者时，webpackJsonp功能不可用。

我想做的是让Webpack 3生成具有所有依赖项的service-worker.js（它们很少，我对重复的代码还可以）并且没有任何Webpack实用程序。

我的搜索很短。似乎我想与CommonsChunkPlugin的目的相反—但是我要做希望这些通用的块用于网站，而不是服务人员。

我该如何构建其中所有依赖项都包含在文件中且没有Webpack实用程序的入口点之一？

Answer 1

我偶然发现了一个comment on a GitHub issue，将我引向这个解决方案。非常感谢Eric Wood（SO，GitHub）的评论。

我了解到，CommonsChunkPlugin接受chunks选项来限制将哪些块用作公共块的源。通过提供不包含我的service-worker块的块列表，Webpack将不会提取service-worker的公共代码，因此不会引入webpackJsonp代码来动态加载公共代码。

在其他所有方面都相同的情况下，这是解决了我问题的新Webpack插件配置：

new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor',
  chunks: ['app'],
  minChunks (module) {
    // any required modules inside node_modules are extracted to vendor
    return (
      module.resource &&
      /\.js$/.test(module.resource) &&
      module.resource.indexOf(
        path.join(__dirname, '../node_modules')
      ) === 0
    )
  }
}),

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

new webpack.optimize.CommonsChunkPlugin({
  name: 'app',
  async: 'vendor-async',
  children: true,
  minChunks: 3
}),

请注意，我在chunks和vendor通用块中都添加了manifest。 CommonsChunkPlugin的最后一次使用已经使用了children选项，Webpack很快告诉我不需要chunks。

这将导致没有service-worker.js的{{1}}文件，而是这样开始：

webpackJsonp

如何使用Webpack 3创建一个完全独立的块

1 个答案: