本文介紹了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
postcss是用于在js中轉換css樣式的js插件，需要搭配其他插件一起使用，這點和babel6一樣，本身只是個轉換器，并不提供代碼解析功能。
這里我們需要autoprefixer插件來為我們的樣式添加前綴。首先下載該模塊。
npm install -D autoprefixer
接著便可以配置webpack了
var autoprefixer = require('autoprefixer')module.exports = { ... module: { loaders: [ ... { { test: //.css$/, loader: ExtractTextPlugin.extract(["css", "postcss"]) }, } ] }, postcss: [autoprefixer()], ...}查看一下抽取出來的樣式文件便可以發現已經加上了前綴
a { display: flex;}/*compiles to:*/a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex}另外autoprefixer還可以根據目標瀏覽器版本生成不同的前綴個數，例如你的應用的使用用戶如果大多數是使用比較新版本的瀏覽器，那么便可以做如下配置。
postcss: [autoprefixer({ browsers: ['last 2 versions'] })] 這是生成的樣式便會有些不一樣，還是上面的例子
a { display: flex;}/*compiles to:*/a { display: -webkit-flex; display: -ms-flexbox; display: flex;}樣式壓縮
壓縮代碼我們可以使用webpack的內置插件UglifyJsPlugin來做，它既可以壓縮js代碼也可以壓縮css代碼。
plugins: [ ... new webpack.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: [ new webpack.optimize.CommonsChunkPlugin({ name: "commons", filename: "commons.js" }), ... ]}當然，這里不止會抽取共同的css，如果有共同的js代碼，也會抽取成為commons.js。 這里有個有趣的現象，抽取出來的css文件的命名將會是參數中name的值，而js文件名則會是filename的值。
CommonsChunkPlugin好像只會將所有chunk中都共有的模塊抽取出來，如果存在如下的依賴
// entry1.jsvar style1 = require('./style/myStyle.css')var style2 = require('./style/style.css')// entry2.jsrequire("./style/myStyle.css")require("./style/myStyle2.css")// entry3.jsrequire("./style/myStyle2.css")使用插件后會發現，根本沒有生成commons.css文件。
如果我們只需要取前兩個chunk的共同代碼，我們可以這么做
module.exports = { entry: { "A": "./src/entry.js", "B": "./src/entry2.js", "C": "./src/entry3.js" }, ... plugins: [ new webpack.optimize.CommonsChunkPlugin({ name: "commons", filename: "commons.js", chunks: ['A', 'B'] }), ... ]}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
