webpack的使用（js，css，image的打包）以及热更新

一丶webpack的安装（vscode环境下）

1. npm cache clean -f（清理缓存）
2. 安装npm install webpack -g
3. 下载到本地npm install --save-dev webpack
4. npm install webpack -cli -g（解决重复安装）
5. webpack a.js -o bundle.js（将a.js文件打包成bundle.js文件，它会自己创建bundle.js文件，多个js文件可以用import导入，将其他js文件export出来）
6. 或者利用webpack.config.js来进行打包。entry导入包名多个包的话用main1,2，3来区别，
   mode-development是开发模式（未压缩），mode-production的bundle.js文件是压缩了的。
   output里面path是建一个dist的文件夹，filename【name】是前面的多个mian文件名+【哈希码】每打包一次就不同，多个main1,2，3的哈希是相同的。
7. 
8. 第一步 npm install --save-dev html-webpack-plugin执行打包后 会自动生成和第二图test.html一样样式的dist下的bundle.js文件，
9. let HtmlWebpackPlugin = require(‘html-webpack-plugin’);
   //对象里面新增属性
   plugins: [new HtmlWebpackPlugin()]

第二步plugins-template是模板test.html，plugins-filename是新文件名字。

二丶打包css样式

1. 安装 npm install --save-dev css-loader 和npm install --save-dev style-loader（引入css需要下载的包）图三中导入css文件。

三丶热更新

1. 安装npm install --save -dev webpack-dev-server,然后在图一中配置module
2. 配置deServer端口号，npm init初始化package.json文件（图四）添加 start属性，
   在终端运行npm run start。