webpack配置：less/sass文件打包和分离、自动处理css前缀、消除未使用的css及完整的webpack.config.js文件

一、less文件打包和分离

　　1、要使用less，首先使用npm安装less服务；还需要安装Less-loader用来打包使用。

npm install less --save-dev npm install less-loader --save-dev 

　　2、在module中配置

{ test: /\.less$/, use: [{ loader: "style-loader" },{ loader: "css-loader" },{ loader: "less-loader" }] }

　　3、在html中编写一个div，在css中新建一个less文件

<div id="leesBox"></div>

@base:yellowgreen;
#leesBox{
    width:300px;
    height:200px;
    background: @base;
}

　　4、引入到index.js中

import less from './css/black.less';

　　5、使用webpack进行打包，输入npm run server 查看效果

　　6、less分离

　　先配置

{ test: /\.less$/, use:extractTextPlugin.extract({ use:[{ loader:'css-loader' },{ loader:'less-loader' }], fallback:'style-loader' }) }

　　再webpack打包，然后lessBox效果正常显示。之前跟在link后面的style样式没有了，我们在看index.css，发现less的样式进了index.css里面去了

二、sass文件打包和分离

　　1、安装：因为sass-loader依赖于node-sass，所以需要先安装node-sass

npm install node-sass --save-dev npm install sass-loader --save-dev 

　　其他与less方式基本一致，将原来的less改成sass即可。

三、自动处理css前缀

　　为了浏览器的兼容性，有时候我们必须加入-webkit、-ms、-o、-moz这些前缀。目的就是让我们写的页面在每个浏览器中都可以顺利运行。

　　1、安装

npm i postcss-loader autoprefixer --save-dev

　　2、在根目录新建一个postcss.config.js文件

module.exports = { plugins: [ require('autoprefixer') ] }

　　这就是对postCSS一个简单的配置，引入了autoprefixer插件。让postCSS拥有添加前缀的能力，它会根据 can i use 来增加相应的css3属性前缀。

　　3、配置

{ test:/\.css$/, use:extractTextPlugin.extract({ fallback:"style-loader", use:[ {loader:"css-loader",options:{importLoader:1}}, "postcss-loader" ] }) }

　　4、输入webpack进行打包，最终效果。css文件里面加了浏览器前缀

 四、消除未使用的CSS

　　使用PurifyCSS可以大大减少CSS冗余

　　1、安装

npm install purifycss-webpack purify-css --save-dev

　　2、引入glob，因为我们需要同步检查html模板，所以我们需要引入node的glob对象使用。

　　在webpack.config.js文件头部引入glob、引入purifycss-webpack

const glob = require('glob'); const PruifyCSSPlugin = require('purifycss-webpack');

　　3、配置

new PruifyCSSPlugin({ paths:glob.sync(path.join(__dirname,'src/*.html'))//src下所有的html
})

　　4、配置好后，我们可以在css文件里，故意写一些不用的内容，使用webpack打包后，会自动去掉这些多余的内容

　　我们加了无用的name样式，打包出来，发现没有，这就对了。

五、完整的webpack.config.js配置文件

　　附上本次完整的配置文件

const path = require('path'); const uglify = require('uglifyjs-webpack-plugin'); const htmlPlugin = require('html-webpack-plugin'); const extractTextPlugin = require("extract-text-webpack-plugin"); const glob = require('glob'); const PruifyCSSPlugin = require('purifycss-webpack'); module.exports={ //打包调试
    devtool:'eval-source-map', //入口文件的配置项
 entry:{ entry:'./src/index.js' }, //出口文件的配置项
 output:{ //输出的路径，用了Node语法
        path:path.resolve(__dirname,'dist'), //输出的文件名称
        filename:'bundle.js', publicPath:'./' }, //模块：例如解读CSS,图片如何转换，压缩
 module:{ rules:[ { test:/\.css$/, use:extractTextPlugin.extract({ fallback:"style-loader", use:"css-loader" }) },{ test:/\.(png|jpg|gif)/, use:[{ loader:'url-loader', options:{ limit:500000 } }] },{ test:/\.(htm|html)$/i, use:['html-withimg-loader'] },{ test:/\.(jsx|js)$/, use:{ loader:'babel-loader', options:{ presets:["es2015","react"] } }, exclude:/node_modules/ },{ test: /\.less$/, use:extractTextPlugin.extract({ use:[{ loader:'css-loader' },{ loader:'less-loader' }], fallback:'style-loader' }) },{ test:/\.css$/, use:extractTextPlugin.extract({ fallback:"style-loader", use:[ {loader:"css-loader",options:{importLoader:1}}, "postcss-loader" ] }) } ] }, //插件，用于生产模版和各项功能
 plugins:[ new uglify(), new htmlPlugin({ minify:{ removeAttributeQuotes:true }, hash:true, template:'./src/index.html' }), new extractTextPlugin('/css/index.css'), new PruifyCSSPlugin({ paths:glob.sync(path.join(__dirname,'src/*.html'))//src下所有的html
 }) ],// 插件，多个插件，所以是数组 //配置webpack开发服务功能
 devServer:{ contentBase:path.resolve(__dirname,'dist'),//本地服务器所加载的页面所在的目录
        host:'192.168.118.221', compress:true, port:8081 }// 配置webpack服务
}