初识webpack

实际前端开发应遵守：

• 模块化（js的模块化（把可复用的js方法或者功能抽取出来形成一个独立的js文件）、css的模块化、资源的模块化）
• 组件化（复用现有的U I结构、样式、行为）
• 规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、git分支管理）
• 自动化（自动化构建、自动部署、自动化测试）

什么是前端工程化？

前端工程化是指在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。

目前主流的前端工程化解决方案：

• webpack（https://www.webpackjs.com/）
• parcel (http://zh.parceljs.org/)

什么是webpack？

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

主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器Javascript的兼容性、性能优化等强大的功能。提高了前端开发效率和项目的可维护性。

在项目中安装webpack  (npmjs.com)

在终端运行如下的命令，安装webpack相关的两个包：

npm install webpack@5.42.1 webpack-cli@4.7.2 -D

命令以-D（--save -dev）结尾,这两个包会被记录在package.json文件下的devDependencies中，表示这个包只用于开发生产时使用。

以-S(--save)为后缀的命令表示包会被记录在package.json文件下的dependencies中，表示这个包用于开发生产和项目上线后。

webpack的基本使用

1. 在项目根目录中，创建名为webpack.config.js的webpack配置文件，并初始化如下的基本配置：

moudle.export={
mode:'development'}
//用来指定构建模式，可选值有development和production。

     mode节点的可选值有两个，分别是：

•   development   开发环境，不会对打包生成的文件进行代码压缩和性能优化；打包速度快，适合在开发阶段使用。
•    production     生产环境，会对打包生成的文件进行代码压缩和性能优化；打包速度很慢，仅适合在项目的发布阶段使用。

      2.在package.json的scripts节点下，新增dev脚本如下：

"scripts" :{
"dev": "webpack"  
//script节点下的脚本，可以通过 npm run执行，例如：npm run dev
}

       3.在终端运行 npm run dev 命令，启动webpack进行项目的打包构建。在目录中生成了。  一个dist文件夹，里面有一个mian.js，将这个js文件引入到html页面内，便可解决兼容性问题。