webpack分離css單獨打包

這篇文章過時了，webpack4.x已經不這麼用了，最新的能夠看這個地址webpack實戰場景系列

原文地址：http://www.izhongxia.com/posts/44724.html

CHANGELOG

2018-02-08 14:46:06

剛看了下，網上查了 webpack單獨打包css，找到的文章，本文比較靠前，可是因爲寫的比較混亂，所以從新整理一下內容，更通俗易懂一點。

2018-02-01 14:45:23

因爲這篇文章只寫瞭如何把CSS打包成一個CSS文件，沒有講解如何打包成多個CSS文件，經簡友提點，這裏添加上了 打包成多個CSS文件的方法。

2016-05-17 11:55

剛學習webpack，記錄一下webpack如何單獨打包css

---

零、介紹

如下是我的項目中總結出來的一些基本知識，記錄在這裏，加深本身的印象，也讓你們可以更快速方便的瞭解webpack，而且使用它。能力所限，有錯誤或者問題，請幫忙指出。

webpack 把全部的資源都當成了一個模塊, CSS,Image, JS 字體文件 都是資源, 均可以打包到一個 bundle.js 文件中.

webpack基本的使用很簡單，可是要方方面面都講解的話內容不少，所以這邊主要講解一下 如何使用webpack單獨打包css。

至於打包出來，怎麼加hash值，怎麼替換html中的引用路徑，怎麼上傳到CND可使用gulp來實現。【有興趣後面在寫一篇文章】

1、extract-text-webpack-plugin 用法

單獨打包css，在webpack須要使用一個插件，extract-text-webpack-plugin

1. 安裝extract-text-webpack-plugin

// use npm 
npm install extract-text-webpack-plugin --save-dev

// or use yarn 
yarn add extract-text-webpack-plugin

2. 配置

加載器裏面寫好插件的配置（使用什麼加載器），在webpack的 plugins 裏面設置抽離出來的CSS文件名叫什麼。

var Ex = require('extract-text-webpack-plugin');
// ...省略
module: {
  loaders: [{
    test: /\.less/,
    loader: Ex.extract('style-loader', 'css-loader','less-loader')  // 單獨打包出CSS，這裏配置注意下
  }]
},
plugins: [
  new Ex("【name】.css")
]

稍微詳細點，能夠參考這個《extract-text-webpack-plugin 的使用及安裝》

---

下面放兩個實際使用例子，方便你們理解

2、單頁面應用，把JS裏面的CSS單獨打包

打包一個文件，只須要常規的在入口的js文件引用 css文件便可， 打包成多個CSS文件，能夠設置多個CSS入口，讓webpack用 loader去打包。 和分割單獨打包js文件同樣。下面有兩個例子。【例子來源】

// webpack 1.x 配置   【早期使用的配置，那時候是1.x】
/*   webpack.config.js   */
var precss = require('precss');
var cssnext = require('cssnext');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');
var Ex = require('extract-text-webpack-plugin');
module.exports = {
    entry: './index.js',
    output: {
      filename: 'index.js'
    },
    module: {
      loaders: [{
        test: /\.less/,
        loader: Ex.extract('style-loader', 'css-loader','less-loader')  // 單獨打包出CSS，這裏配置注意下
      }]
    },
    plugins: [
      new Ex("【name】.css")
    ]
  }

3、webpack如何打包多個CSS文件

2. 配置文件添加對應配置

下面直接提供一個完成的多入口CSS打包配置

// webpack 3.x 的配置
var path = require('path')
var glob = require('globby')  
var webpack = require('webpack')
var ExtractTextPlugin = require('extract-text-webpack-plugin')

// CSS入口配置
var CSS_PATH = {
  css: {
    pattern: ['./src/**/[^_]*.less', '!./src/old/**/*.less'],
    src: path.join(__dirname, 'src'),
    dst: path.resolve(__dirname, 'static/build/webpack'),
  }
}

// 遍歷除全部須要打包的CSS文件路徑
function getCSSEntries(config) {
  var fileList = glob.sync(config.pattern)
  return fileList.reduce(function (previous, current) {
    var filePath = path.parse(path.relative(config.src, current))
    var withoutSuffix = path.join(filePath.dir, filePath.name)
    previous[withoutSuffix] = path.resolve(__dirname, current)
    return previous
  }, {})
}

module.exports = [
  {
    devtool: 'cheap-module-eval-source-map',
    context: path.resolve(__dirname),
    entry: getCSSEntries(CSS_PATH.css),
    output: {
      path: CSS_PATH.css.dst,
      filename: '[name].css'
    },
    module: {
      rules: [
        {
          test: /\.less$/,
          use: ExtractTextPlugin.extract({
            use: ['css-loader', 'postcss-loader', 'less-loader']
          })
        }
      ]
    },
    resolve: {
      extensions: ['.less']
    },
    plugins: [
      new ExtractTextPlugin('[name].css'),
    ]
  },
// 若是還須要打包js，則能夠在這裏增長一個單獨打包js的處理【根據本身需求來】
// {
//    entry:{},
//    output:{},
//    ... 省略
// }
]

可能有同窗還在使用webpack1.x,因此這裏在貼一下webpack1.x 的簡單配置

// webpack 1.x 版本
// ...其餘配置和webpack3.x同樣
module: {
    loaders: [
        {
            test: /\.less$/,
            loader: ExtractTextPlugin.extract("style-loader","css-loader","postcss-loader","less-loader")
        },
    ]
}
plugins: [
  new ExtractTextPlugin('[name].css'),
]
// ...其餘配置和webpack3.x同樣