webpack配置：less/sass文件打包和分離、自動處理css前綴、消除未使用的css及完整的webpack.config.js文件

1、less文件打包和分離

　　一、要使用less，首先使用npm安裝less服務；還須要安裝Less-loader用來打包使用。

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

　　二、在module中配置

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

　　三、在html中編寫一個div，在css中新建一個less文件

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

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

　　四、引入到index.js中

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

　　五、使用webpack進行打包，輸入npm run server 查看效果

　　六、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裏面去了

2、sass文件打包和分離

　　一、安裝：由於sass-loader依賴於node-sass，因此須要先安裝node-sass

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

　　其餘與less方式基本一致，將原來的less改爲sass便可。

3、自動處理css前綴

　　爲了瀏覽器的兼容性，有時候咱們必須加入-webkit、-ms、-o、-moz這些前綴。目的就是讓咱們寫的頁面在每一個瀏覽器中均可以順利運行。

　　一、安裝

npm i postcss-loader autoprefixer --save-dev

　　二、在根目錄新建一個postcss.config.js文件

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

　　這就是對postCSS一個簡單的配置，引入了autoprefixer插件。讓postCSS擁有添加前綴的能力，它會根據 can i use 來增長相應的css3屬性前綴。

　　三、配置

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

　　四、輸入webpack進行打包，最終效果。css文件裏面加了瀏覽器前綴

 4、消除未使用的CSS

　　使用PurifyCSS能夠大大減小CSS冗餘

　　一、安裝

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

　　二、引入glob，由於咱們須要同步檢查html模板，因此咱們須要引入node的glob對象使用。

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

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

　　三、配置

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

　　四、配置好後，咱們能夠在css文件裏，故意寫一些不用的內容，使用webpack打包後，會自動去掉這些多餘的內容

　　咱們加了無用的name樣式，打包出來，發現沒有，這就對了。

5、完整的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服務
}