如何在非模块脚本中注入 Webpack DefinePlugin 变量

Question

我有以下问题：

我正在使用 DefinePlugin 跨 .js 模块定义一些变量。这在 .js 模块中工作正常

但是，我的多页应用程序加载 <HEADER> TAG 中的本地脚本（custom.js） .此脚本是标准的 javascript（不是模块），使用定义插件中定义的变量之一。是App的每个页面都必须加载的.js。

出于某种原因，这个变量 WEB_CONTEXT 没有被 Webpack 在 BUILD 过程中插入。

我认为原因是因为它没有被识别为依赖项。

Webpack config.js:

  new webpack.DefinePlugin({
        'WEB_CONTEXT': 'myapp/main'   
    );

全局脚本是这样加载的：

<script src="./src/js/custom.js"></script>

custom.js

 $(function () {

     // Compiled file incorrectly shows:
        const myPath = `${WEB_CONTEXT}/resources/images`;

     // Instead of:
        const myPath = `myapp/main/resources/images`;

    });
});

问题是： 无论如何，Webpack 是否可以使 WEB_CONTEXT 变量也可用于 custom.js 等脚本（未导入，但通过加载？

Answer 1

Webpack "works" 仅适用于从入口文件开始的依赖树中的文件。

如果您的 custom.js 文件不在这棵树中，webpack 不会触摸它。

您可以通过要求添加它，或将其作为附加入口添加到您的应用中。

//webpack.config.js

module.exports = {
  entry: {
    main: './path/to/my/entry/file.js',
    custom: './path/to/custom.js'
  }
};

Answer 2

webpack.config.js

entry : {
    main: './path/to/my/entry/file.js',
    custom: './path/to/custom.js'
}

在插件部分：

new HtmlWebpackPlugin({
                template: `./${ruta}`,
                inject: true,
                chunks: ['main', 'custom'], // <-Added custom chunk here.
                filename: `${fileName}.html`,
                templateParameters: {
                    WEB_CONTEXT: basePath
                  }
              });

如何在非模块脚本中注入 Webpack DefinePlugin 变量

How to inject Webpack DefinePlugin variables in non Module Scripts

javascript

webpack

es6-modules

webpack-4