浅谈webpack对样式的处理
本文介绍了webpack对样式的处理，分享给大家，具体如下：
我们可以在js中引入样式文件
require('myStyle.css')
这时我们便需要引入相应的webpackloader来帮助我们解析这段代码。
css-loader搭配style-loader
首先，我们可以引入css-loader和style-loader来处理css的解析，其中，css-loader是用来解析css文件，style-loader是用来将css文件嵌入到js文件里
varpath=require('path')
module.exports={
context:path.join(__dirname,'src')
entry:'./',
module:{
rules:[
{
test:/\.css$/,
include:[
path.join(__dirname,'src')
],
use:['style-loader','css-loader']
}
]
},
output:{
path:path.join(__dirname,'dist'),
filename:'[name].bundle.[hash].js'
}
}
在上面的代码里，解析顺序是从右到左解析，先使用css-loader解析出css文件之后，再使用style-loader嵌入到js代码里。
如果你使用less来写样式的话，则需要先用less-loader来编译样式文件为css文件，再继续使用css-loader与style-loader。另外，loader加载器可以省略后面的-loader。所以上面的代码可以缩写成
module:{
rules:[
{
test:/\.css$/,
include:[
path.join(__dirname,'src')
],
use:['style','css','less']
}
]
}
一般在测试环境里为了快点编译css，会用这种方式多一点，但是这样子编译出来的js文件会比较大，不大适合在生产环境里使用。
编译成单独的文件
上面的做法会把css和js打包在一起，减少实际请求的次数，但是由于编译出来的js文件比较大，浪费带宽。因此，我们使用extract-text-webpack-plugin插件，把css文件编译成独立的文件。我们就可以利用CDN把这个文件推送到节点服务器，或者根据视情况按需加载，进而优化客户请求链路，加速页面响应。
varpath=require('path'),
ExtractTextPlugin=require('extract-text-webpack-plugin')
module.exports={
context:path.join(__dirname,'src'),
entry:'./',
module:{
rules:[{
test:/\.css$/,
include:[
path.join(__dirname,'src')
],
use:ExtractTextPlugin.extract({
fallback:'style',
use:'css'
})
}]
},
output:{
path:path.join(__dirname,'dist'),
filename:'[name].bundle.[hash].js'
},
plugins:[
newExtractTextPlugin('[name].css')
]
}
通过上面的代码，我们使用extract-text-webpack-plugin插件处理src目录下所有的css文件，先使用css-loader插件解析出css代码，如果解析失败，使用style-loader插件解析，最终在dist目录下生成对应的js文件
兼容旧浏览器
以前我们写样式时，有些样式不同浏览器需要加不同的前缀，如-webkit-。现在有了构建工具，我们便不需要再去关注这些前缀了，构建工具会自动帮我们加上这些前缀。
对于webpack我们自然想到需要使用loader或者plugin来帮助我们做这些事情，查了下发现autoprefixer-loader已经废弃不再维护了，推荐使用posscss
postcss是用于在js中转换css样式的js插件，需要搭配其他插件一起使用，这点和babel6一样，本身只是个转换器，并不提供代码解析功能。
这里我们需要autoprefixer插件来为我们的样式添加前缀。首先下载该模块。
npminstall-Dautoprefixer
接着便可以配置webpack了
varautoprefixer=require('autoprefixer')
module.exports={
...
module:{
loaders:[
...
{
{
test:/\.css$/,
loader:ExtractTextPlugin.extract(["css","postcss"])
},
}
]
},
postcss:[autoprefixer()],
...
}
查看一下抽取出来的样式文件便可以发现已经加上了前缀
a{
display:flex;
}
/*compilesto:*/
a{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex
}
另外autoprefixer还可以根据目标浏览器版本生成不同的前缀个数，例如你的应用的使用用户如果大多数是使用比较新版本的浏览器，那么便可以做如下配置。
postcss:[autoprefixer({browsers:['last2versions']})]这是生成的样式便会有些不一样，还是上面的例子
a{
display:flex;
}
/*compilesto:*/
a{
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
}
样式压缩
压缩代码我们可以使用webpack的内置插件UglifyJsPlugin来做，它既可以压缩js代码也可以压缩css代码。
plugins:[
...
newwebpack.optimize.UglifyJsPlugin({
compress:{
warnings:false
}
}),
...
]
其实并不能说是在压缩css代码，本质来说还是压缩js代码，再将这块代码输出到css文件中。
使用CommonsChunkPlugin抽取公共代码
首先要明确一点CommonsChunkPlugin是在有多个entry时使用的，即在有多个入口文件时，这些入口文件可能会有一些共同的代码，我们便可以将这些共同的代码抽取出来成独立的文件。明白这一点非常重要。（搞了很久才明白的一点，唉～～～～）
如果在多个entry中require了相同的css文件，我们便可以使用CommonsChunkPlugin来将这些共同的样式文件抽取出来为独立的样式文件。
module.exports={
entry:{
"A":"./src/entry.js",
"B":"./src/entry2.js"
},
...
plugins:[
newwebpack.optimize.CommonsChunkPlugin({
name:"commons",filename:"commons.js"
}),
...
]
}
当然，这里不止会抽取共同的css，如果有共同的js代码，也会抽取成为commons.js。这里有个有趣的现象，抽取出来的css文件的命名将会是参数中name的值，而js文件名则会是filename的值。
CommonsChunkPlugin好像只会将所有chunk中都共有的模块抽取出来，如果存在如下的依赖
//entry1.js
varstyle1=require('./style/myStyle.css')
varstyle2=require('./style/style.css')
//entry2.js
require("./style/myStyle.css")
require("./style/myStyle2.css")
//entry3.js
require("./style/myStyle2.css")
使用插件后会发现，根本没有生成commons.css文件。
如果我们只需要取前两个chunk的共同代码，我们可以这么做
module.exports={
entry:{
"A":"./src/entry.js",
"B":"./src/entry2.js",
"C":"./src/entry3.js"
},
...
plugins:[
newwebpack.optimize.CommonsChunkPlugin({
name:"commons",filename:"commons.js",chunks:['A','B']
}),
...
]
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。