概念：前端项目工程化的具体解决方案

功能：代码压缩混淆、处理浏览器端Javascript 兼容性、性能优化

webpack构建
1、新建空目录，npm init -y 初始化包管理配置文件package.json

2、新建s r c源码目录

3、新建 src -> index.html首页 index.js 脚本文件

4、初始化首页基本结构

5、模块导入
① -S || --save 将引入的包记录到dependencies下。 dependencies -> 依赖关系 项目开发阶段需要使用上线部署也需要
② -D || --save-dev 将包引入到目录 devDependencies -> 开发依赖。 项目开发阶段需要使用，上线部署后不需要

webpack基本使用
1、导入npm install webpack@5.42.1 web pack-cli@4.7.2 -D

2、插件使用-配置loader加载文件
① Webpack-dev-server 自动构建插件
npm install html-webpack-plugin@5.3.2 -D
② 打包处理c s s文件

{ test: /\.css$/, use: ['style-loader', 'css-loader'] } ```
③ 打包处理less文件
``` npm i less-loader@10.0.1 less@4.1.1 -D
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']} ```
④ 配置图片加载loader
``` npm i url-loader@4.1.1 file-loader@6.2.0 -D
{ test: /\.jpg|.png|.gif$/, use: 'url-loader?limit=2999' }  // 只有<=limit大小的才会被转base64存储 ``` 
⑤ JavaScript高级语法需要借助babel-loader打包处理
``` npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D
// exclude指定排除项， 目录下的第三方包不需要被打包
{ test: /\.js$/, use: 'babel-loader', exclude: /node-modules/ } ```
⑥  解析装饰器的语法, 创建babel.config.js文件,设置babel配置
``` module.exports = {
    "plugins": [
      ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ]
  } ```