配置webpack.config.js
module.exports = {
...,
module:{
rules:[
test:/.html$/,
use:{
loader:"html-loader",
options:{
list:[
"...",
tag:"a",
attribute: 'href',
type: 'src'
再次执行打包yarn webpack，查看效果。
引用的图片资源都成功转换了。
webpack使用html-loader加载js中引入的html资源一、如何使用html-loader二、html-loader配置一、如何使用html-loader安装yarn add html-loader --dev配置webpack.config.jsmodule.exports = { ..., // 其他配置 module:{ rules:[ { test:/.html$/,
Vue单独的文件Webpack加载器
快速创建.vue单个文件组件，使您可以拥有清晰分离的组件文件，并仍然享受优势。
按文件名处理文件（而不是将所有文件加载到文件夹中）并动态创建.vue文件（而不是创建物理文件）
允许通过options.global ， options[FILE_TYPE]和options[TAG_NAME]添加自定义属性
允许按组件具有scoped样式
允许定义对其他文件扩展名/类型的支持
允许定义装载机的测试条件（例如.vue.等）
基于这些想法， 和 。
请参阅存储库。
npm i -D vue-separate-files-webpack-loader
yarn add -D vue-separate-files-webpack-loader
VueLoader v15及更高版本由于在版本15中引入了强制性插件用法，
首先，您需要安装raw-loader ：
$ npm install raw-loader --save-dev
然后将加载程序添加到您的webpack配置中。 例如：
file.js
import txt from './file.txt' ;
webpack.config.js
// webpack.config.js
module . exports = {
module : {
rules : [
test : / \. txt $ / i ,
use : 'raw-loader' ,
并通过您的首选方法运行webpack 。
首先，您需要安装html-loader ：
npm install --save-dev html-loader
然后将插件添加到您的webpack配置中。 例如：
file.js
import html from './file.html' ;
webpack.config.js
module . exports = {
module : {
rules : [
test : / \. html $ /i ,
loader : 'html-loader' ,
{Boolean|Object}
启用/禁用属性处理
{Function}
undefined
允许在处理之前对内容进行预处理
{Boolean|Object}
在生产模式下为true ，否则为false
告诉html-loader最小化HTML
{Boolea
一，什么是loader
webpack不仅仅使用内置的资源模块可以引入任何资源，上一篇文章的四种仅仅是资源的类型输出的定义。除此之外，webpack只能解析js和json这样的代码。还不能理解css之类的代码，这时候，就需要loader提供一个解析的功能，先将这些文件转化成为有效的、webpack能够理解的模块。然后才能进行打包。
二，解析css的loader
1,未配置，直接引用时会报错：
2，安装css-loader
npm install css-loader -D
然后在资源模块中配置，遇到cs
npm install shopify-file-loader --save-dev
加载程序采用与原始file-loader相同的配置，这意味着支持原始加载程序的所有选项，例如。
但是，在测试文件名时允许查询字符串很重要（请注意下面的(\?.*)? ？）。
module: {
loaders : [
... ,
{ // Theme Assets
test : / \/ assets \/ ( . + ? ) \. ( jpe?g | gif | png | woff | woff2 | eot | ttf | svg ) ( \? . * ) ? $ / ,
loader : 'shopify-file?n
yarn add --dev pretty-loader
npm install --save-dev pretty-loader
// inside webpack.config.js
module . exports = {
// ...
module : {
rules : [
test : / \. pss $ / ,
use : {
loader : 'pretty-loader' ,
近期公司有个多页面的网站需要开发，选择用webpack构建项目。
在编写webpack config 的过程中，发现html-webpack-plugin和html-loader有冲突。
如果使用html-loader来处理html模版文件中的url，会导致html-webpack-plugin的ejs模版语法失效。
经过研究发现html-loader会把原始的html模版，编译成一个js模块样式的字符串，导致html-webpack-plugin解析的时候，发现文件已经被编译了，会直接会跳过模版语法的检测
test: /\.less$/,
// 要使用多个 loader 处理用 use
use: ['style-loader', 'css-loader', 'less-loader']
// 问题：默认处理不了 html 中 img 图片
