Webpack 2.x，__webpack_public_path__ 还能用吗？

Question

我有一个 chrome 扩展，其中发布了不稳定、稳定和夜间版本，我需要能够动态设置扩展资源的 public 路径。我一直在尝试以多种方式添加它，通过 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 片段：

"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 不允许我动态设置 public 路径，但我通过使用下面的 Whosebug 答案（顺便说一下具有其他不同的方式）使 chrome 扩展 ID 更可预测来解决这个问题去解决这个问题）。

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

The ID is derived from the .pem file that was created the first time you (or the Chrome Web Store) packed the extension in a .crx file. When you load an extension in "unpacked mode", an ID is automatically generated in an unpredictable way. The only way to control the extension ID during development is by setting the "key" field in the manifest file, as the documentation suggests.

[... more info on getting the key in source url]

还有下面的google support page.

Copy key to your manifest When you register your application in the Google OAuth console, you'll provide your application's ID, which will be checked during token requests. Therefore it's important to have a consistent application ID during development.

To keep your application ID constant, you need to copy the key in the installed manifest.json to your source manifest. It's not the most graceful task, but here's how it goes:

Go to your user data directory. Example on MacOs: ~/Library/Application\ Support/Google/Chrome/Default/Extensions List the installed apps and extensions and match your app ID on the apps and extensions management page to the same ID here. Go to the installed app directory (this will be a version within the app ID). Open the installed manifest.json (pico is a quick way to open the file). Copy the "key" in the installed manifest.json and paste it into your app's source manifest file.

Webpack 2.x，__webpack_public_path__ 还能用吗？

Webpack 2.x, does __webpack_public_path__ still work?

google-chrome-extension

typescript

webpack

webpack-2

typescript2.0

更新！