一. 什么是loader
- webpack在打包的时候本身只能处理以.js结尾的文件,为了使其能打包处理其他各种类型的文件就增加了loader模块;
- 我们在打包对应的类型模块的时候,只需要下载对应的loader,然后在webpack.config.js中的module配置相中设置配置规则就可以了(具体可以查看官网的loader来确定打包各类模块所以依赖的loader)。
- 多个loader时的执行顺序是从下向上或者从右向左
二. 静态资源打包(具体可以查看官网的中文文档下的指南下的管理资源)
1. 图片篇
图片打包可以用url-loader或者file-loader
url-loader:
可以把图片以base64的格式打包到js文件中去,我们可以为设置limit配置项,如limit:204800 意思是当图片的大小超过200kb的时候将图片打包成单独的文件,小于的时候直接以base64的形式打包到js文件中。
// loader配置项
module: {
rules: [{
test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
use: {
loader: 'url-loader',
// options具体配置项查看官方文档
options: {
//打包到dist目录下的images文件夹下,并且名字不变
name: '[name].[ext]',
outputPath: 'images/',
limit: 10240
}
}
}]
},
file-loader:
将图片单独打包
// loader配置项
module: {
rules: [{
test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
use: {
loader: 'file-loader',
// options具体配置项查看官方文档
options: {
//打包到dist目录下的images文件夹下,并且名字不变
name: '[name].[ext]',
outputPath: 'images/'
}
}
}]
},
2. 样式篇
(1) 依赖的loader:css-loader和style-loader,配置好后运行npm run bundle进行打包
css-loader可以帮助我们分析出各个css文件之间的关系
style-loader将css-loader生成的一个css样式挂载到页面的header部分
webpack.config.js
// loader配置项
module: {
rules: [{
test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
use: {
loader: 'url-loader',
// options具体配置项查看官方文档
options: {
//打包到dist目录下的images文件夹下,并且名字不变
name: '[name].[ext]',
outputPath: 'images/',
limit: 10240
}
}
},{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}]
},
index.js
import './css/index.css';
var img = new Image();
img.src = img1;
img.classList.add('avatar')
var root = document.getElementById('root')
root.append(img)
index.css
@import url("avatar.css");
avatar.css
.avatar{
width: 100px;
height: auto;
}
(2) sass文件的打包除了依赖css-loader和style-loader,还需要sass-loader,同时还需要安装node-sass
命令行运行
npm install sass-loader node-sass --save-dev
对webpack.config.js进行配置
{
test: /\.scss$/,
use: [ 'style-loader', 'css-loader','sass-loader' ]
}
(3) 样式中自动添加厂商前缀所依赖的loader=》postcss-loader
- 安装完postcss-loader后,需要在项目的根目录下创建postcss.config.js文件并进行配置
- 在postcss.config.js文件中我们只需要保留plugins配置项就可以了
- 然后我们还需要下载autoprefixer插件在postcss.config.js的plugins配置项中引用
postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')
]
}
webpack.config.js
{
test: /\.scss$/,
use: [ 'style-loader', 'css-loader','sass-loader','postcss-loader' ]
}
(4)css-loader常用的配置项
- importLoaders
webpack.config.js
{
test: /\.scss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
/* 意思是当你用import引用样式文件时,不管在哪引用的都要走下面的两个loader,
这样才能保证不管你是在js中引入的还是在其他样式文件引入的样式文件都能从上
至下或者从右向左走一遍所有的loader */
importLoaders: 2
}
},
'sass-loader',
'postcss-loader' ,
]
}
- modules css打包的模块化
在index.js中引入的样式文件会成为全局的样式文件,会对所有的文件的样式产生影响,为了解决这个问题引入了css模块化的概念,使得样式只在指定的模块下生效
{
test: /\.scss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
/* 意思是当你用import引用样式文件时,不管在哪引用的都要走下面的两个loader,
这样才能保证不管你是在js中引入的还是在其他样式文件引入的样式文件都能从上
至下或者从右向左走一遍所有的loader */
importLoaders: 2,
//意思是开启css的模块打包
modules: true
}
},
'sass-loader',
'postcss-loader' ,
]
}
然后index.js中引入样式文件的方式也要改变,如果其他文件也要用该样式,那就在该文件引入就好了
index.js
import img1 from './images/1.jpg'
import createAvater from './avater.js'
//原先的引入方式
// import './css/index.scss';
//采用css模块打包后的引入方式
import css from './css/index.scss';
console.log(css)
createAvater()
var img = new Image();
img.src = img1;
//原先
// img.classList.add('avatar')
//模块打包
img.classList.add(css.avatar)
var root = document.getElementById('root')
root.append(img)
(5) 用webpack打包字体文件
- 在src目录下创建font文件夹,并把iconfont各种格式的文件放入其中
- 把iconfont.css文件放到css文件夹中,并修改@font-face引入文字文件的路径
- index.js中引入iconfont.css文件
- 配置webpack.config.js文件
{
test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
use: {
loader: 'url-loader',
// options具体配置项查看官方文档
options: {
//打包到dist目录下的images文件夹下,并且名字不变
name: '[name].[ext]',
outputPath: 'images/',
limit: 10240
}
}
}