詳解webpack分離css單獨打包

更新時間：2017年06月21日 10:45:13 作者：那年、仲夏

這篇文章主要介紹了詳解webpack分離css單獨打包，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

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

瞎扯

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

但是有時候需要把樣式單獨的打包成一個文件, 然后放到 CND上, 然后緩存到瀏覽器客戶端中

一、extract-text-webpack-plugin 使用方法

這個操作很簡單的，只需要一個插件就好了，就是extract-text-webpack-plugin

1. 安裝extract-text-webpack-plugin

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

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

首先require一下

var ExtractTextPlugin = require("extract-text-webpack-plugin");

plugins里面添加

new ExtractTextPlugin("styles.css"),

實例：

plugins: [
  new webpack.optimize.CommonsChunkPlugin('common.js'),
  new ExtractTextPlugin("styles.css"), 
],

modules里面對css的處理修改為

{
 test: /\.css$/,
  loader: ExtractTextPlugin.extract("style-loader","css-loader")
},

千萬不要重復了，不然會不起作用的

我這里如下：

module: {
  loaders: [
   {
   test: /\.css$/,
    loader: ExtractTextPlugin.extract("style-loader","css-loader")
  },
   {
   test: /\.scss$/,
    loader: "style!css!sass"
  },
   {
   test: /\.less$/,
    loader: "style!css!less"
  },
 ]
},

3. 在引入文件里面添加需要的css，【舉例如下】

require('../less/app.less');
require('./bower_components/bootstrap-select/dist/css/bootstrap-select.min.css');
require('./bower_components/fancybox/source/jquery.fancybox.css');

二、如何把CSS打包成一個文件，和把CSS打包成多個文件

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

// 使用webpack 打包單獨的postcss語法的css文件
/* 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: './【path】/index.js',
 /* index.js 里 require('./【name】.css');就好 我在看看文檔是不是直接不用引入js文件 */
 output: {
  filename: 'index.js'
 },
 module: {
  loaders: [{
  test: /\.css$/,
  loader: Ex.extract('style-loader', 'css-loader!postcss-loader') /*這里的寫法注意下 */
  }]
 },
 postcss: function() {
  return [autoprefixer, cssnext, precss, cssnano]
 },
 plugins: [
  new Ex("【name】.css")
 ]
 }

 // 使用webpack 打包單獨的多個postcss語法的css文件
var precss = require('precss');
var cssnext = require('cssnext');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');
var Ex = require('extract-text-webpack-plugin');
var webpack = require('webpack');


module.exports = {
 entry: {
 ac1: './src/actother.css',
 ac2: './src/index.css'
 },
 output: {
 filename: "[name].css"
 },
 module: {
 loaders: [{
  test: /\.css$/,
  loader: Ex.extract('style-loader', 'css-loader!postcss-loader')
 }]
 },
 postcss: function() {
 return [autoprefixer, precss, cssnano, cssnext]
 },
 plugins: [
 new Ex('[name].css')
 ]
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: