webpack-css單獨打包配置

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

這個操做很簡單的，只須要一個插件就行了，就是extract-text-webpack-plugin

1. 安裝extract-text-webpack-plugin

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

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

首先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"
},
]
},

1. 在引入文件裏面添加須要的css，【舉例以下】

require('../less/app.less');
require('./bower_components/bootstrap-select/dist/css/bootstrap-select.min.css');
require('./bower_components/fancybox/source/jquery.fancybox.css');
2、如何把CSS打包成一個文件， 和 把CSS打包成多個文件

打包一個文件，只須要常規的在入口的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') ] }