webpack對樣式的處理

參考： github.com/zhengweiken…

咱們能夠在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.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")
複製代碼

使用插件後會發現，根本沒有生成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']
	}),
    ...
  ]
}
複製代碼