—— 与loader的爱恨情仇
目录一览
webpack3.0学习笔记（一）
webpack3.0学习笔记（二）
webpack3.0学习笔记（三）
前情概要
webpack学习笔记（一）中，对css相关的loader均有涉猎，所以本篇涉及到的loader仅包括：html-loader,url-loader,file-loader,image-webpack-loader等上篇遗漏几个的使用情况。
以 html-loader 为引
html-loader顾名思义的是引用时解析.html文件的加载器。
先把要用的几个 loader 一次安装：
yarn add -D extract-loader file-loader html-loader url-loader image-webpack-loader
或使用NPM进行安装：
npm i -D extract-loader file-loader html-loader url-loader image-webpack-loader
项目目录结构的：
webpack.config.js 配置如下：
module.exports = {
entry: {
html: path.resolve(__dirname,'src/index.html'),
},
output: {
filename: 'js/[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
module:{
rules: [
{
test: /\.html$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]'
}
},
'extract-loader',
{
loader: 'html-loader',
options: {
attrs: ["img:src", "link:href"]
}
}
],
},
{
test: /\.css$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name]-[hash:6].[ext]',
outputPath: 'css/'
}
},
"extract-loader",
{
loader: "css-loader",
}
]
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
use: [
{
loader: 'file-loader',
options: {
name: '[name]-[hash:6].[ext]',
outputPath: 'image/'
}
},
]
}
]
},
plugins: [
new CleanWebpackPlugin(['dist']),
]
};
index.html 内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>this is webpack loader test</title>
<link rel="stylesheet" href="./style/index.css" />
<link rel="stylesheet" href="./style/one.css" />
</head>
<body>
<img src = "image/shana-423df3.jpg" />
<div class="yintama"></div>
</body>
</html>
- 通过
entry中配置页面地址方式（这个方法很不好，后面会讲到这个问题）引入html文件，当然也可以配置一个入口js文件引用这个html页面也可以。 - 通过
html-loader的配置项attrs获取页面内所有img标签的src及link标签的href地址，将图片和css等静态资源就都被引入webpack打包流程。 -
css匹配规则里使用了extract-loader目的是将css文件进行分离，再通过file-loader将其输出至打包后的对应目录。 - 图片及字体等资源文件均可通过
extract-loader+file-loader在优化后进行分离生成本地文件的方式操作。 - 当然图片也可以使用
url-loader进行处理，该loader是在file-loader上进行了扩展，增加limit配置，使得小于所设阈值的文件可以Data URL的形式内联，以图片为例则是转化为Base64的格式，超出阈值的则继续生成文件，转化后html文件会相应变大，何时内联图片请多斟酌。在使用url-loader前还可使用image-webpack-loader对图片进行压缩处理。
test: /\.(jpe?g|png|gif|svg)$/i,
use: [
{
loader: 'url-loader',
options: {
name: '[name]-[hash:6].[ext]',
outputPath: 'image/',
limit: 8192
}
},
'image-webpack-loader'
]
- 到现在还没有完，css和图片优化输出完这些静态资源文件后会生成其新路径，此时已在
html-loader那更新了对应地址，然后利用extract-loaderfile-loader将 'index.html' 分离出来。
...
<!-- html -->
<link rel="stylesheet" href="css/one-6438c2.css" />
<img src = "image/shana-423df3.jpg" />
<div class="yintama"></div>
<!-- css -->
.yintama {width: 440px;height: 200px;background:url(image/yintama-20a729.gif)}
...
注意：
html中的图片地址从./image/shana.jpg被替换为image/shana-423df3.jpg，而css中地址由../image/yintama.gif替换为image/yintama-20a729.gif。html引用图片路径正常，而css文件引用图片时路径则报错了，正确地址应该为../image/yintama-20a729.gif。
- 通过查看项目github发现这个路径生成规则是
file-loader既定的逻辑。
尝试使用loader的useRelativePath配置，引用时的相对路径是保留了，但是生成图片的路径却出现问题，../image/yintama.gif图片层级是上一级，生成图片的路径path为dist目录，yintama.gif这张图片被放置到项目根目录。 - 相对路径这条路是走不通了，现在有两个办法：
- 一是将
html文件也放至html目录内，保持csshtml文件的目录层级相同，再设置publicPath为../../dist/保证引用目录的正确。（但是这样弊端很明显，一旦目录层级不统一依然会产生错误。很想把作者按在的地上摩擦，为何不能生成新路径时智能点）。 - 二是将图片生成地址全换成绝对路径，在生成环境下配置
publicPath为CDN路径，而开发环境下设置为http://localhost:8080/dist/，开发环境打包也可以配置为以上地址，开启一个本地服务器即可访问测试。
- 一是将
const url = require('url')
module.exports = {
...
module:{
rules: [
...
{
test: /\.(jpe?g|png|gif|svg)$/i,
use: [
{
loader: 'url-loader',
options: {
name: '[name]-[hash:6].[ext]',
outputPath: 'image/',
limit: 1,
publicPath: url.format({
hostname:'localhost',
protocol:'http:',
port:8080,
pathname:'/dist/'
})
}
}
]
}
]
},
devServer: {
publicPath: '/dist/',
historyApiFallback: true,
openPage: 'dist/',
inline: true,
port: 8080,
hot: true
}
}
...
热替换处配置进行了修改，去除了 contentBase: './dist', 的配置，会导致页面URL丢失 dist 这层路径，引用绝对地址的资源无法找到，故改为以上配置。
html-loader使用中发现js优化完不能自动引入html页面。（当然可以在页面中自己手动引入，但是文件生成hash时就杯具了。也可以使用html-loader的attrs属性获取script:src获取地址，但是这样entry配置中的chunk便显得毫无意义，这种做法仅仅是将将webpack当做一个压缩工具，而非模块化打包工具。）
总结
通过对
html-loader等loader的学习使用了解了如何处理其他静态资源文件的方法，也解决了笔记（一）中当一个页面如果引用多个css文件，该如何保留其原有css数量而不进行合并，通过extra-loader+file-loader进行分离操作。
然而过程中也遇到了困难，如何处理图片的路径问题，以及使用html-loader要怎么自动引入js文件的问题。
下章尝试更方便的形式构建页面并且自动引入静态资源和js。
尾巴
不得不吐槽
webpack的官网阅读起来真的很扎心，搜索一下跳转到英文页面，翻译里也大片英文，指引看起来也各种调戏，原先没有中文站的时候 巨巨 们都是怎么坚持下来的，顶礼膜拜！
