Webpack 2.x, does __webpack_public_path__ still work?

Question

I have a chrome extension with unstable, stable and nightly versions being released, and I need to be able to dynamically set the public path to the extension resources. I've been trying to add it in many ways, by a js entry directly into the webpack.config.js, importing from my ts entries, putting directly in the ts files..

I just want __webpack_public_path__ to be changed globally to something which I can't count on to always be the same between builds.

I have tried like this:

__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("");

Does anyone know if this has changed since Webpack 2.x?

Update!

This is my 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" }
            ]
        }
    }
];

Contents of webpack-setups.js

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

package.json snippet:

"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",

Please post your configuration and version of webpack@2.1.0-beta — Sean Larkin, Oct 19 '16 at 14:30

score 1 · Accepted Answer · edited May 23 '17 at 12:24

While Webpack is not letting me dynamically set public path, I resolved this by making the chrome extension ID more predictable, using the below stackoverflow answer (which by the way features other varied ways to go about this).

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]

And the following 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, does __webpack_public_path__ still work?

Update!

1 Answers1