本文介紹了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-。現在有了構建工具，我們便不需要再去關注這些前綴了，構建工具會自動幫我們加上這些前綴。

對于webpack我們自然想到需要使用loader或者plugin來幫助我們做這些事情，查了下發現autoprefixer-loader已經廢棄不再維護了，推薦使用posscss