(11/24) css进阶：Less文件的打包和分离

写在前面：在前面我们对css打包和分离进行了描述。此节我们开始学习如何对less文件进行打包和分离。

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。 Less知识学习

1.Less文件的打包处理

1.1 在src/index.html文件中新增一个标签，样式采用less编写。

  <div id="less_part">less</div>

1.2 在css目录下新建一个less文件，此处为black.less

@base :#000;
#less_part{width:300px;height:300px;background-color:@base;
}

@base是我们设置的变量名称。

1.3 在src目录下的entry.js中引入less文件

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

1.4 安装Less的服务

要使用Less，我们要首先安装Less的服务，当然也是用npm来进行安装或者cnpm来安装。

npm install --save-dev less

还需要安装Less-loader用来打包使用。

1.5 Less-loader安装

npm  install --save-dev less-loader

1.6 配置loader

安装好后，需要在webpack.config.js里编写loader配置，当然要想正确解析成css，还是需要style-loader和css-loader的帮助，但是这两个loader前边已经讲过了，所以在这里就不重复了，style-loader和css-loader学习

webpack.config.js：

 //针对.less的处理配置
            {test: /\.less$/,use: [{loader: "style-loader" // creates style nodes from JS strings
                }, {loader: "css-loader" // translates CSS into CommonJS
                },{loader: "less-loader" // compiles Less to CSS
                }]},

注意上面loader的顺序，不要写反了。

1.7 打包+启动服务

使用webpack命令进行打包，此时我们可以发现，相关的样式被打包到了js当中。当然这是正确的，我们可以使用npm run server命令启动服务，最终也能正常渲染页面，我们的less样式被正确引用。

渲染效果：

在实际开发中我们可能会把想相关的css文件与js文件分离开来，以便管理，此处我们把Lees文件进行分离。

2.分离Less文件

在上一节当中我们学习了extract-text-webpack-plugin这个插件，也是需要通过这个插件来实现less文件的分离。插件的使用

更改上述webpack.config.js文件中针对less文件的配置（使用分离的配置），修改后的代码为：

   {test: /\.less$/,use: extractTextPlugin.extract({use: [{loader: "css-loader"}, {loader: "less-loader"}],// use style-loader in developmentfallback: "style-loader"})},

配置好后，使用webpack命令进行打包，此时less编写的样式被分离到了index.css文件里（配置的css打包路径）。

然后使用npm run server命令重新启动服务，渲染效果与上面一致。

部分源码：

webpack.config.js:

const path = require('path');
const uglify = require('uglifyjs-webpack-plugin');
const htmlPlugin= require('html-webpack-plugin');
const extractTextPlugin = require("extract-text-webpack-plugin");
var website ={publicPath:"http://localhost:1818/"
}
module.exports={//入口文件的配置项
    entry:{entry:'./src/entry.js',//这里我们又引入了一个入口文件entry2:'./src/entry2.js',},//出口文件的配置项
    output:{//输出的路径，用了Node语法path:path.resolve(__dirname,'dist'),//输出的文件名称filename:'[name].js',publicPath: website.publicPath},//模块：例如解读CSS,图片如何转换，压缩
    module:{rules: [//针对.css的处理配置
            {test: /\.css$/,use: extractTextPlugin.extract({fallback: "style-loader",use: "css-loader"})},//针对.less的处理配置
            {test: /\.less$/,use: extractTextPlugin.extract({use: [{loader: "css-loader"}, {loader: "less-loader"}],// use style-loader in developmentfallback: "style-loader"//extract默认行为先使用css-loader编译css，如果一切顺利的话，结束之后把css导出到规定的文件去。但是如果编译过程中出现了错误，则继续使用vue-style-loader处理css
                })},{test:/\.(png|jpg|gif)/,use:[{loader:'url-loader',options:{limit:50,outputPath:'images/'//图片打包到images下
                    }}]},{test: /\.(htm|html)$/i,use:[ 'html-withimg-loader']}]},//插件，用于生产模版和各项功能
    plugins:[// new uglify(),new htmlPlugin({minify:{removeAttributeQuotes:true},hash:true,template:'./src/index.html'}),new extractTextPlugin("css/index.css")],//配置webpack开发服务功能
    devServer:{contentBase:path.resolve(__dirname,'dist'), //绝对路径host:'localhost',compress:true,port:1818}
}

View Code

src/css/black.less:

@base :#000;
#less_part{width:300px;height:300px;background-color:@base;
}

View Code

src/index.html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>webpack</title>
</head>
<body>
<div><div id="less_part">less</div><img src="data:images/wfbin.png"/></div>
<div id="img"></div>
<div id="title"></div>
</body>
</html>

View Code

src/entry.js(入口文件)：

import css from './css/index.css'
import less from './css/black.less'
document.getElementById('title').innerHTML='Hello Webpack';

View Code

posted on 2018-12-15 17:37 WFaceBoss 阅读(...) 评论(...) 编辑收藏

转载于:https://www.cnblogs.com/wfaceboss/p/10123909.html

(11/24) css进阶：Less文件的打包和分离相关推荐

webpack如何将css文件分离的,webpack--css：Less文件的打包和分离(八)
目录结构 before after webpack.config.js 文件内容 src/css/index.less @blue :#00aaee; #jie{ width: 100px; heig ...
打包成单独的HTML文件,【WEBPACK】分离css单独打包
时间:2018-11-21 00:58:56 这篇文章非常非常早了,webpack4下已经无法用了, 最新可以看这里webpack实战场景系列 CHANGELOG 2018-02-08 14:46:0 ...
gulp实现打包js/css/img/html文件，并对js/css/img文件加上版本号
参考打包教程: http://www.cnblogs.com/tugenhua0707/p/4069769.html http://www.cnblogs.com/tugenhua0707/p/498 ...
asp.net使用httphandler打包多CSS或JS文件以加快页面加载速度
介绍使用许多小得JS.CSS文件代替一个庞大的JS或CSS文件来让代码获得更好的可维护性,这是一个很好的实践.但这样做反过来却损失了网站的性能.虽然你应该将你的Javascript代码写在小文件中并 ...
ASP.NET 打包多CSS或JS文件以加快页面加载速度的Handler
ASP.NET 打包多CSS或JS文件以加快页面加载速度的Handler, 使用<link type="text/css" rel="Stylesheet" ...
webpack配置：less/sass文件打包和分离、自动处理css前缀、消除未使用的css及完整的webpack.config.js文件...
一.less文件打包和分离 1.要使用less,首先使用npm安装less服务:还需要安装Less-loader用来打包使用. npm install less --save-dev npm inst ...
vue-cli打包后，找不到css、js文件问题的解决
搜了一些解决方案,发现很多人只贴一点代码,就说解决了.我照葫芦画瓢,却依然无法实现,这就导致我"既不知其然也不知其所以然".于是我研究了config/index.js的配置,摸索出 ...
webpack打包css和less文件
1. 前言 webpack是不能直接处理 css .less.图片等资源的,需要使用对应的 loader ,有关loader的介绍请查看这篇博客 webpack中的loader 2. 打包css文件 ...
【webpack】使用webpack打包图片文件、打包时生成单独的css文件
使用webpack打包图片文件在scr目录下创建image文件夹,并且添加几张图片在main.js使用import方式引入所有图片,并且append到app节点下 // 引入图片资源 import ...

(11/24) css进阶：Less文件的打包和分离

1.Less文件的打包处理

1.1 在src/index.html文件中新增一个标签，样式采用less编写。

1.2 在css目录下新建一个less文件，此处为black.less

1.3 在src目录下的entry.js中引入less文件

1.4 安装Less的服务

1.5 Less-loader安装

1.6 配置loader

1.7 打包+启动服务

2.分离Less文件

(11/24) css进阶：Less文件的打包和分离相关推荐

最新文章

热门文章