webpack分离打包css和less

github仓库：https://github.com/llcMite/webpack.git

为什么要分离打包？

      答：刚开始学webpack的时候就很郁闷，明明没几个文件，打包出来体积特别的大，看着它体积大就是不爽

这里只需要一个插件（extract-text-webpack-plugin）就可以搞定了

webpack这里就不解释，不会的自己去官网看看，下面的配置文件是本人成功打包出来的配置，（插件是会更新）如果出现什么问题可以参考插件官方提供的用法，百度插件名字就可以找到插件官方用法了，这里要注意，不能重复配置css,我用的是less多一点，所以这里只研究了less的用法，不过sass用法差不多；

1)安装依赖

cnpm install less less-loader extract-text-webpack-plugin --save-dev

2）配置webpack.config.js

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

const extractCSS = new ExtractTextPlugin('stylesheets/reset.css');
const extractLESS = new ExtractTextPlugin('stylesheets/less.css');

module.exports={
    entry:'./index.js',
    output:{
        path:__dirname,
        filename:'build.js'
    },
    module:{
        rules: [
          {
            test: /\.css$/,
            use: extractCSS.extract({
              fallback: "style-loader",
              use: "css-loader"
            })
          },
          {
            test: /\.less$/i,
            use: extractLESS.extract([ 'css-loader', 'less-loader' ])
          },
        ]
    },
    plugins:  [
      extractCSS,
      extractLESS
    ],
}