webpack

文章目录
说明
一、安装
二、使用
1.创建按钮工具类
2.使用css样式
3.使用less样式
4.加载imgage图片

webpack说明：用于框架的打包工具， 从一个或者多个入口开始将依赖的资源打包成一个或者多个资源包。

一、安装
npm init -y 创建库 创建src和(index.js)和index.html

npm install webpack webpack-cli --save-dev 安装webpack

node ./src/index.js 运行 可以改造package.json 例：“build”: "webpack " npm run build来运行

修改index.html中引入

二、使用
1.创建按钮工具类
src中创建utils文件，中创建createbutton.js文档进行编写 工具类 用于创建按钮并在index.js中创建按钮

export function createButton(text, clickCallBack) {

let button = document.createElement("button");

button.innerText = text;

button.onclick = clickCallBack;

document.body.appendChild(button);

}

在src同级创建webpack.config.js文档

错误:(You may need an appropriate loader to handle this file type
你需要一个加载器 loader 来处理当前类型的文件)

2.使用css样式
安装npm install style-loader -D和npm install css-loader -D，并在webpack.config.js中写入modul

{
test: /.css$/i, //指明 css文件后缀
// 将css文件经过css-loader 加载 在转交style-loader
use: [‘style-loader’, ‘css-loader’],
},
3.使用less
安装npm install less less-loader --save-dev并在webpack.config.js的modul中写入样式

{
test: /.lessKaTeX parse error: Expected 'EOF', got '}' at position 208: …], }̲, 4.加载imgage图片 …/i,
type: ‘asset/resource’,
}
5.若加载font字体同样无需安装， 直接引入即可

动态导入
(1. 在html去除需要动态导入的引入
2. 在打包入口文件中去除需要动态导入的入口文件
3. 使用时使用import(位置).then())