简述webpack

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

功能：代码压缩混淆、处理浏览器端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 [email protected] web [email protected] -D

2、插件使用-配置loader加载文件
① Webpack-dev-server 自动构建插件
npm install [email protected] -D
② 打包处理c s s文件

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