一、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-jsx
vue中使用jsxxml-loader
解析xml文件csv-loader
解析csv || tsv文件
更多loader参考