webpack简单教程(2)--使用less并生成独立的CSS样式

在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就已经完成了。

 

posted @ 2017-08-27 12:35  Tsingtree  阅读(645)  评论(0)  编辑  收藏  举报