前端工程化是指遵守模块化、组件化、规范化、自动化实现的前端程序。
模块化: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:"输出文件名称"
}