如何让 workboxPlugin.InjectManifest 与 Webpack 一起工作?
How to get workboxPlugin.InjectManifest to work with Webpack?
我按照 https://developers.google.com/web/tools/workbox/guides/using-bundlers 中的步骤操作,但是构建后的 dist/sw.js
文件根本没有被 Webpack 处理。所有导入语句仍然保持原样,注释没有被删除,Terser 也没有丑化。
我做错了什么? sw.js
是否应该首先构建为单独的条目,然后将输出传递给插件?
dist/sw.js(实际输出,除注入第一行外没有任何处理)
importScripts("/dist/precache-manifest.f26179340acee9ac29fc6c689e5cb0c5.js", "https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");
/* global clients */
import { registerRoute } from 'workbox-routing'
import { CacheFirst, NetworkFirst } from 'workbox-strategies'
import { StaleWhileRevalidate } from 'workbox-strategies'
import { setConfig, skipWaiting, clientsClaim } from 'workbox-sw'
import { Plugin as BroadcastUpdatePlugin } from 'workbox-broadcast-update'
import { Plugin as ExpirationPlugin } from 'workbox-expiration'
import { Plugin as CacheableResponsePlugin } from 'workbox-cacheable-response'
./src/sw.js
/* global clients */
import { registerRoute } from 'workbox-routing'
import { CacheFirst, NetworkFirst } from 'workbox-strategies'
import { StaleWhileRevalidate } from 'workbox-strategies'
import { setConfig, skipWaiting, clientsClaim } from 'workbox-sw'
import { Plugin as BroadcastUpdatePlugin } from 'workbox-broadcast-update'
import { Plugin as ExpirationPlugin } from 'workbox-expiration'
import { Plugin as CacheableResponsePlugin } from 'workbox-cacheable-response'
webpack.common.js
module.exports = {
entry: {
main: './src/index.js',
},
output: {
path: path.join(__dirname, 'public', 'dist'),
publicPath: '/dist/',
filename: '[name].bundle.js'
},
module: {
rules: [
{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
plugins: [
new workboxPlugin.InjectManifest({
swSrc: './src/sw.js',
swDest: 'sw.js'
})
]
}
webpack.prod.config.js
module.exports = merge(common, {
devtool: 'nosources-source-map',
stats: {
chunkModules: true,
// Examine all modules
maxModules: Infinity,
// Display bailout reasons
optimizationBailout: false
},
plugins: [new CleanWebpackPlugin({ verbose: true })],
optimization: {
// Use terser instead of the default Uglify since service
// worker code does not need to be transpiled to ES5.
minimizer: [
new Terser({
// Ensure .mjs files get included.
test: /\.m?js$/
})
]
}
})
Github 上的相关问题:https://github.com/GoogleChrome/workbox/issues/1513
We are actively working on a rewrite for the InjectManifest plugin that will perform a webpack child compilation on swSrc, in addition to populate the precache manifest.
https://github.com/GoogleChrome/workbox/issues/1513#issuecomment-506482323
我按照 https://developers.google.com/web/tools/workbox/guides/using-bundlers 中的步骤操作,但是构建后的 dist/sw.js
文件根本没有被 Webpack 处理。所有导入语句仍然保持原样,注释没有被删除,Terser 也没有丑化。
我做错了什么? sw.js
是否应该首先构建为单独的条目,然后将输出传递给插件?
dist/sw.js(实际输出,除注入第一行外没有任何处理)
importScripts("/dist/precache-manifest.f26179340acee9ac29fc6c689e5cb0c5.js", "https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");
/* global clients */
import { registerRoute } from 'workbox-routing'
import { CacheFirst, NetworkFirst } from 'workbox-strategies'
import { StaleWhileRevalidate } from 'workbox-strategies'
import { setConfig, skipWaiting, clientsClaim } from 'workbox-sw'
import { Plugin as BroadcastUpdatePlugin } from 'workbox-broadcast-update'
import { Plugin as ExpirationPlugin } from 'workbox-expiration'
import { Plugin as CacheableResponsePlugin } from 'workbox-cacheable-response'
./src/sw.js
/* global clients */
import { registerRoute } from 'workbox-routing'
import { CacheFirst, NetworkFirst } from 'workbox-strategies'
import { StaleWhileRevalidate } from 'workbox-strategies'
import { setConfig, skipWaiting, clientsClaim } from 'workbox-sw'
import { Plugin as BroadcastUpdatePlugin } from 'workbox-broadcast-update'
import { Plugin as ExpirationPlugin } from 'workbox-expiration'
import { Plugin as CacheableResponsePlugin } from 'workbox-cacheable-response'
webpack.common.js
module.exports = {
entry: {
main: './src/index.js',
},
output: {
path: path.join(__dirname, 'public', 'dist'),
publicPath: '/dist/',
filename: '[name].bundle.js'
},
module: {
rules: [
{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
plugins: [
new workboxPlugin.InjectManifest({
swSrc: './src/sw.js',
swDest: 'sw.js'
})
]
}
webpack.prod.config.js
module.exports = merge(common, {
devtool: 'nosources-source-map',
stats: {
chunkModules: true,
// Examine all modules
maxModules: Infinity,
// Display bailout reasons
optimizationBailout: false
},
plugins: [new CleanWebpackPlugin({ verbose: true })],
optimization: {
// Use terser instead of the default Uglify since service
// worker code does not need to be transpiled to ES5.
minimizer: [
new Terser({
// Ensure .mjs files get included.
test: /\.m?js$/
})
]
}
})
Github 上的相关问题:https://github.com/GoogleChrome/workbox/issues/1513
We are actively working on a rewrite for the InjectManifest plugin that will perform a webpack child compilation on swSrc, in addition to populate the precache manifest.
https://github.com/GoogleChrome/workbox/issues/1513#issuecomment-506482323