时间戳

首页 > 解决方案 > 如何使用 Webpack 3 创建一个完全独立的块

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

问题描述

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

使用 Webpack 3 来构建我的项目，我最初的方法是为 service worker 创建一个单独的条目，并将生成的文件放在我的输出的根目录中，不使用哈希来为其提供一致的网址：

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')
},

我还排除了 service worker 被注入到我的 HTML 中：

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

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

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",...

当浏览器尝试运行 service worker 时，该webpackJsonp功能不可用。

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

我的搜索不足。似乎我想做与CommonsChunkPlugin预期相反的事情——但我确实想要网站的那些常见块，而不是服务人员。

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

标签： webpack

解决方案

我偶然发现了一个关于 GitHub 问题的评论，导致我找到了这个解决方案。非常感谢 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了 thevendor和manifestcommon 块。最后一次使用CommonsChunkPlugin已经在使用该children选项，Webpack 很快告诉我chunks不需要。

这会导致一个service-worker.js文件没有webpackJsonp，而是像这样开始：

!function(e){var t={};function n(r){ ...

推荐阅读