webpack中怎么分離css

今天就跟大家聊聊有關(guān)webpack中怎么分離css，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

webpack 把所有的資源都當(dāng)成了一個(gè)模塊, CSS,Image, JS 字體文件 都是資源, 都可以打包到一個(gè) bundle.js 文件中.

webpack基本的使用很簡(jiǎn)單，但是要方方面面都講解的話(huà)內(nèi)容很多，因此這邊主要講解一下 如何使用webpack單獨(dú)打包c(diǎn)ss。

至于打包出來(lái)，怎么加hash值，怎么替換html中的引用路徑，怎么上傳到CND可以使用gulp來(lái)實(shí)現(xiàn)。【有興趣后面在寫(xiě)一篇文章】

一、extract-text-webpack-plugin 用法

單獨(dú)打包c(diǎn)ss，在webpack需要使用一個(gè)插件，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. 配置

加載器里面寫(xiě)好插件的配置（使用什么加載器），在webpack的 plugins 里面設(shè)置抽離出來(lái)的CSS文件名叫什么。

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

稍微詳細(xì)點(diǎn)，可以參考這個(gè)《extract-text-webpack-plugin 的使用及安裝》

下面放兩個(gè)實(shí)際使用例子，方便大家理解

二、單頁(yè)面應(yīng)用，把JS里面的CSS單獨(dú)打包

打包一個(gè)文件，只需要常規(guī)的在入口的js文件引用 css文件即可， 打包成多個(gè)CSS文件，可以設(shè)置多個(gè)CSS入口，讓webpack用 loader去打包。 和分割單獨(dú)打包js文件一樣。下面有兩個(gè)例子。

// webpack 1.x 配置  【早期使用的配置，那時(shí)候是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') // 單獨(dú)打包出CSS，這里配置注意下
   }]
  },
  plugins: [
   new Ex("【name】.css")
  ]
 }

三、webpack如何打包多個(gè)CSS文件

2. 配置文件添加對(duì)應(yīng)配置

下面直接提供一個(gè)完成的多入口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，則可以在這里增加一個(gè)單獨(dú)打包js的處理【根據(jù)自己需求來(lái)】
// {
//  entry:{},
//  output:{},
//  ... 省略
// }
]

可能有同學(xué)還在使用webpack1.x,所以這里在貼一下webpack1.x 的簡(jiǎn)單配置

// 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一樣

看完上述內(nèi)容，你們對(duì)webpack中怎么分離css有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。