1.css-loader打包

1.目錄結構

2.執行與搭建

1.新建normal.css檔案

2.執行npm install --save-dev [email protected] 安裝css-loader開發依賴

3.執行 npm install --save-dev [email protected]安裝style-loader開發依賴

4.在webpack.config.js中引用

 module:{
        rules:[
            {
                test:/\.css$/,
                // \的含義是查詢.的識別符號  $是結束位置
                //css-loader檔案只負責載入
                //style-loader檔案負責渲染DOM
                //當使用多個loader時 系統會從右向左執行
                use:['style-loader','css-loader']
            }
        ]
    }
 

5.執行

npm run build執行打包檔案

2.less-loader打包

1搭建

1.css下新建special.less檔案

@fontSize:50px;
@fontColor:orange;
body{
    font-size: @fontSize;
    color:@fontColor;
}

2.main.js匯入依賴檔案

//5.依賴less檔案
require('./css/special.less')

3.外掛安裝

npm install --save-dev [email protected] [email protected]

4.webpack.config.js中引入

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

2.執行

npm run build;