html-webpack-plugin如何與html-loader一起使用？

我想到了一個加載器調用，只有當某些資源進口版或需要某處Id和資源匹配這樣的裝載機。html-webpack-plugin如何與html-loader一起使用？

但在下面的代碼中，任何地方都不會導入html文件，但由於html中的下劃線模板內容，html-loader仍然需要進行編譯傳遞。

所以，我有以下問題：

什麼時候HTML加載器來打？在生成包之後還是之前？
爲什麼webpack會調用html-loader？由於插件中的模板設置？

插件是否使用加載程序的輸出？但是輸出只是一個字符串，它怎麼會有所作爲？

//webpack.config.js 
const webpack = require('webpack'); 
const path = require('path'); 
const htmlPlugin = require('html-webpack-plugin'); 
module.exports = { 
    entry: { 
     a: './a.js' 
    }, 
    output: { 
    filename: '[name].[chunkhash].js', 
    chunkFilename: '[name].[chunkhash].js', 
    path: path.resolve(__dirname, 'dist') 
}, 
module: { 
    rules: [ 
    { 
     test: /\.html$/, 
     loader: "html-loader" 
    } 
    ] 
}, 
plugins: [ 
     new htmlPlugin({ 
     template:path.resolve(__dirname,'index.html') 

    }) 
] 
}; 

//index.html 
    <!DOCTYPE html> 
    <html> 
    <head> 
     <title></title> 
    </head> 
    <body> 
     <script id="item-template" type="text/template">  
     <label><%= title %></label> 
     </script> 

    </body> 
    </html>

來源

2017-12-27 Shawn Chen

我會盡量回答你我最好的問題：

有從HtmlWebpackPlugin到HTML裝載機沒有依賴性。

的HTML裝載機進場時的WebPack檢測到您的JavaScript如下：require('./app.component.html')，因爲你有下面的測試：/\.html$/。默認的操作是將該文件中的html放在require的地方。
html-loader獨立於HtmlWebpackPlugin。
據我所知，沒有。

我希望你能理解webpack更好一點這個答案。

來源

2018-01-12 10:12:41 Cees

你能解釋一下「require（'./ app.component.html'）」的東西嗎？ –

我會嘗試用我自己的話來解釋這一點。 Webpack是'索引'你的JavaScript，當它發現一個需求它讓節點選擇文件的webpack並呈現爲一個字符串到webpack，因此webpack可以將它集成到它的管道中。另外，當webpack發現一個require時，它也會嘗試找到一個可以與之關聯的加載器來完成一些後處理（比如加載器的正則表達式）。這對你有意義嗎？ – Cees

您的評論對我有意義。但是我的javascript文件不包含require（「xxx.html」），正如我在問題中提到的那樣。問題是爲什麼我的項目仍然需要一個html-loader來編譯。 –

html-webpack-plugin如何與html-loader一起使用？

回答

相關問題