如何使用Webpack 3创建完全自包含的块

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

使用Webpack 3构建我的项目，我最初的方法是为服务人员创建一个单独的条目，并将生成的文件放在我的输出的根目录下，而不使用散列来为其提供一致的web地址：

条目：{
“app”：“./src/main.js”，
“服务人员”：“./src/service worker.js”
},
输出：{
路径：config.build.assetsRoot，
文件名：chunkData=>{
return chunkData.chunk.name===“服务工作者”
？“[name].js”
：utils.assetsPath（'js/[name].[chunkhash].js'）
},
chunkFilename:utils.assetsPath（'js/[id].[chunkhash].js'）
},

我还将服务人员排除在我的HTML中：

新的HtmlWebpackPlugin({
文件名：“index.html”，
模板：“index.html”，
是的，
excludeChunks:[“服务工作者”]，
}),

在我第一次创建项目时，Vue CLI工具会自动设置

CommonChunkPlugin

的几种用法：

新建webpack.optimize.commons插件({
名称：'供应商'，
minChunks（模块）{
//节点_模块内的任何所需模块将提取给供应商
返回(
模块资源&&
/\.js$/.test（module.resource）&&
module.resource.indexOf(
join（_dirname，“../node_modules”）
) === 0
)
}
}),
//将网页包运行时和模块清单提取到其自己的文件中，以便
//防止在更新应用程序包时更新供应商哈希
新建webpack.optimize.commonChunkPlugin({
名称：'清单'，
minChunks：无限
}),
//此实例从代码分割的块中提取共享块并将其捆绑
//在单独的区块中，类似于供应商区块
//见：https://webpack.js.org/plugins/commons-chunk-plugin/#extra-异步公共块
新建webpack.optimize.commonChunkPlugin({
名称：“应用程序”，
异步：“供应商异步”，
孩子们：没错，
碎块：3
}),

我遇到的问题是，生成的

service worker.js

文件的开头如下：

webpackJsonp（[17]，{“2xmR”：函数（e，n，{“使用严格”；
var t，c，r，a，o，i；t=“/path/to/src/service worker.js”，。。。

当浏览器尝试运行service worker时，

webpackJsonp

功能不可用

我想做的是让Webpack3生成

service worker.js

及其所有依赖项（它们很少，我对重复的代码没有意见），并且没有任何Webpack实用程序

我的搜索结果很差。似乎我想做的与

commonChunkPlugin

的目的相反，但我确实希望这些常用的块用于网站，而不是服务人员

我如何着手构建一个包含所有依赖项的入口点，而不使用网页包实用程序？

我偶然发现了一个解决方案。非常感谢Eric Wood（，）的评论

我学到的是

commonChunkPlugin

接受

chunks

选项来限制哪些块用作公共块的源。通过提供排除我的

服务人员

块的块列表，Webpack将不会提取

服务人员

的公共代码，因此不会引入de>webpackJsonpcode动态加载常用代码

在其他一切都相同的情况下，以下是解决我问题的新Webpack插件配置：

新建webpack.optimize.commons插件({
名称：'供应商'，
区块：['app']，
minChunks（模块）{
//节点_模块内的任何所需模块将提取给供应商
返回(
模块资源&&
/\.js$/.test（module.resource）&&
module.resource.indexOf(
join（_dirname，“../node_modules”）
) === 0
)
}
}),
新建webpack.optimize.commonChunkPlugin({
名称：'清单'，
区块：['app']，
minChunks：无限
}),
新建webpack.optimize.commonChunkPlugin({
名称：“应用程序”，
异步：“供应商异步”，
孩子们：没错，
碎块：3
}),

请注意，我在

供应商

和

清单

公共区块中添加了

区块

。上次使用

CommonChunkPlugin

时已经使用了

子项

选项，Webpack很快告诉我不需要

区块

这会产生一个

service worker.js

文件，其中没有

webpackJsonp

，而是这样开始的：

！函数（e）{var t={}；函数n（r）{。。。