webpack快速入門——CSS進階，Less文件的打包和分離

1.要使用less，首先使用npm安裝less服務

cnpm install  less --save-dev

還須要安裝Less-loader用來打包使用。

cnpm 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.引入到entry.js中

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

5.使用webpack進行打包

6.輸入npm run server 查看效果

 

7.less分離

 

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

 

8.把dist目錄先刪除掉，在npm中輸入webpack進行打包，最終效果：

 

還有一顆小彩蛋哦~~~

爲何咱們輸入npm run server，瀏覽器頁面沒有自動打開，反而須要咱們手動打開呢，

小夥伴們，打開你的package.json文件，在後面加 --open便可

 

 

前端必學內容：webpack（模塊打包器）

webpack3 學習內容，點擊便可到達

(1).webpack快速入門——如何安裝webpack及注意事項

(2).webpack快速入門——webpack3.X 快速上手一個Demo   

(3).webpack快速入門——配置文件：入口和出口，多入口、多出口配置 

(4).webpack快速入門——配置文件：服務和熱更新

(5).webpack快速入門——CSS文件打包

(6).webpack快速入門——配置JS壓縮，打包

(7).webpack快速入門——插件配置：HTML文件的發佈

(8).webpack快速入門——CSS中的圖片處理

(9).webpack快速入門——CSS分離與圖片路徑處理

(10).webpack快速入門——處理HTML中的圖片

(11).webpack快速入門——CSS進階，Less文件的打包和分離

(12).webpack快速入門——CSS進階：SASS文件的打包和分離

(13).webpack快速入門——CSS進階：自動處理CSS3前綴

(14).webpack快速入門——CSS進階：消除未使用的CSS

(15).webpack快速入門——給webpack增長babel支持

(16).webpack快速入門——打包後如何調試

(17).webpack快速入門——實戰技巧：開發和生產並行設置

(18).webpack快速入門——實戰技巧：webpack模塊化配置

(19).webpack快速入門——實戰技巧：優雅打包第三方類庫

(20).webpack快速入門——實戰技巧：watch的正確使用方法，webpack自動打包

(21).webpack快速入門——實戰技巧：webpack優化黑技能

(22).webpack快速入門——集中拷貝靜態資源

(23).webpack快速入門——Json配置文件使用

 

若是個人內容對你有幫助，歡迎打賞