webpack3最新版本配置研究（二）loader
接上面的loader
url-loader
现在来我们来试试加载图片，第一件事情肯定是安装对应的loader，可以将小图片转换成base64，减少请求
npm install url-loader file-loader –save-dev
//修改index.html加两个div，背景图片设置成两张图片，一个小的，一个大的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<div id="parent">
<div id="a"></div>
<div id="b"></div>
</div>
</body>
<script src="bundle.js"></script>
</html>
//index.css增加
#parent{
color: red;
}
#a{
background-image: url(img/1.png);
height:10px;
width:10px;
}
#b{
background-image: url(img/avatar.jpg) ;
background-size:100% 100%;
height:50px;
width:50px;
}
//增加webpack.config.js中的loader
module: {
rules: [
{
test: /.js|jsx$/, //是一个正则，代表js或者jsx后缀的文件要使用下面的loader
loader: "babel-loader"
},
{
test: /.css$/,
loader: "style-loader!css-loader"//添加对样式表的处理
},
{
test: /.(png|jpe?g|gif|svg)(?.*)?$/,
loader: "url-loader?limit=8192&name=build/img/[name].[hash:8].[ext]"
}
]
}新建一个img文件夹，在里面放置一个小于8k的图片1.png，一个大于8k的图片avatar.jpg，修改好之后输入npm run webpack，可以看到小于8k的图片被转换成了base64，而大的图则通过file-loader直接引入了图片，并加上了hash的值
sass-loader
先安装下相关的依赖 npm install –save-dev sass-loader node-sass //需要两个一起装，单装一个node-sass好像会报错
//新建一个scss文件夹新建一个index.scss文件,注意是scss，scss，scss
$length: 50px;
#a{
width: $length;
height: $length;
}
//index.js中增加scss的引用
require("./scss/index.scss");
webpack.config.js
module: {
rules: [
{
test: /.js|jsx$/, //是一个正则，代表js或者jsx后缀的文件要使用下面的loader
loader: "babel-loader"
},
{
test: /.scss$/,
loader: "style-loader!css-loader!sass-loader"
},
{
test: /.css$/,
loader: "style-loader!css-loader"//添加对样式表的处理
},
{
test: /.(png|jpe?g|gif|svg)(?.*)?$/,
loader: "url-loader?limit=8192&name=build/img/[name].[hash:8].[ext]"
}
],
}继续npm run webpack，可以发现scss文件被打包打进去了，宽高40px替换掉了之前的10px
less-loader
npm install less less-loader –save-dev
//新建一个less文件夹新建一个index.less文件
@borderlength: 2px;
#b{
border: @borderlength solid red;
}
//index.js中引入less文件
require("./less/index.less");
//webpack.cofig
module: {
rules: [
{
test: /.js|jsx$/, //是一个正则，代表js或者jsx后缀的文件要使用下面的loader
loader: "babel-loader"
},
{
test: /.scss$/,
loader: "style-loader!css-loader!sass-loader"
},
{
test: /.less$/,
loader: "style-loader!css-loader!less-loader"
},
{
test: /.css$/,
loader: "style-loader!css-loader"//添加对样式表的处理
},
{
test: /.(png|jpe?g|gif|svg)(?.*)?$/,
loader: "url-loader?limit=8192&name=build/img/[name].[hash:8].[ext]"
}
],
}json-loader
npm install json-loader –save-dev
// webpack.config.js中增加
module: {
rules: [
{test: /.json$/,loader: "json"},
]
}postcss
postcss感觉弄起来还是有点复杂的
npm install postcss-loader autoprefixer –save-dev
//新建一个postcss。config.js的配置文件
module.exports = {
plugins: [
require("autoprefixer")
]
}
//修改webpack.config.js中需要使用postcss的css文件中的loader，以scss为例
//头部因如下
const autoprefixer = require("autoprefixer");
//修改module
{
test: /.scss$/,
// loader: "style-loader!css-loader!sass-loader!postcss-loader"
use: [
{ loader: "style-loader"},
{ loader: "css-loader"},
{
loader: "postcss-loader",
options: {
plugins: () => [autoprefixer(
{ browsers: ["iOS >= 7", "Android >= 4.1",
"last 10 Chrome versions", "last 10 Firefox versions",
"Safari >= 6", "ie > 8"]
}
)],
},
},
"sass-loader"
]
}
//index.scss中随便加点需要兼容的css样式
$radius: 10px;
#b{
display:flex;
border-radius: $radius;
transform: scale(0.8);
}用webpack打包之后生成的头部自动打上了一些兼容的css，是不是很方便呢？
webpack.config.js汇总
const autoprefixer = require("autoprefixer");
module.exports = {
entry: __dirname + "/index.js",
output:{
path: __dirname,
filename: "bundle.js"
},
module: {
rules: [
{
test: /.js|jsx$/, //是一个正则，代表js或者jsx后缀的文件要使用下面的loader
loader: "babel-loader"
},
{
test: /.scss$/,
// loader: "style-loader!css-loader!sass-loader!postcss-loader"
use: [
{ loader: "style-loader"},
{ loader: "css-loader"},
{
loader: "postcss-loader",
options: {
plugins: () => [autoprefixer(
{ browsers: ["iOS >= 7", "Android >= 4.1", "last 10 Chrome versions", "last 10 Firefox versions", "Safari >= 6", "ie > 8"] }
)],
},
},
"sass-loader"
]
},
{
test: /.less$/,
loader: "style-loader!css-loader!less-loader"
},
{
test: /.css$/,
loader: "style-loader!css-loader"
},
{
test: /.(png|jpe?g|gif|svg)(?.*)?$/,
loader: "url-loader?limit=8192&name=build/img/[name].[hash:8].[ext]"
}
],
}
}获取更多webpack-loader
相关代码提交在https://github.com/kuaisufei/webpack-learn中的webpack-loader中
声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
- 上一篇： js中数组去重的几种方法
- 下一篇： js中定义用字符串拼接起来的变量名的变量
