webpack配置

1、初始化package.json文件

npm init -y

2、处理ES6语法

安装：npm i babel-loader babel-core babel-preset-es2015 babel-plugin-transform-runtime --save-devbabel：语法转化器（只转化关键字）babel-core：核心包babel-loader：babel与webpack结合就使用babel-loaderbabel-preset-es2015：提供预设（转化为ES5）babel-plugin-transform-runtime：转化ES6函数

3、处理css（倒序）

原理：通过style标签，动态创建css对象并插入安装：npm i style-loader css-loader autoprefixer-loader -Dcss-loader：核心包style-loader：生成script标签并插入autoprefixer-loader：添加前缀（解决兼容性问题）

4、编译less

安装：npm i less-loader less -Dless-loader：核心包

5、图片处理

安装：npm i url-loader file-loader -Durl-loader：核心包base64转化：    Buffer.from("javascript").toString("base64");    生成：。。。。。。    Buffer.from('。。。。。==','base64').toString('urf8');    生成：JavaScript

6、处理字体图标（MUI）

由于是直接引入.css,不用引用别的包但是css中引入了ttf文件，则需在图片处理的后面加入ttf即可

7、生成HTML文件

该插件依赖于webpack插件，首先安装webpack安装：webpack   webpack-html-plugin -D对应第二个插件：html-webpack-plugin

8、热加载

安装：npm i webpack-dev-sever -D

在package.json文件中配置

9、处理vue文件

安装：Vue-loader vue-template-compiler -D