打包##使用webpack进行工程化开发
1．需要在本地先全局安装webpack工具 window+R
cmdnpm install webpack@4 -g
npm install webpack-cli@3 -g
删除 npm remove webpack -g
查看版本 webpack -v
2．在当前项目终端中安装webpack
--在当前项目里面初始化一个包的描述文件
npm init -y
--再安装webpack和webpack-cli
npm install webpack@4 -D
npm install webpack-cli@3 -D
loader
loader:加载器，用来识别各种文件。
webpack默认只能处理js文件和json文件，如果要处理其他文件的话，需要引入对应的加载器。
识别css文件要两个加载器分别是：
https://www.webpackjs.com/loaders/css-loader/
https://www.webpackjs.com/loaders/style-loader/
这两个加载器是处理样式文件的，style-loader与css-loader必须结合使用
这时候得安装：
首先安装
npm install css-loader@3.4.2 -D
npm install style-loader@1.1.3 -D
在终端可以一起安装：npm install css-loader@3.4.2 npm install style-loader@1.1.3-D
plugins插件
plugins可以自动帮我们创建html文件
这需要安装npm install html-webpack-plugin@3.2.0 -D
这个插件和loader不太一样
loader安装好直接使用
这个插件需要引入
第一步先安装好如图
然后引入plugins插件
也可以指定一个html文件，作为页面模板被创建。
先创建上图public文件夹
然后在插件中指定html文件夹作为模板
如下图：
这样的好处是不需要我们自己创建html文件
file-loader
处理图片格式的文件
先安装
npm install file-loader@5.0.2 -D
url-loader
也是用来处理图片的
他可以限制图片的大小
终端安装
npm install url-loader@3.0.0 -D
把图片打包给index.html里
大图片要整体打包过去，小图片没有必要整体导入
如果你的图片通过src引入，每张图片都要去发请求返回的，
小图片没有必要发请求，把小图片压缩成base64编码
没有必要把所有图片参与打包
有些小图片可以把图片文件本身转成base64编码，以后大图片发送请求，小图片嵌在标签里面就行了
这时候用下面图片的方法就不行了
需要换url-loader
url-loader可以限制图片的大小
