如何要求html文件Webpack 2

时间:2017-05-03 20:53:53

标签: javascript webpack webpack-2

目前正在使用:

  • " webpack":" ^ 2.4.1"
  • " angular":" ^ 1.6.3"

当前用法,它给出了我需要一个合适的加载器的错误:

var root = {
  template: require('./root.html')
};
{
  test: /\*.html$/,
  use: 'raw-loader!html-minifier-loader',
  exclude: /node_modules/
}

但是,如果我执行以下任何一项操作,则可以正常加载:

var root = {
  templateUrl: './root.html'
};
var root = {
  template: require('raw-loader!./root.html')
};

如果我想要HTML文件,是否必须在线专门使用加载程序?我认为这是webpack配置中的加载器的用途,除非我没有意识到Webpack 2的这种变化。

1 个答案:

答案 0 :(得分:1)

您的test condition不正确。它只会匹配文件名字面包含<div class="accordion w3-center"> <ul> <li> <div><span><h2>HEADER With Longer Text</h2></span> <a href="#"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut eros tortor. Proin tellus enim, cursus sed blandit sit amet, accumsan ac sapien. Nunc ornare dapibus vestibulum. Nunc vulputate luctus magna quis lobortis. Praesent nec commodo libero. Nunc auctor, metus non tincidunt faucibus, tortor eros lacinia neque, ac bibendum urna felis quis nisl. Duis imperdiet odio non fermentum pharetra. Aliquam erat volutpat. Pellentesque ac faucibus diam. Phasellus porttitor tortor lacus, a scelerisque purus accumsan sit amet.<br> <button class="w3-button w3-green" style="width: 25%; margin-top: 15px;">BUTTON NAME</button></p> </a> </div> </li> <li> <div><span><h2>HEADER with longer text</h2></span> <a href="#"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut eros tortor. Proin tellus enim, cursus sed blandit sit amet, accumsan ac sapien. Nunc ornare dapibus vestibulum. Nunc vulputate luctus magna quis lobortis. Praesent nec commodo libero. Nunc auctor, metus non tincidunt faucibus, tortor eros lacinia neque, ac bibendum urna felis quis nisl. Duis imperdiet odio non fermentum pharetra. Aliquam erat volutpat. Pellentesque ac faucibus diam. Phasellus porttitor tortor lacus, a scelerisque purus accumsan sit amet.<br> <button class="w3-button w3-green" style="width: 25%; margin-top: 15px;">BUTTON NAME</button></p> </a> </div> </li> <li> <div><span><h2>HEADER</h2></span> <a href="#"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut eros tortor. Proin tellus enim, cursus sed blandit sit amet, accumsan ac sapien. Nunc ornare dapibus vestibulum. Nunc vulputate luctus magna quis lobortis. Praesent nec commodo libero. Nunc auctor, metus non tincidunt faucibus, tortor eros lacinia neque, ac bibendum urna felis quis nisl. Duis imperdiet odio non fermentum pharetra. Aliquam erat volutpat. Pellentesque ac faucibus diam. Phasellus porttitor tortor lacus, a scelerisque purus accumsan sit amet.<br> <button class="w3-button w3-green" style="width: 25%; margin-top: 15px;">BUTTON NAME</button></p> </a> </div> </li> <li> <div><span><h2>HEADER</h2></span> <a href="#"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut eros tortor. Proin tellus enim, cursus sed blandit sit amet, accumsan ac sapien. Nunc ornare dapibus vestibulum. Nunc vulputate luctus magna quis lobortis. Praesent nec commodo libero. Nunc auctor, metus non tincidunt faucibus, tortor eros lacinia neque, ac bibendum urna felis quis nisl. Duis imperdiet odio non fermentum pharetra. Aliquam erat volutpat. Pellentesque ac faucibus diam. Phasellus porttitor tortor lacus, a scelerisque purus accumsan sit amet.<br> <button class="w3-button w3-green" style="width: 25%; margin-top: 15px;">BUTTON NAME</button></p> </a> </div> </li> </ul> </div>,例如:

*

你想要

root*.html
root*ahtml
root*bhtml

代替。它是一个正则表达式,而不是一个glob模式。