自定义构建设置所需的 webpack vue.js 热重载配置

Question

我有一个用于将 iframe 注入网页的 chrome 扩展的自定义构建设置，并且这个 iframe 是使用 vue.js 构建的。 构建这个 iframe 的入口点是src/popup/js，它应该输出到dist/popup。

这一切都很好，但我不知道如何设置热重载，因此我可以在更改代码的那一刻看到浏览器中的更改。 目前，当我运行build 步骤时，一切准备就绪并放入dist 文件夹，我要热重载的iframe 是dist/popup/popup.html 文件。

这是我的package.json：

{
    "name": "extensionname",
    "version": "1.0.17",
    "description": "Chrome Extension",
    "scripts": {
        "lint": "eslint --ext .js,.vue src",
        "prettier": "prettier \"src/**/*.{js,vue}\"",
        "prettier:write": "npm run prettier -- --write",
        "build-zip": "node scripts/build-zip.js",
        "build:prod": "cross-env NODE_ENV=production TARGET_ENV=production webpack --hide-modules && cross-env NODE_ENV=production TARGET_ENV=production npm run build-zip",
        "build:store": "cross-env NODE_ENV=production TARGET_ENV=store webpack --hide-modules && cross-env NODE_ENV=production TARGET_ENV=store npm run build-zip",
        "build:dev": "cross-env NODE_ENV=development TARGET_ENV=development webpack --hide-modules && cross-env NODE_ENV=development TARGET_ENV=development npm run build-zip",
        "build:test": "cross-env NODE_ENV=development TARGET_ENV=test webpack --hide-modules && cross-env NODE_ENV=development TARGET_ENV=test npm run build-zip"
    },
    "dependencies": {
        "axios": "^0.18.0",
        "emoji-mart-vue": "^2.6.6",
        "moment": "^2.22.2",
        "vue": "^2.6.10",
        "vuetify": "^1.5.4",
        "vuex": "^3.0.1",
        "split-sms": "^0.1.7"
    },
    "devDependencies": {
        "@babel/core": "^7.1.2",
        "@babel/plugin-proposal-optional-chaining": "^7.0.0",
        "@babel/preset-env": "^7.1.0",
        "@types/chrome": "^0.0.74",
        "archiver": "^3.0.0",
        "babel-eslint": "^10.0.1",
        "babel-loader": "^8.0.2",
        "copy-webpack-plugin": "^4.5.3",
        "core-js": "^2.6.5",
        "cross-env": "^5.2.0",
        "css-loader": "^0.28.11",
        "ejs": "^2.6.1",
        "eslint": "^5.16.0",
        "eslint-config-prettier": "^3.1.0",
        "eslint-config-standard": "^12.0.0",
        "eslint-friendly-formatter": "^4.0.1",
        "eslint-loader": "^2.1.2",
        "eslint-plugin-import": "^2.16.0",
        "eslint-plugin-node": "^7.0.1",
        "eslint-plugin-prettier": "^3.0.1",
        "eslint-plugin-promise": "^4.1.1",
        "eslint-plugin-standard": "^4.0.0",
        "eslint-plugin-vue": "^5.2.2",
        "file-loader": "^1.1.11",
        "mini-css-extract-plugin": "^0.4.4",
        "node-sass": "^4.9.3",
        "prettier": "^1.14.3",
        "sass-loader": "^7.1.0",
        "vue-loader": "^15.4.2",
        "vue-template-compiler": "^2.6.10",
        "webpack": "^4.20.2",
        "webpack-cli": "^3.1.2"
    }
}

这是webpack.config.js：

const webpack = require('webpack');
const ejs = require('ejs');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');
const { version } = require('./package.json');

const config = {
    mode: process.env.NODE_ENV,
    context: __dirname + '/src',
    entry: {
        'popup/popup': './popup/popup.js',
    },
    output: {
        path: __dirname + '/dist',
        filename: '[name].js',
    },
    resolve: {
        extensions: ['.js', '.vue', '.json'],
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loaders: 'vue-loader',
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader'],
            },
            {
                test: /\.scss$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
            },
            {
                test: /\.sass$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader?indentedSyntax'],
            },
            {
                test: /\.(png|jpg|gif|svg|ico)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]?emitFile=false',
                },
            },
        ],
    },
    plugins: [
        new webpack.DefinePlugin({
            global: 'window',
            'process.env.TARGET_ENV': JSON.stringify(process.env.TARGET_ENV)
        }),
        new VueLoaderPlugin(),
        new MiniCssExtractPlugin({
            filename: '[name].css',
        }),
        new CopyWebpackPlugin([
            { from: 'images', to: 'images' },
            { from: 'scripts', to: 'scripts' },
            { from: 'css', to: 'css'},
            { from: 'popup/popup.html', to: 'popup/popup.html', transform: transformHtml },
            {
                from: 'manifest.json',
                to: 'manifest.json',
                transform: content => {
                    const jsonContent = JSON.parse(content);
                    jsonContent.version = version;

                    if (process.env.TARGET_ENV != 'store') {
                        jsonContent['content_security_policy'] = "script-src 'self' 'unsafe-eval'; object-src 'self'";
                        jsonContent['key'] = '123456';
                    }

                    return JSON.stringify(jsonContent, null, 4);
                },
            },
            {
                from: 'config.json',
                to: 'config.js',
                transform: content => {
                    return transformConfigForExtension(content);
                },
            },
        ]),
    ],
};

if (config.mode === 'production') {
    config.plugins = (config.plugins || []).concat([
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"',
            },
        }),
    ]);
}

function transformHtml(content) {
    return ejs.render(content.toString(), {
        ...process.env,
    });
}

function transformConfigForExtension(content){
    let extensionConfig = JSON.parse(content.toString())[process.env.TARGET_ENV];
    return 'const config = ' + JSON.stringify(extensionConfig, null, 4);
}

module.exports = config;

这是我的项目结构：

Answer 1

据我所知，这在 Chrome 上是不可能的。看看web-ext。它允许您在 Firefox 上开发扩展时热重载代码。

或者，您还可以创建自己的扩展程序，利用management API 重新加载扩展程序。我猜这就是 web-ext 在后台所做的。