您的位置：首页 > Web前端 > Webpack

webpack3最新版本配置研究（二）loader

2018-01-30 11:00 656 查看

接上面的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]"
}
]
}
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051新建一个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]"
}
],
}
12345678910111213141516171819202122232425262728293031继续npm run webpack，可以发现scss文件被打包打进去了，宽高40px替换掉了之前的10pxless-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]"
}
],
}
12345678910111213141516171819202122232425262728293031323334json-loader npm install json-loader –save-dev
// webpack.config.js中增加
module: {
rules: [
{test: /\.json$/,loader: 'json'},
]
}
123456postcss 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);
}
12345678910111213141516171819202122232425262728293031323334353637383940用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]"
}
],
}
}
我有一个还不错的订阅号，里面有很多it学习资料以及最新资讯，可以微信搜索“itheimaCS”关注，等待你的到来，不要迷路了。
123456789101112131415161718192021222324252627282930313233343536373839404142434445
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航