是指：在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。 企业中的Vue项目和React项目都是基于工程化的方式进行开发的。 优点：前端开发自成体系，有一套标准的开发方案和流程。
目前主流的前端工程化解决方案：
概念：webpack是前端项目工程化的具体解决方案。
主要功能：提供了友好的前端模块化开发支持，以及代码压缩混淆（减小体积）、处理浏览器端JavaScript的兼容性（将高级的代码转换成低级的没有兼容问题的代码，有对应不同版本的解决方案）、性能优化等强大的功能。
优点：让程序员把工作的重心放在具体功能的实现上，提高了前端开发效率和项目的可维护性。 *目前Vue, React等前端项目，基本上都是基于webpack进行工程化开发的。
在终端运行如下的命令，安装webpack相关的两个包：
npm install [email protected] [email protected] -D
(1) 在项目根目录中，创建名为webpack.config.js的webpack配置文件，并初始化如下的基本配置：
// 使用node.js中的导出语法，向外导出一个webpack的配置对象
module.exports = {
// 代表webpack的运行模式，有 development 和 production
mode: 'development'
}
production模式（需要重新运行脚本）会把文件压缩（webpack的功能之一） 。体积减小，打包时间增长
*开发阶段使用development 追求打包速度快；发布上线阶段使用production 追求打包体积小
（2）在package.json的script节点下，新增dev脚本如下：
"scripts": {
"dev": "webpack"
},
script节点下的脚本，可以通过 npm run 执行 例如 npm run dev
此时真正执行的命令是 "webpack"
在运行webpack之前，会先读取根目录下webpack.config.js这个配置文件，拿到配置文件中向外导出的配置选项mode
（3）在终端中运行 npm run dev 命令，启动webpack进行项目的打包构建
1）development开发环境
不会对打包生成的文件进行代码压缩和性能优化;打包速度快，适合在开发阶段使用
2）production生产环境
会对打包生成的文件进行代码压缩和性能优化;打包速度很慢，仅适合在项目发布阶段使用
是webpack的配置文件。webpack在真正开始打包构建之前，会读取这个配置文件（拿到向外导出的配置选项），从而基于给定的配置，对项目进行打包。 注意：由于webpack是基于node.js开发出来的打包工具，因此在它的配置文件中，支持使用node.js相关的语法和模块进行webpack的个性化配置。
在webpack 4.x和5.x的版本中有如下默认约定： （1）默认的入口打包文件为 src -> index.js （没有会报错） （2）默认的输出文件路径为 dist -> main.js 注意：可以在webpack.config.js中修改打包的默认约定
在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'//输出文件的名称
}
}
__dirname代表当前文件的存放路径
<!-- <script src="./index.js"></script> -->
<!-- <script src="../dist/main.js"></script> -->
<script src="../dist/bundle.js"></script>
每次修改index.js需要重新npm run dev进行打包，页面才能展示修改后的内容，很麻烦，下面使用插件来解决
fs模块是Node.js官方提供的、用来操作文件的模块。它提供了一系列的方法和属性，用来满足用户对文件的操作需求。
如果要在JavaScript中使用fs模块需要先导入它：
const fs = require('fs')
使用fs..readFile()方法，可以读取指定文件中的内容：
fs.readFile(path[, options], callback)
以utf8的编码格式，读取指定文件的内容，并打印err和dataStr的值：
const fs = require('fs')
// 回调函数，拿到读取失败和成功的结果
err dataStrfs.readFile('./files/11.txt','utf8', function(err, dataStr) {
// 打印失败的结果
//如果读取成功，则err的值为null
//如果读取失败，则err 的值为错误对象，datastr的值为undefined
console.log(err)
console.log('----') // 打印成功的结果
console.log(dataStr)
})
可以判断err对象是否为null，从而判断文件读取的结果：
const fs = require('fs')
fs.readFile('./files/1.txt','utf8', function(err, dataStr){
if(err){
return console.log('读取文件失败！'+ err.message)
}
console.log('读取文件成功！'+ dataStr)
})
使用fs.writeFile0方法，可以向指定的文件中写入内容
fs.writeFile(file, data[,options], callback)
//1.导入fs文件系统模块
const fs = require('fs')
// 2.调用fs.writeFile(）方法，写入文件的内容
// 参数1：表示文件的存放路径
// 参数2：表示要写入的内容
// 参数3：回调函数
fs.writeFile('f:/files/2.txt', 'abcd', function(err){
//2.1如果文件写入成功，则err的值等于nul1
//2.2如果文件写入失败，则err的值等于一个错误对象
console.log(err)
})
// 1.导入fs 文件系统模块
const fs = require('fs')
fs.writeFile('f:/files/2.txt','abcd', function(err){
if (err){
return console.log('文件写入失败！'+err.message)
}
console.log('文件写入成功！')
})