详解webpack分离css单独打包
这篇文章只写了如何把CSS打包成一个CSS文件，没有讲解如何打包成多个CSS文件，经简友提点，这里添加上了打包成多个CSS文件的方法。
瞎扯
webpack把所有的资源都当成了一个模块,CSS,Image,JS字体文件都是资源,都可以打包到一个bundle.js文件中.
但是有时候需要把样式单独的打包成一个文件,然后放到CND上,然后缓存到浏览器客户端中
一、extract-text-webpack-plugin使用方法
这个操作很简单的，只需要一个插件就好了，就是extract-text-webpack-plugin
1.安装extract-text-webpack-plugin
npminstallextract-text-webpack-plugin--save-dev
2.配置文件添加对应配置
首先require一下
varExtractTextPlugin=require("extract-text-webpack-plugin");
plugins里面添加
newExtractTextPlugin("styles.css"),
实例：
plugins:[
newwebpack.optimize.CommonsChunkPlugin('common.js'),
newExtractTextPlugin("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打包成多个文件
打包一个文件，只需要常规的在入口的js文件引用css文件即可，打包成多个CSS文件，可以设置多个CSS入口，让webpack用loader去打包。和分割单独打包js文件一样。下面有两个例子。
//使用webpack打包单独的postcss语法的css文件
/*webpack.config.js*/
varprecss=require('precss');
varcssnext=require('cssnext');
varautoprefixer=require('autoprefixer');
varcssnano=require('cssnano');
varEx=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:[
newEx("【name】.css")
]
}
//使用webpack打包单独的多个postcss语法的css文件
varprecss=require('precss');
varcssnext=require('cssnext');
varautoprefixer=require('autoprefixer');
varcssnano=require('cssnano');
varEx=require('extract-text-webpack-plugin');
varwebpack=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:[
newEx('[name].css')
]
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。