webpack -- 完整入门学习笔记（四）
一、loader
经过前面的一系列操作，已经初步完成了一个webpack项目，但是这个只有html文件和js文件，啥都没有，看起来不正常，我们需要给这个页面添加css样式，图片，字体图标等
如何添加呢？通过loader
css
添加css，需要style-loader和css-loader两个
安装
npm install style-loader css-loader --save-dev
记住所有loader安装完成后，需要在webpack.config.js文件里面的module.rules数组里面声明，才能用效果，loader的解析是从右往左的
记住所有loader声明都有两个参数，test和use
test是正则校验表达式，表示这个loader用来解析哪种文件类型
use如果简单的话，也可以直接使用loader代替use，use是个数组，里面是解析这种类型文件所需要用到的loader，每个loader都是有个options对象参数，用来设置一些属性
Tips在使用loader的时候，我们还可以用!来代替数组模式
loader使用
// String模式
loader: 'style-loader'
// Array模式
loader: ['style-loader', 'css-loader']
// !模式
loader: 'style-loader!css-loader'
引用
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
sourceMap: true,
}
}
]
}
]
}
上面这段代码的意思理解为解析.css后缀的文件，将内容解析成css，然后通过style内联的方式在生产的index.html文件里面使用，不过是需要将css单独解析出来
现在在src文件夹下创建一个styles文件夹，里面新建一个index.css文件，设置body的字体颜色为红色
然后我们在入口文件里面引入这个css，然后打包看看效果，直接在index.js文件里面通过import引入这个css文件
可以看到css已经其效果了，body里面的文字变成了红色
做到这里，css样式部分完成了三分之一，但是样式一般要兼容浏览器，这个一般都不会自己去添加前缀，只能通过插件去自动添加各浏览器的前缀，实现代码兼容，这个工具就是postcss-loader和autoprefixer
安装
npm install postcss-loader autoprefixer --save-dev
调用
这个调用其实就是在上面css的loaer基础上在加一个postcss-loader
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1,
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
}
}
],
exclude: /node_modules/, // 限制node_module
include: path.resolve(__dirname, 'src'), // 允许src里面的
}
]
}
按照上面这个样子写好后，并没有结束，这样是不会加前缀的，而且打包还会报错，说没有postcss config，所以我们还需要在根目录下面创建一个postcss.config.js文件
postcss.config.js
//const autoprefixer = require('autoprefixer')，不需要
module.exports = {
plugins: {
'autoprefixer': {
browsers: 'last 2 version'
}
}
}
上面的browsers是兼容浏览器版本，如果没有好像只会添加-webkit-css
没有browsers
看起来并没有给做前缀兼容处理
有browsers
可以看见，添加了browsers之后，就给添加了前缀兼容
这个browsers可以不在这里添加，可以写在package.json文件里面
"browserslist": [
"defaults",
"> 1%",
"not ie <=8",
"last 2 versions"
]
其他格式写法
这个可以不用创建这个config文件，直接在声明的地方引入
原文引入
{
loader: 'postcss-loader',
options: {
sourceMap: true,
plugins: [
require('autoprefixer')({browsers: 'last 2 version'})
]
}
}
一般到这里，css样式处理基本完成了，但是日常开发大多数人都是用预处理器来编写css的，这个对于webpack而言，又是一种新的文件类型，所以我们安装loader来解析这种语言，因为我使用的是sass，所以这里只介绍sass的使用，至于less和stylus可以看另一篇文章，有较为详细的解说
安装sass
npm install node-sass sass-loader --save-dev
调用
调用依旧是在原来的基础上再加上一个sass-loader，并且修改一下test
{
test: /\.(sc|c)ss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1,
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
plugins: [
require('autoprefixer')({browsers: 'last 2 version'})
]
}
},
'sass-loader'
],
exclude: /node_modules/,
include: path.resolve(__dirname, 'src')
}
好了，css大概就到这里
二、image
我要给body添加一个背景图，但是直接添加背景图，发现报错，需要个loader来解析图片，这是可以用file-loader和url-loader
安装
npm install file-loader url-loader --save-dev
调用
{
test: /\.(jpg|jpeg|gif|png|svg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 1024,
name: '[name].[ext]',
outputPath: "./images",//打包后图片文件输出路径
publicPath:'./images'
}
}
]
}
limit是文件大小限制，好像小于1024就是转换成base64，大于1024就直接用图片，这个可以自己随意设置
name可以是个文件名字，也可以是文件路径字符串
outputPath打包图片文件输出路径，相对于dist而言
publicPath公共图片路径
但是经过上面的操作后，我们发现，背景图并没有出来，也就是css样式里面的路径有问题
处理HTML图片
npm install html-withimg-loader --save-dev
调用
{
test: /.(htm|html)$/i,
use:[ 'html-withimg-loader']
}
三、字体图标
字体图标跟图片用的是同一个loader，所以只需要设置test即可
调用
{
test: /\.(woff|woff2|eot|svg|ttf|otf)/,
use: [
{
loader: 'url-loader',
options: {
name: 'font/[name].[ext]'
}
}
]
}
四、javascript
这个解析js需要调用babel-loader
安装
npm install babel-loader @babel/core --save-dev
babel-loader : 处理ES6或者React的loader
@babel/core : babel运行的核心内容
babel-preset-env: 根据代码自动选择版本（ES的版本有很多，env表示会自动选择版本）
babel-polyfill : 用于处理新增的API
调用
{
test: /\.(js|jsx)$/,
use: [
{
loader: 'babel-loader',
}
],
exclude: /node_modules/,
include: path.resolve(__dirname, 'src'),
}
五、其他loader
babel-plugin-transform-vue-jsxvue中使用jsx
xml-loader解析xml文件
csv-loader解析csv || tsv文件
更多loader参考
