Как заставить workboxPlugin.InjectManifest работать с Webpack? - PullRequest
3 голосов
/ 22 июня 2019

Я выполнил шаги на 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

1 Ответ

0 голосов
/ 03 июля 2019

Мы активно работаем над перезаписью плагина InjectManifest, который будет выполнять дочернюю компиляцию webpack для swSrc, в дополнение к заполнению манифеста предварительного кэша.

https://github.com/GoogleChrome/workbox/issues/1513#issuecomment-506482323

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...