webpack簡單教程(2)--使用less並生成獨立的CSS樣式
阿新 • • 發佈：2017-08-27
bsp oct console xtra put 項目信息 pub charset entry
在webpack中配置並使用less直接生成css樣式
1、在F盤中創建一個文件夾webpack-less
2、在文件夾中創建index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>webpack demo</title> <link rel="stylesheet" href="dist/index.css"> </head> <body> <div class="demo1"></div> <script src="dist/bundle.js"></script> </body> </html>
3、創建index.js
console.log("webpack運行成功!!");
require("./index.less");
4、創建index.less
@width:100px; @height:100px; body{ background:#fff; } .borderR(@w:50%){ border-radius: @w; } .demo1{ width:@width; height:@height; .borderR(); background:red; }
5、創建webpack.config.js
var ExtractTextPlugin = require(‘extract-text-webpack-plugin‘); //引入分離插件，需要安裝 module.exports = { entry: ‘./index.js‘, output:{ path: __dirname + ‘/dist‘, //導出路徑 publicPath:‘/dist‘, //服務器路徑 filename:‘./bundle.js‘ //文件名 }, plugins:[ new ExtractTextPlugin(‘./index.css‘) //解析less並分離得到的css ], module:{ rules:[ { test:/\.less$/, use: ExtractTextPlugin.extract([ ‘css-loader‘, ‘less-loader‘ ]) //解析less使用的規則，從右到左執行，即先執行less-loader } ] } }
6、在文件夾空白處 shift + 右鍵 ，選中在此處打開命令窗口
7、在命令行中輸入 npm init 設置你的項目信息。（這裏直接 Enter到結束或者輸入命令 npm init -y） 這裏推薦使用 npm init -y
8、在命令行中輸入 npm install webpack webpack-dev-server --save-dev （局部安裝--推薦） npm install webpack webpack-dev-server --g
9、在命令行中輸入npm i less less-loader css-loader style-loader extract-text-webpack-plugin -D
10、在命令行中輸入webpack 執行編譯
11、在命令行中輸入webpack-dev-server 啟動服務器。
12、在瀏覽器中輸入http://localhost:8080/index.html 訪問到頁面
13、修改一下index.less (註意查看瀏覽器在保存less文件時是否自動刷新頁面)
@width:100px; @height:100px; body{ background:#fff; } .borderR(@w:50%){ border-radius: @w; } .demo1{ width:@width; height:@height; .borderR(); background:red; padding:10px; }
14、webpack使用less生成css就已經完成了。
webpack簡單教程(2)--使用less並生成獨立的CSS樣式