前端工程化(webpack)

前端工程化是指遵守模块化、组件化、规范化、自动化实现的前端程序。

模块化：js模块化、css模块化、资源的模块化。模块化是指这些代码可以复用。

组件化：复用ui结构、样式、行为。

规范化：按照具体的规范，进行开发程序。如代码缩进、目录资源划分等。

自动化：自动化构建、自动化部署、自动化测试。

webpack

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

功能：提供前端模块化的开发支持，代码压缩混淆，处理浏览器兼容性、性能优化等功能。

webpack使用

了解webpack之前，先了解npm，npm全程Node Package Manager,即node包管理器。是node.js默认的、以javascript编写的软件包管理系统。npm来分享和使用代码已经成为了前端的标配。

npm安装

通过官网安装node.js后，就自动安装了npm。以下都是在npm安装完成的基础上。

新建一个空白目录，然后在当前目录中启用cmd，运行npm -init -y命令，这样能初始化包管理器。生成一个package.json的文件。

在新建一个叫src的源代码目录。在该文件夹中新建index.html文件，初始化首页基本结构。

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

npm install webpack@5.42.1 webpack-cli@4.7.2 --save-dev

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

module.exports={
mode:"development"//mode用来构建模式，可选值有development(开发)和production（生产）
}

在package.json的script节点下，新增dev脚本：

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

在终端中运行npm run dev 命令，启动webpack进行项目打包构建。

这样，在项目根目录下，就会出现一个叫dist的文件夹，而这个文件夹就是通过webpack处理过后的文件。

那么，webpack怎么知道打包的是哪个文件呢？

在webpack4.x和5.x的版本中，有如下默认约定：

默认的打包入口为src\index.js

默认的输出文件路径为dist\main.js

当然，可以通过webpack.config.js配置文件中，通过entry节点指定打包入口，通过output节点指定打包出口。

module.exports={
entry:path.join(__dirname,"你想打包的出口路径"),
output:{
path:path.join(__dirname,"你想输出文件的存放路径"),
filename:"输出文件名称"
}