webpack如何對(duì)樣式進(jìn)行處理

這篇文章主要介紹了webpack如何對(duì)樣式進(jìn)行處理，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供永康網(wǎng)站建設(shè)、永康做網(wǎng)站、永康網(wǎng)站設(shè)計(jì)、永康網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、永康企業(yè)網(wǎng)站模板建站服務(wù)，10多年永康做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

具體如下：

我們可以在js中引入樣式文件

require('myStyle.css')

這時(shí)我們便需要引入相應(yīng)的webpack loader來(lái)幫助我們解析這段代碼。

css-loader搭配style-loader

首先，我們可以引入css-loader和style-loader來(lái)處理css的解析，其中，css-loader是用來(lái)解析css文件，style-loader是用來(lái)將css文件嵌入到j(luò)s文件里

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嵌入到j(luò)s代碼里。

如果你使用less來(lái)寫樣式的話，則需要先用less-loader來(lái)編譯樣式文件為css文件，再繼續(xù)使用css-loader與style-loader。另外，loader加載器可以省略后面的-loader。所以上面的代碼可以縮寫成

module: {
 rules: [
 {
  test: /\.css$/,
  include: [
  path.join(__dirname, 'src')
  ],
  use: ['style', 'css', 'less']
 }
 ]
}

一般在測(cè)試環(huán)境里為了快點(diǎn)編譯css，會(huì)用這種方式多一點(diǎn)，但是這樣子編譯出來(lái)的js文件會(huì)比較大，不大適合在生產(chǎn)環(huán)境里使用。

編譯成單獨(dú)的文件

上面的做法會(huì)把css和js打包在一起，減少實(shí)際請(qǐng)求的次數(shù)，但是由于編譯出來(lái)的js文件比較大，浪費(fèi)帶寬。因此，我們使用extract-text-webpack-plugin插件，把css文件編譯成獨(dú)立的文件。我們就可以利用cdn把這個(gè)文件推送到節(jié)點(diǎn)服務(wù)器，或者根據(jù)視情況按需加載，進(jìn)而優(yōu)化客戶請(qǐng)求鏈路，加速頁(yè)面響應(yīng)。

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目錄下生成對(duì)應(yīng)的js文件

兼容舊瀏覽器

以前我們寫樣式時(shí)，有些樣式不同瀏覽器需要加不同的前綴，如-webkit-。現(xiàn)在有了構(gòu)建工具，我們便不需要再去關(guān)注這些前綴了，構(gòu)建工具會(huì)自動(dòng)幫我們加上這些前綴。

對(duì)于webpack我們自然想到需要使用loader或者plugin來(lái)幫助我們做這些事情，查了下發(fā)現(xiàn)autoprefixer-loader已經(jīng)廢棄不再維護(hù)了，推薦使用posscss

postcss是用于在js中轉(zhuǎn)換css樣式的js插件，需要搭配其他插件一起使用，這點(diǎn)和babel6一樣，本身只是個(gè)轉(zhuǎn)換器，并不提供代碼解析功能。

這里我們需要autoprefixer插件來(lái)為我們的樣式添加前綴。首先下載該模塊。

npm install -D autoprefixer

接著便可以配置webpack了

var autoprefixer = require('autoprefixer')
module.exports = {
 ...
 module: {
 loaders: [
  ...
  {
  {
   test: /\.css$/,
   loader: ExtractTextPlugin.extract(["css", "postcss"])
  },
  }
 ]
 },
 postcss: [autoprefixer()],
 ...
}

查看一下抽取出來(lái)的樣式文件便可以發(fā)現(xiàn)已經(jīng)加上了前綴

a {
 display: flex;
}
/*compiles to:*/
a {
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex
}

另外autoprefixer還可以根據(jù)目標(biāo)瀏覽器版本生成不同的前綴個(gè)數(shù)，例如你的應(yīng)用的使用用戶如果大多數(shù)是使用比較新版本的瀏覽器，那么便可以做如下配置。

postcss: [autoprefixer({ browsers: ['last 2 versions'] })] 這是生成的樣式便會(huì)有些不一樣，還是上面的例子

a {
 display: flex;
}
/*compiles to:*/
a {
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
}

樣式壓縮

壓縮代碼我們可以使用webpack的內(nèi)置插件UglifyJsPlugin來(lái)做，它既可以壓縮js代碼也可以壓縮css代碼。

plugins: [
 ...
 new webpack.optimize.UglifyJsPlugin({
 compress: {
  warnings: false
 }
 }),
 ...
]

其實(shí)并不能說(shuō)是在壓縮css代碼，本質(zhì)來(lái)說(shuō)還是壓縮js代碼，再將這塊代碼輸出到css文件中。

使用CommonsChunkPlugin抽取公共代碼

首先要明確一點(diǎn)CommonsChunkPlugin是在有多個(gè)entry時(shí)使用的，即在有多個(gè)入口文件時(shí)，這些入口文件可能會(huì)有一些共同的代碼，我們便可以將這些共同的代碼抽取出來(lái)成獨(dú)立的文件。明白這一點(diǎn)非常重要。（搞了很久才明白的一點(diǎn)，唉～～～～）

如果在多個(gè)entry中require了相同的css文件，我們便可以使用CommonsChunkPlugin來(lái)將這些共同的樣式文件抽取出來(lái)為獨(dú)立的樣式文件。

module.exports = {
 entry: {
 "A": "./src/entry.js",
 "B": "./src/entry2.js"
 },
 ...
 plugins: [
 new webpack.optimize.CommonsChunkPlugin({
 name: "commons", filename: "commons.js"
 }),
 ...
 ]
}

當(dāng)然，這里不止會(huì)抽取共同的css，如果有共同的js代碼，也會(huì)抽取成為commons.js。這里有個(gè)有趣的現(xiàn)象，抽取出來(lái)的css文件的命名將會(huì)是參數(shù)中name的值，而js文件名則會(huì)是filename的值。

CommonsChunkPlugin好像只會(huì)將所有chunk中都共有的模塊抽取出來(lái)，如果存在如下的依賴

// entry1.js
var style1 = require('./style/myStyle.css')
var style2 = require('./style/style.css')

// entry2.js
require("./style/myStyle.css")
require("./style/myStyle2.css")

// entry3.js
require("./style/myStyle2.css")

使用插件后會(huì)發(fā)現(xiàn)，根本沒有生成commons.css文件。

如果我們只需要取前兩個(gè)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']
 }),
 ...
 ]
}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“webpack如何對(duì)樣式進(jìn)行處理”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

網(wǎng)站名稱：webpack如何對(duì)樣式進(jìn)行處理
分享地址：http://muchs.cn/article20/pphejo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、虛擬主機(jī)、建站公司、動(dòng)態(tài)網(wǎng)站、、App設(shè)計(jì)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容