前端工程化与webpack

---

一、前端工程化

• 模块化：(js的模块化、css 的模块化、资源的模块化)
• 组件化：(复用现有的UI结构、样式、行为)
• 规范化：(目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理)
• 自动化：(自动化构建、自动部署、自动化测试)

早期的前端工程化解决方案：grunt、gulp
目前主流的前端工程化解决方案：webpack、parcel

二、webpack的基本使用

1. 什么是webpack

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

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

好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。

2. 在项目中安装webpack

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

npm install webpack@5. 42.1 webpack-cli@4.7.2 --save-dev

-S是–save的简写
-D是–save-dev的简写，用于开发阶段

3. 在项目中配置webpack

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

module.exports = {
	mode: 'development'//mode 用来指定构建模式。可选值有 development 和 production
	//开发用 development 速度快，体积大；发布用 production 速度慢，体积小；
}

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

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

3. 在终端中运行npm run dev命令，启动Webpack进行项目的打包构建

4. 自定义打包的入口与出口

在webpack.config.js配置文件中，通过entry节点指定打包的入口。通过output节点指定打包的出口。
示例代码如下:

const path = require('path') //导入node.js 中专门操作路径的模块
module.exports = {
	entry: path.join(__dirname, './src/index.js'), //打包入口文件的路径
	output: {
		path: path.join(__dirname, './dist'), //输出文件的存放路径
		filename: 'bundle.js' //输出文件的名称
	}
}