小炒Webpack

105 阅读1分钟

webpack 是前端项目工程化的具体解决方案

主要功能:它提供了友好的前端模块化开发支持,以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性、性能优化等强大的功能。
好处:让程序员把工作的重心放到具体功能的实现上,提高了前端开发效率和项目的可维护性。 注意:目前Vue,React 等前端项目,基本上都是基于webpack 进行工程化开发的。

  1. 在项目中安装 webpack npm install webpack@5.42.1 webpack-cli@4.7.2 -D
  2. 配置webpack

image.png 3. mode 的可选:

image.png
4. 打包出入口:

image.png 5. webpack插件及其作用

image.png
webpake-dev-server具体情况:

image.png

image.png

image.png
html-webpack-plugin具体情况:

image.png 6. devServer节点

image.png 7. webpacke中的loader

image.png

image.png

image.png

image.png

image.png

image.png 8. 打包发布

image.png

image.png

image.png

image.png 9.Source Map

image.png 10.总结

image.png