打包和分离less

 

　　1、安装less的服务

 

　　npminstall–save-devless

 

　　2、安装less-loader打包使用

 

　　npminstall–save-devless-loader

 

　　3、配置loader：

 

　　{test:/\.less$/,

 

　　use:[{

 

　　loader:"style-loader"//createsstylenodesfromJSstrings},{loader:"css-loader"//translatesCSSintoCommonJS

 

　　,{

 

　　loader:"less-loader"//compilesLesstoCSS}]

 

　　}

 

　　4、src/index.html中插入

 

　　<pid="lessLearn"></p>

 

　　<p><imgsrc="./images/10.jpg"/></p>

 

　　<pid="pic"></p>

 

　　<pid="title"></p>

 

　　5、编写一个src/css/目录下black.less文件

 

　　@base:#000;#lessLearn{width:300px;

 

　　height:200px;

 

　　background-color:@base;}

 

　　6、在src/entry.js中引入less

 

　　importlessfrom‘./css/black.less’

 

　　7、删除dist目录，输入webpack进行打包，打包成功后，查看dist/css/index.css里面并没有#lessLearn样式（==打包到了js里面==）

 

　　8、npmrunserver运行结果

 

　　可以在package.json里面的script里面的server中加入–open,浏览器会自行打开该页面

 

　　“server”:“webpack-dev-server–open”,

 

　　9、若要对entry里面的js和less进行分离，需要修改webpack-config.js里面的module下less配置的use进行修改

 

　　use:extractTextPlugin.extract({use:[{

 

　　loader:'css-loader'

 

　　},{loader:'less-loader'

 

　　}],fallback:'style-loader'

 

　　})

 

　　修改如下：

 

　　10、删除dist文件夹，webpack打包，会在dist/css/index.css里面看到less的样式定义（即把css和js分离）

 

　　11、npmrunbuild运行浏览器






本文转载自中文网