在腳本標記中更改文件的Webpack

我是ReactJS和Webpack的新手，我正在使用react-boilerplate，並且試圖將模板添加到具有自己外部庫的樣板文件中。在腳本標記中更改文件的Webpack

我面對的問題是每當我試圖包含鏈接到這些外部庫的標記時，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源它的內容被改變。

我不知道要在配置中改變什麼，或者我做錯了什麼。

來源

2017-01-12 Akshay Singh

爲什麼不在您的主js文件中導入'jquery'並將其附加到'window'對象，如果您在全局需要它？它會比檢查你的源 –

爲jquery我曾想到的，但有一個完整的外部捆綁文件夾，我需要導入，而不需要編譯它的webpack –

要像使用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" 
    } 
}

這將不包括jquery庫中的WebPack輸出，但自定義庫YourLib會被包含在require s jQuery中，其中包含script標記。

來源

2017-01-12 06:23:48 Thaadikkaaran

會試試這個，如果庫要包含的是不是作爲npm模塊發佈的自定義庫？例如：我們可以給文件路徑而不是在外部使用require嗎？ –

在腳本標記中更改文件的Webpack

回答

相關問題