2017-12-27 3370 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来编译。 –

相关问题