带有 webpack 的条件变量名称

Question

我正在构建一个应用程序，每个人都可以使用源代码。根据最终系统将使用什么（有可能运行它与 electron 和在 C# WebBrowserControl 下）需要应用不同的全局变量名称。

例如

<--! This should not be applied to the end product if I don't specify that -->
<script>
    const electron = require('electron');
    const currentWindow = electron.remote.getCurrentWindow();
</script>
<!-- This is the end of the conditional statement -->

而且我还想在整个应用程序中将变量 currentWindow 的名称更改为 window。

我可以用 webpack plugin/loader 或其他什么方式以某种方式做到这一点吗？

我使用了一个 similair 插件来 grunt 不久前我在代码中有这些条件语句取决于我运行和 grunt.

Answer 1

有一个名为 DefinePlugin 的 Webpack 插件可以满足您的需要：https://webpack.js.org/plugins/define-plugin/

// webpack.config.js
const webpack = require('webpack');

module.exports = {

    ...

    plugins: [
        new webpack.DefinePlugin({
            HOST: 'electron' // or 'WebBrowserControl', etc.
        })
    ]

}

然后您可以从您的应用程序代码中将 HOST 作为全局变量访问：

if (HOST === 'electron') {
    const electron = require('electron');
    const currentWindow = electron.remote.getCurrentWindow();
} else if (HOST === 'WebBrowserControl') {
    // etc...
}

根据您开始 Webpack 构建的方式，您应该能够根据您正在执行的构建类型将 webpack.config.js 中的 HOST 的值换出。

带有 webpack 的条件变量名称

Conditional variabel name with webpack

webpack

webpack-2