webpack是用来做什么的？它的2个作用

1.webpack是什么？

是一个模块化打包工具，将不同的资源和文件，进行打包，合并在一个文件里。

2.作用

（1）重新加载编译，将浏览器不认识的语法编译成浏览器认识的语法。less编译成css,ES6语法转换成ES5。

（2）减少io请求。发送请求，会发挥一个html到浏览器，这是，打开控制台会发现html页面通过script,link等标签引用的静态，浏览器会再次发出请求去获取这些资源。如何webpack打包，将所有的静态资源都合并好了，减少了io请求。

 webpack使用 步骤

1.安装 webpack   

npm install webpack webpack-cli --save-dev

2.安装 生产html文件包

npm install html-webpack-pulgin --save-dev

安装同步代码serve包 + 配置package.json （时刻指向最新的代码文件）

npm install webpack-dev-server --save-dev

webpack文件代码如下

 

package.json代码如下

 注意： dev-server并不会生产真正的打包文件，是将打包生产的文件放在一个内存中

安装兼容es6包

npm install @babel/core @babel/preset-env babel-Loader --save-dev

创建一个根目录文件（代码如下）

 webpack文件代码如下