I followed the steps at https://developers.google.com/web/tools/workbox/guides/using-bundlers but the dist/sw.js file after being built was not processed by Webpack at all. All the import statements are still there left untouched, comments are not being stripped out, and not uglify at all by Terser.
What did I do wrong? Should sw.js be first built as a separate entry and then pass the output to the plugin?
dist/sw.js (actual output, nothing is being processed other than the first line got injected)
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$/
})
]
}
})
Related issue on Github: https://github.com/GoogleChrome/workbox/issues/1513