关于WebPack

1. 入口起点：👉详情

2. 输出：👉详情

3. loader：👉详情

4. plugin：👉详情

5. 配置：👉详情

6. 模块：👉详情

7. 模块解析：👉详情

8. Module Federation：👉详情

9. 依赖图：👉详情

10. target：👉详情

11. manifest：👉详情

12. 模块热替换：👉详情

13. typescript相关配置：👉详情

14. 使用yarn安装webpack（参考👉详情）：
    yarn init
    yarn install webpack webpack-cli --save-dev
    yarn add lodash
    yarn webpack
    yarn webpack --config webpack.config.js
    yarn add script
    yarn run build

15. 管理资源：👉详情
    yarn add style-loader css-loader ；
    yarn run build ；
    yarn add csv-loader xml-loader ；
    yarn run build ；
    yarn add toml yamljs json5 ；
    yarn run build

16. 回退操作：👉详情
    yarn remove css-loader csv-loader json5 style-loader toml xml-loader yamljs

17. 管理输出：👉详情
    预先准备： yarn run build ；设置 HtmlWebpackPlugin：yarn add html-webpack-plugin yarn run build ；

18. 自动编译代码：👉详情
    （webpack-dev-server）

19. 代码分离：👉详情 （ yarn run build）

20. 如何配置webpack项目（使用yarn作为包管理器时）：👉参考资料

• 创建一个demo文件夹：mkdir demo；
• 进入文件夹：cd /demo；
• 安装 webpack配置（生成node_modules）：yarn add webpack-cli ；
• 安装webpack：yarn add webpack；
• 初始化项目（生成package.json文件）：yarn init -y ；
• 在src文件夹下面建立入口文件index.js和依赖文件dada.json；
• 开发环境下的打包（生成dist文件夹和main.js文件）：yarn webpack ./src/index.js -o ./dist/bundle --mode=development；
• 生产环境下的打包（生成dist文件夹和main.js文件）：yarn webpack ./src/index.js -o ./dist/bundle --mode=production。
  webpack默认可以处理js文件和json文件，生产环境比开发环境多了压缩代码和代码混淆。

21. 使用webpack项目基础配置完成打包：

• 前面步骤同上；
• 在demo文件夹下创建webpack.config.js文件，在该文件内进行基础配置；
• 再次打包（去除命令中的模式）
  

22. webpack项目配置loader完成样式打包：

• 前面步骤同上；
• 添加style-loader依赖（将样式内容的js插入style标签）：yarn add style-loader；
• 添加css-loader依赖（将css文件转换为js文件）：yarn add css-loader；
• 在webpack.config.js文件内配置style-loader和css-loader依赖；
• 再次进行打包即可
  

22. webpack项目配置插件完成打包：

• 前面步骤同上；
• 添加html-webpack-plugin依赖：yarn add html-webpack-plugin；
• 在webpack.config.js文件内配置html-webpack-plugin依赖（注意模板路径）；
• 再次打包（dist文件夹下多生成出一个index.html文件）
  

23. webpack项目打包图片资源：

• 前面步骤同上；
• 添加url-loader依赖：yarn add url-loader；
• 添加html-loader依赖：yarn add html-loader；
• 添加file-loader依赖：yarn add html-loader；
• 再次打包
  
  

25. webpack项目实现代码热更新：

• 前面步骤同上；
• 添加devServer依赖：yarn add webpack-dev-server；
• 再次打包
  
  

26. eject：
    使用react-scripts eject可将项目还原至未用webpack打包前的样子。

27. 使用webpack的缺点：
    若使用webpack后又使用了 eject命令进行还原或者直接使用框架自己的脚手架搭建项目，则在将项目所需的一些功能添加进去后，其脚手架内容升级时，其不会自动升级需手动更新，故维护起来较困难。

28. webpackAPI：👉详情

29. webpack手册：👉详情

30. 相关学习网站：
    
    
    
    
    

31. 啊这：

32. 啊这：