webpack介绍和基本配置

1. webpack是一种前端资源构建工具，静态模块打包工具。更具模块的依赖关系进行静态分析，打包生成静态资源。

2. web pack五个核心概念：
   a) Entry：入口（entry）指示webpack以那个文件为入口为起点开始打包
   b) Output：输出（output）指示webpack打包后的资源bundle输出到哪，如何命名
   c) Loader：Loader让webpack能够去处理那些非JavaScript文件（下载，配置loader）
   d) Plugins：插件（plugins）可以用于执行范围更广的任务（下载，引入，使用new实例）
   e) Mode：模式（mode）指示webpack使用相应的模式的配置

3. Webpack基本使用：
   

4. Webpack打包样式资源（利用css/style-loader加载资源，配置loader）
   

5. Webpack打包Html资源-插件
   
   

6. webpack打包图片资源
   

7. webpack打包其他资源
   

8. dev-Server:注webpack5后没有contenBase =>static: {directory:路径 },
   

9. 开发环境的基本配置
   可以在每个资源loader下设置每个资源的打包位置
   

10. 生产环境下提取css文件
    利用mini-css-extract-plugin插件单独提取css文件，添加loader
    

11. css兼容性处理

12. Js兼容处理（使用2直接js文件import，2和3不能同时使用）
    

13. 压缩css-plugin
    

14. Js压缩（只需将mode改为生产环境production）

15. Html压缩（在打包html插件配置）
    

16. Js语法检查