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将包含在require s jQuery的包中，其中包含script 1}}标签。

Webpack更改脚本标记

1 个答案: