详解webpack分离css单独打包

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

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

new ExtractTextPlugin("styles.css"),

plugins: [
  new webpack.optimize.CommonsChunkPlugin('mon.js'),
  new ExtractTextPlugin("styles.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"
  },
 ]
},

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

// 使用webpack 打包单独的postcss语法的css文件
/ webpack.config.js /
var precss = require('precss');
var cssnext = require('cssnext');
var aurefixer = require('aurefixer');
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 [aurefixer, cssnext, precss, cssnano]
 },
 plugins: [
  new Ex("【name】.css")
 ]
 }

 // 使用webpack 打包单独的多个postcss语法的css文件
var precss = require('precss');
var cssnext = require('cssnext');
var aurefixer = require('aurefixer');
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 [aurefixer, precss, cssnano, cssnext]
 },
 plugins: [
 new Ex('[name].css')
 ]
}