前端知识11：webpack 打包less或者sass资源

因为css知识单纯的属性描述 它并不具有变量 条件语句等。css的特性导致了它难组织和维护。

sass和less都属于css的预处理器。定义了一种新的语言。其基本思想是用另外一种专门的编程语言，为css增加一些编程的特性，将css作为目标生成文件，然后开发者使用这种语言进行css编码工作
less需要使用npm下载less-loader包 这个包将less编译为css
sass需要使用npm下载sass-loader包 这个包将sass编译为css

less-loader举例：
下载 npm i less-loader -D

html:

box2

index.js引入：
require("…/lessstyle.less")
创建lessstyle.less文件

//声明变量
@width:200px;
@height:200px;
@color:red;

#box2{
width:@width;
height:@height;
color:green;
background:@color
}

webpack.config.js配置：
const {resolve} = require(‘path’);
const htmlWebpackPlugin=require(‘html-webpack-plugin’);
module.exports={
mode:“development”,
//如果只有一个入口 使用字符串配置即可，打包后就会只有一个chunk和bundle chunk是默认的
//如果多个入口所有的入口形成一个chunk名称是默认的 chunk最终的输出也会是一个bundle
//混合写法如下：
//
entry:{
vendor:["./src/js/jquery.js","./src/js/common.js"],
index:"./src/js/index.js",
cart:"./src/js/cart.js"
},
“output”:{//输出的目录
filename:"[name].js", //输出的文件
path:resolve(__dirname,