时间戳

首页 > 解决方案 > 如何在非模块脚本中注入 Webpack DefinePlugin 变量

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

问题描述

我有以下问题：

我正在使用DefinePlugin跨 .js 模块定义一些变量。这在 .js 模块中运行良好

但是，我的多页应用程序会在TAG 中加载本地脚本 ( custom.js ) 。<HEADER>该脚本是标准 javascript（不是模块），使用 DefinePlugin 中定义的变量之一。这是一个.js，必须在应用程序的每个页面中加载。

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

我认为原因是因为它不被视为依赖项。

Webpack 配置.js：

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

全局脚本是这样加载的：

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

自定义.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 之类的脚本（未导入，但通过 ?

标签： javascriptwebpackes6-moduleswebpack-4

解决方案

Webpack 仅对从入口文件开始的依赖关系树的一部分“工作”。

如果你的custom.js文件不在这棵树里面，webpack不会去碰它。

您可以通过 require 它来添加它，或者将其作为附加条目添加到您的应用程序中。

//webpack.config.js

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

推荐阅读