Stay before every beautiful thoughts.

Just be nice, always think twice!

Webpack分离CSS单独打包

江矿先森. WebpackCSS

这个操作很简单的,只需要一个插件就好了,就是extract-text-webpack-plugin

1、安装extract-text-webpack-plugin

cnpm 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');
江矿先森.
前(台)端(菜), 喜欢瞎折腾新技术. 乜野都识少少, 先可以扮代表:p