Webpack 更改脚本标签中的文件

Question

我是 ReactJS 和 Webpack 的新手，我正在使用 react-boilerplate，我正在尝试向具有自己的一组外部库的样板添加模板。

我面临的问题是每次我尝试包含链接到这些外部库的标签时，webpack 都会重新编译这些文件并更改内容。这是抛出错误。

<!doctype html>
<html lang="en">
<head>
  <!-- The first thing in any HTML file should be the charset -->
  <meta charset="utf-8">
  <!-- Make the page mobile compatible -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Allow installing the app to the homescreen -->
  <link rel="manifest" href="manifest.json">
  <meta name="mobile-web-app-capable" content="yes">
  <title>Avalon</title>
  <script type="text/javascript" src="resources/scripts/core/libraries/jquery.min.js"></script>
</head>
<body>
  <!-- The app hooks into this div -->
  <div id="app"></div>
</body>
</html>

在运行时，如果我检查 jquery.min.js 的来源，它的内容就会改变。

我不确定要在配置中更改什么，或者我做错了什么。

Answer 1

要在 webpack 输出中包含外部库，external 配置可能对您有所帮助。

您的自定义库可能看起来像，

var jQuery = require("jquery");

function YourLib() {}

// ...

module.exports = YourLib;

然后公开您的库的配置将是

{
    output: {
    // export itself to a global var
    libraryTarget: "var",
    // name of the global var: "YourLib"
    library: "YourLib"
},
    externals: {
        // require("jquery") is external and available
        //  on the global var jQuery
        "jquery": "jQuery"
    }
}

这将不会在 webpack 输出中包含 jquery 库，但自定义库 YourLib 将包含在包中，其中 requires jQuery 包含为script 标签。

Webpack 更改脚本标签中的文件

Webpack changing file in script tag

reactjs

webpack

react-boilerplate