什么是前端工程化
开发项目直到上线,过程中集成的所有工具和技术。
案例:压缩前端html
需求:把回车符(\r)和换行符(\n)去掉后,写入新html文件中,步骤:
1. 读取源html文件内容
2. 正则替换字符串
写入到新的html文件中
执行方法:
/**
* 目标1:压缩 html 代码
* 需求:把回车符 \r,换行符 \n 去掉,写入到新 html 文件中
* 1.1 读取源 html 文件内容
* 1.2 正则替换字符串
* 1.3 写入到新的 html 文件中
*/
// 1.1 读取源 html 文件内容
const fs = require('fs')
const path = require('path')
fs.readFile(path.join(__dirname, 'public/index.html'), (err, data) => {
if (err) console.log(err)
else {
const htmlStr = data.toString()
// 1.2 正则替换字符串
const resultStr = htmlStr.replace(/[\r\n]/g, '')
console.log(resultStr)
// 1.3 写入到新的 html 文件中
fs.writeFile(path.join(__dirname, 'dist/index.html'), resultStr, err => {
if (err) console.log(err)
else console.log('写入成功')
})
}
})
效果:
Webpack
目前主流的前端工程化解决方案:
1. webpack
2. parcel
1. 什么是webpack
webpack是前端项目工程化的具体解决方案。
静态模块:指的是编写代码过程中的,html,css,js,图片等固定内容的文件
打包:把静态模块内容,压缩,整合,转译等(前端工程化)
1. 把 less / sass 转成 css 代码
2. 把 ES6+ 降级成 ES5
3. 支持多种模块标准语法
问题:为何不学 vite ?
因为:很多项目还是基于 Webpack 构建,并为 Vue,React 脚手架使用做铺垫!
2. webpack主要功能
它提供了友好的前端模块化开发,以及代码压缩混淆,处理浏览器端JavaScript的兼容性,性能优化等强大的功能。
目前Vue,React等项目,基本上都是基于webpack进行工程化开发的。
webpack是基于node.js开发出来的打包工具,因此在它的配置文件中,支持使用node.js相关的语法和模块进行webpack的个性化配置。
3. webpack的使用步骤
1. 在项目中安装webpack
npm install webpack@5.5.1 webpack-cli@4.2.0 -D(这些是项目开发阶段要用到的工具,项目上线时候就不再需要了)
2. 在项目中配置webpack
在项目根目录中,创建名为webpack.config.js的webpack配置文件,并初始化如下的基本配置。
module.exports={
mode: ‘development’
}
//mode用来指定构建模式。可选值有development(在开发阶段使用)和production(在项目发布阶段使用)
在package.json的scripts节点下,新增dev脚本
“scripts”:{
“dev”:”webpack”
}
//script节点下的脚本,可以通过npm run 执行。例如npm run dev,dev是自己取的名字,webpack是固定的
在终端运行npm run dev命令,启动webpack进行项目的打包构建
这时会执行webpack命令,读取webpack.config.js这个配置文件,拿到配置对象对项目进行打包和处理,生成dist文件夹,里面有main.js文件。从而把有兼容性的代码都转化成了没有兼容性的代码,放到了main.js当中。
4. webpack的入口和出口
1. webpack中有如下约定:
1. 默认的打包入口文件为src ->index.js
2. 默认的输出文件路径为dist ->main.js
注意:可以在webpack.config.js中修改打包的默认约定。
2. 自定义打包的入口和出口
在webpack.config.js配置文件中,通过entry节点指定打包的入口。通过output节点指定打包的出口。
3. 使用插件
通过安装和配置第三方的插件,可用拓展webpack的能力,从而让webpack用起来更方便。最常用的webpack插件有如下两个:
1. webpack-dev-server
类似于node.js阶段用到的nodemon工具
每次修改了源代码,webpack会自动进行项目的打包和构建。即,webpack-dev-server会启动一个实时打包的http服务器
1. 先npm i webpack-dev-serve
2. 修改package.json中script里面的dev命令
“scripts”:{
“dev”:”webpack serve”
}
3. 再次运行npm run dev命令,重新进行项目的打包
4. 在浏览器中访问http://localhost:8080地址,查看自动打包效果
那么,此时打包生成的文件去哪儿了?
自动打包生成的文件,并不在原先的dist文件夹里面。配置了webpack-dev-server之后,打包生成的文件存放到了内存中。不再根据output节点指定的路径,存放到实际的物理磁盘上。提高了实时打包输出的性能,因为内存比物理磁盘速度快很多。
生成到内存中的文件该如何访问呢?
webpack-dev-server生成到内存中的文件,默认放到了项目的根目录中,而且是虚拟的,不可见的。
<script src=”/main.js”></script> (/代表项目的根目录)
2. html-webpack-plugin
webpack中的HTML插件(类似于一个模板引擎插件)
可以通过此插件自定制index.html页面的内容
1. 先npm install html-webpack-plugin安装此插件
2. 配置html-webpack-plugin
//导入HTML插件,得到一个构造函数
const HtmlPlugin = require(‘html-webpack-Plugun’)
//创建HTML插件的实例对象
const htmlPlugin = new HtmlPlugin({
template:’./src/index.html’, //指定原文件路径
filename:’./index.html’, //指定生成的文件的存放路径
})
module.exports={
mode:’development’,
plugins:[htmlPlugin], //通过plugins节点,使htmlPlugin插件生效
}
通过HTML插件复制到项目根目录中的index.html页面,也被放到了内存中,HTML插件在生成的index.html页面的底部,自动注入了打包的main.js文件
在webpack.config.js配置文件中,可以通过devServer节点对webpack-dev-server插件进行更多的配置。
devServer:{
open: true, //初次打包完成后,自动打开浏览器
host: ’127.0.0.1’, //实时打包所使用的主机地址
port: 80, //实时打包所使用的端口号
}
5. loader加载器
webpack默认只能打包处理以.js后缀名结尾的模块
其他非.js后缀名结尾的模块,webpack默认处理不了,需要调用loader加载器才可以正常打包,否则会报错。
loader加载器的作用:协助webpack打包处理特定的文件模块。
例如:
1. css-loader
css-loader可以打包处理.css相关文件
// 1. npm i style-loader@2.0.0 css-loader@5.0.1 -D命令
// 2. 在webpack.config.js的module的rules数组中,添加规则
module:{
//所有第三方文件模块的匹配规则
//文件后缀名的匹配规则
rules:[
//用反斜线把“点”转义成真正的点号,use数组中指定的loader顺序是固定的,
多个loader的调用顺序是从后往前调用
{test:/\.css$/,use:[‘style-loader’,’css-loader’]}
]
}
2. style-loader
style-loader可以把解析后的css代码插入到DOM
3. less-loader
less-loader可以打包处理.less相关的文件
//1. 运行npm i less-loader@7.1.0 less@3.12.2 -D
//2. 在webpack.config.js的module的rules数组中,添加规则
module:{
rules:[
{test:/\.less$/,use:[‘style-loader’,’css-loader’,’less-loader’]},
]
}
4. url-loader
打包处理样式表中与url路径相关的文件(webpack5不用配置这个)
//1. 运行npm i url-loader@4.1.1 file-loader@6.2.0 -D
//2. 在webpack.config.js的module的rules数组中,添加规则
module:{
rules:[
{test:/\.jpg|png|gifs/,use:’url-loader?limit=22229’},
//?之后的是loader的参数项,limit用来指定图片的大小,单位是字节,只有小于等于limit大小的图片,才会被转为base64格式的图片。
]
}
module:{
rules:[
{
test:/\.jpg|png|gifs/,
use:{
loader:’url-loader’,
//通过options属性指定参数项
options:{
limit:22229
}
},
},
]
}
5. babel-loader
babel-loader可以打包处理webpack无法处理的高级JS语法
//1. npm i babel-loader@8.2.1 @babel/core@7.12.3 @babel/plugin-proposal-class-properties@7.12.1 -D
//2. 在webpack.config.js的module的rules数组中,添加规则
{
test:/\.js$/,
//exclude为排除项
//表示babel-loader只需处理开发者编写的js文件,不需要处理node_modules下的js文件
exclude:/mode_modules/,
use:{
loader:’babel-loader’,
options:{
//声明一个babel插件,此插件用来转化class中的高级语法
plugins:[‘babel/plugin-proposal-class-properties’],
},
},
}
6. 打包发布
1. 为什么要打包发布
1. 在开发环境下,打包生成的文件存放于内存中,无法获取到最终打包生成的文件
2. 开发环境下,打包生成的文件不会进行代码压缩和性能优化
2. 配置webpack的打包发布
在package.json文件的scripts节点下,新增build命令
“script”:{
“dev”:”webpack serve”, //开发环境中,运行dev命令
“build”:”webpack --mode production” //项目发布时,运行build命令
}
--mode指定的参数项,会覆盖webpack.config.js中的model选项
把JavaScript文件统一生成到js目录中
在webpack.config.js配置文件的output节点中,进行如下配置:
output:{
path:path.join(__dirname,’dist’)
//明确告诉webpack把生成的bundle.js文件存放到dist目录下的js子目录中
filename:’js/bundle.js’,
}
把图片文件统一生成到image目录中
{
test:/\.jpg|png|gifs/,
use:{
loader:’url-loader’,
options:{ //通过options属性指定参数项
limit:22229,
//明确指定把打包生成的图片文件,存储到dist目录下的image文件夹中
outputPath:’image’,
}
},
},
自动清理dist目录下的旧文件
为了在每次打包发布时自动清理掉dist目录中的旧文件,可以安装并配置clean-webpack-plugin插件:
//1. npm install clean-webpack-plugin@3.0.0 -D
//2. 按需导入插件,得到插件的构造函数之后,创建插件的实例对象
const { CleanWebpackPlugin } = require(‘clean-webpack-plugin’)
const cleanPlugin = new CleanWebpackPlugin()
//3. 把创建的cleanPlugin插件实例对象,挂载到plugins节点中
plugins:[htmlPlugin,cleanPlugin]
Source Map是一个信息文件,里面存储着位置信息。
Source Map文件中存储着代码压缩混淆前后的对应关系
Source Map文件中存储着压缩混淆后的代码所对应的转换前的位置
有了它,出错的时候,除错工具将直接显示原始代码,而不是转换后的代码,能够极大的方便后期的调试。
在开发环境中,webpack默认启用了Source Map功能。当程序出错时,可以直接在控制台提示错误行的位置,并定位到具体的源代码。
开发环境下默认生成的Source Map,记录的是生成之后的代码的位置。会导致运行时报错的行数与源代码的行数不一致。
在开发环境下,在webpack.config.js中添加如下的配置,即可保证运行时报错的行数与源代码的行数保持一致。
module.exports = {
mode:’development’,
//eval-source-map仅限在“开发模式”下使用,不建议在“生成模式”下使用,
//此选项生成的Source Map能够保证“运行时报错的行数”与“源代码的行数”保持一致
devtool:’eval-source-map’,
}
webpack生成环境下的Source Map
在生产环境下,如果省略了devtool选项,则最终生成的文件中不包含Source Map。这样能够防止原始代码通过Source Map的形式暴露给别有所图之人。
1. 只定位行数,不暴露源码
将devtool的值设置为nosources-source-map
2. 定位行数且暴露源码
将devtool的值设置为source-map
采取此选项后,应将服务器配置为,不允许普通用户访问source map文件
Source Map的最佳实践
1. 开发环境下
建议把devtool的值设置为eval-source-map
好处:可以精准定位到具体的错误行
2. 生产环境下
建议关闭Source Map或将devtool的值设置为nosources-source-map
好处:防止源码泄露,提高网站的安全性
3. 实际开发中,需要自己配置webpack吗?
不需要。实际开发中,会使用命令行工具,俗称cli,一键生成带有webpack的项目,所有webpack配置项都是现成的。