Webpack 2.x，__webpack_public_path__ 仍然有效吗？

Question

我有一个 chrome 扩展，其中发布了不稳定、稳定和夜间版本，我需要能够动态设置扩展资源的公共路径。我一直在尝试以多种方式添加它，通过将 js 条目直接添加到 webpack.config.js 中，从我的 ts 条目中导入，直接放入 ts 文件中..

我只想将 __webpack_public_path__ 全局更改为我不能指望在构建之间总是相同的东西。

我试过这样：

__webpack_public_path__ = chrome.extension.getURL("");
var __webpack_public_path__ = chrome.extension.getURL("");
let __webpack_public_path__ = chrome.extension.getURL("");
window.__webpack_public_path__ = chrome.extension.getURL("");

有谁知道自 Webpack 2.x 以来这是否发生了变化？

更新！

这是我的 webpack.config.development.js

var path = require('path');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var WebpackNotifierPlugin = require('webpack-notifier');
var RawLoader = require('raw-loader');
var CssLoader = require('css-loader');
var TextLoader = require('text-loader');
var VendorChunkPlugin = require('webpack-vendor-chunk-plugin');
var webpack = require('webpack');
var ngtools = require('@ngtools/webpack');
var exec = require('child_process').exec;

var webpack_devtool = "source-map";
var webpack_name = "development";
var webpack_build_title = "Webpack Development Build";
var webpack_app_dir = "app";
var webpack_build_dir = "build";
var webpack_public_path = ""

module.exports = [
    {
        name: webpack_name,
        devtool: webpack_devtool,
        context: path.join(__dirname, webpack_app_dir),
        entry: {
            "webpack-setups": './webpack-setups.js',
            "fa": "font-awesome-webpack2!./font-awesome.config.js",
            "content_script": './hp.my.content_script.com_console.ts',
            "content_script2": './hp.my.content_script2.ts',
            "popup": './popup.ts',
        },
        output: {
            path: path.join(__dirname, webpack_build_dir),
            filename: '[name].bundle.js',
            publicPath: webpack_public_path
        },
        resolve: {
            modules: [
                path.resolve(__dirname, "app"),
                "node_modules",
                "modded_node_modules"
            ],
            extensions: [".webpack.js", ".web.js", ".js", ".ts"]
        },
        plugins: [
            function () {
                this.plugin('watch-run', function (watching, callback) {
                    console.log('Watch triggered! Begin compile at ' + new Date());
                    callback();
                });
                this.plugin('done', function () {
                    console.log('Finished compile at ' + new Date());
                });
            },
            new WebpackNotifierPlugin({ title: webpack_build_title })
        ],
        module: {
            rules: [
                {
                    test: /\.ts$/,
                    use: ["ts-loader"]
                },
                { test: /\.css$/, use: ["style", "css"] },
                { test: /\.jpe?g$|\.gif$|\.png$/, use: "url" },
                { test: /\.html/, use: 'file?name=[path][name].[ext]' },
                { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
                { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }
            ]
        }
    }
];

webpack-setups.js 的内容

__webpack_public_path__ = chrome.extension.getURL("");

package.json sn-p:

"webpack": "^2.1.0-beta.25",
"webpack-manifest-plugin": "^1.0.1",
"webpack-notifier": "^1.4.1",
"webpack-shell-plugin": "^0.4.3",
"webpack-vendor-chunk-plugin": "^1.0.0",

Answer 1

虽然 Webpack 不允许我动态设置公共路径，但我通过使 chrome 扩展 ID 更可预测来解决这个问题，使用下面的 stackoverflow 答案（顺便说一下，还有其他不同的方法来解决这个问题）。

How to change chrome packaged app id Or Why do we need key field in the manifest.json?

ID 来自第一次创建的 .pem 文件 您（或 Chrome 网上应用店）将扩展程序打包在 .crx 文件中。 当您以“解压模式”加载扩展程序时，会自动生成一个 ID 以不可预知的方式产生。唯一能控制的方法 开发过程中的扩展 ID 是通过在 清单文件，正如文档所建议的那样。

[...更多关于获取源 url 中的密钥的信息]

还有下面的google support page。

将密钥复制到清单 当您在 Google OAuth 控制台，您将提供应用程序的 ID，这将 在令牌请求期间进行检查。因此，拥有一个 在开发过程中保持一致的应用程序 ID。

要保持您的应用程序 ID 不变，您需要将密钥复制到 将 manifest.json 安装到您的源清单。这不是最 优雅的任务，但事情是这样的：

转到您的用户数据目录。 MacO 上的示例： ~/Library/Application\ Support/Google/Chrome/Default/Extensions List 已安装的应用程序和扩展程序，并在应用程序上匹配您的应用程序 ID 和扩展管理页面到这里相同的ID。前往 安装的应用程序目录（这将是应用程序 ID 中的一个版本）。 打开已安装的 manifest.json（pico 是打开 文件）。复制已安装 manifest.json 中的“key”并粘贴到 您应用的源清单文件。