本文介绍了webpack对样式的处理，分享给大家，具体如下：
我们可以在js中引入样式文件
require('myStyle.css')
这时我们便需要引入相应的webpack loader来帮助我们解析这段代码。
css-loader搭配style-loader
首先，我们可以引入css-loader和style-loader来处理css的解析，其中，css-loader是用来解析css文件，style-loader是用来将css文件嵌入到js文件里
var path = 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把这个文件推送到节点服务器，或者根据视情况按需加载，进而优化客户请求链路，加速页面响应。
var path = 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: [
new ExtractTextPlugin('[name].css')
]
}
通过上面的代码，我们使用extract-text-webpack-plugin插件处理src目录下所有的css文件，先使用css-loader插件解析出css代码，如果解析失败，使用style-loader插件解析，最终在dist目录下生成对应的js文件
兼容旧浏览器
以前我们写样式时，有些样式不同浏览器需要加不同的前缀，如-webkit-。现在有了构建工具，我们便不需要再去关注这些前缀了，构建工具会自动帮我们加上这些前缀。