2017-12-27 418 views
1

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

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

所以,我有以下問題:

  1. 什麼時候HTML加載器來打?在生成包之後還是之前?
  2. 爲什麼webpack會調用html-loader?由於插件中的模板設置?
  3. 插件是否使用加載程序的輸出?但是輸出只是一個字符串,它怎麼會有所作爲?

    //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> 
    

回答

0

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

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

  1. 的HTML裝載機進場時的WebPack檢測到您的JavaScript如下:require('./app.component.html'),因爲你有下面的測試:/\.html$/。默認的操作是將該文件中的html放在require的地方。

  2. html-loader獨立於HtmlWebpackPlugin。

  3. 據我所知,沒有。

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

+0

你能解釋一下「require('./ app.component.html')」的東西嗎? –

+0

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

+0

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

相關問題