前言
首先我们先了解什么是前端工程化，再来看前端工程化的有哪些解决方案解决方案，其次了解webpack的基本使用及其常用插件。最后看看webpack是如何实现打包发布的，以及如何通过Source Map来帮助我们排错。
前端工程化
一、小白眼中的前端VS实际的前端开发
-
小白眼中的前端 只要会HTML、CSS、JavaScript就可以开发 想快速实现布局结构，layUI拿过来就成 想要操作DOM或者向服务器发送Ajax请求，拽个jQuery过来
-
实际上的前端开发
模块化(js的模块化、css的模块化、资源的模块化)组件化(复用现有的UI结构、样式、行为)规范化(目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理)自动化(自动化构建、自动部署、自动化测试)
二、什么是前端工程化
在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。
三、前端工程化的好处
前端开发自成体系，有一套标准的开发方案和流程。
四、前端工程化的解决方案
- 早期的前端工程化解决方案
grunt(
https://www.gruntjs.net/) gulp(https://www.gulpjs.com.cn/) - 目前主流的前端工程化解决方案
webpack(
https://www.webpackjs.com/) parcel(https://zh.parceljs.org/)
webpack
一、什么是webpack
1、概念
前端项目工程化的具体解决方案
2、 主要功能
能提供友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端JavaScript的兼容性、性能优化等强大的功能
3、好处
让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。·
二、webpack基本使用
1、在项目中安装webpack
npm install webpack@5.42.1 webpack-cli@4.7.2 -D
2、在项目中配置webpack
在文件根目录下新建 webpack.config.js文件，在文件中书写以下代码
module.exports = {
// 指定构建模式，有两个参数可选
// 开发阶段使用development,因为打包速度快
// 上线阶段使用production,因为项目上线需要文件体积小
mode:'development'
}
- mode节点可选值
- development
开发环境不会对打包生成的文件进行代码压缩和性能优化 打包速度快，适合开发阶段使用 - production
生产环境会对打包生成的文件进行代码压缩和性能优化 打包速度慢，仅适合项目发布阶段使用
- webpack.config.js文件的作用
webpack.config.js是webpack的配置文件。webpack在真正开始打包构建之前，会先读取这个配置文件，从而基于给定的配置，对项目进行打包。
注：由于webpack是基于node.js开发出来的打包工具,因此在它的配置文件中，支持使用node.js相关的语法和模块进行webpack的个性化配置。
在package.json的scripts节点下，新增 dev 脚本如下
"scripts":{
// npm run dev
"dev":"webpack"
}
在cmd终端中运行npm run dev,启动webpack进行项目的打包构建
3、webpack打包入口、出口
- 默认约定 在webpack 4.x 和 5.x 版本中，有如下的默认约定 ①默认的打包入口文件为 src -> index.js ②默认的输出文件路径为 dist -> main.js
- 自定义打包的入口与出口
在
webpack.config.js配置文件中，通过entry节点指定打包的入口。通过output节点指定打包的出口
const path = require('path')
module.exports = {
mode:'development',
//entry:'指定要处理哪个文件'
entry:path.join(__dirname,'src/xxx.js'),
//指定生成的文件要存放到哪里
output:{
//存放的目录
path: path.join(__dirname,'dist'),
//生成的文件名
filename: 'bundle.js'
}
}
- 问题：每次修改源代码，都需要在终端执行
npm run dev命令。十分的麻烦!
三、webpack中的插件
1、webpack插件的作用
通过安装和配置第三方的插件，可以拓展webpack的能力，从而让webpack用起来更方便。
2、常用的插件
- webpack-dev-server
- 作用 类似于node.js阶段用到的nodemon工具 每当修改了源代码，webpack会自动进行项目的打包和构建
- npm命令
终端中运行如下命令
npm install webpack-dev-server@3.11.2 -D - 配置
修改
package.json-> scripts中的 dev 命令中如下 再次运行npm run dev命令，重新进行项目的打包 在浏览器中访问http://localhost:8080查看打包效果
"scripts": {
"dev":"webpack serve"
}
注：生成的出口文件在根目录中，是保存在内存中的
- html-webpack-plugin
- 作用 webpack中的HTML插件 可以通过此插件自定制index.html页面的内容
- npm命令
终端中运行如下命令
npm install html-webpack-plugin@5.3.2 -D - 配置 在 webpack.config.js 文件中配置
//导入 html-webpack-plugin 这个插件，得到插件的构造函数
const HtmlPlugin = require('html-webpack-plugin')
//创建 html 插件的实例对象
const htmlPlugin = new HtmlPlugin({
//指定原文件的存放路径
template:'./src/index.html',
//指定生成的文件的存放路径
filename:'./index.html'
})
module.exports = {
mode:'development',
//通过 plugins 节点，是 htmlPlugin 生效
//插件的数组，将来 webpack 在运行时，会加载调用这些插件
plugins:[htmlPlugin]
}
注：会在 index.html 中自动注入一个script脚本
复制的index.html页面同样保存在内存中
3、devServer节点
在webpack.config.js中添加如下
devServer : {
//初次打包后自动打开浏览器
open:true，
//修改端口号
//在http协议中，如果端口号是80,则可以被省略
port:80,
//指定运行的主机地址
host:'127.0.0.1'
}
注：凡是修改了webpack.config.js配置文件，或修改了package.json配置文件，必须重启实时打包的服务器，否则最新的配置文件无法生效!
四、webpack中的loader(加载器)
在实际开发过程中，webpack默认只能打包处理以 .js 后缀名结尾的模块。其他非 .js 后缀名结尾的模块，webpack默认处理不了,需要调用loader加载器才可以正常打包，否则会报错!
1、loader加载器的作用
协助webpack打包处理特定的文件模块。
2、常用的loader加载器
- 打包处理css 文件(css-loader)
- npm命令
运行
npm i style-loader@3.0.0 css-loader@5.2.6 -D - 配置
在
webpack.config.js的module -> rules 数组中，添加 loader 规则如下
module:{
rules:[
//test是文件类型
//use表示对应要调用的loader
{test:/\.css$/,use:['style-loader','css-loader']}
]
}
注：use中的loader顺序是固定的，调用顺序从后往前调用。
- 打包处理less文件(less-loader)
- npm命令
运行
npm i less-loader@10.0.1 less@4.1.1 -D命令 - 配置
在
webpack.config.js的module -> rules 数组中，添加 loader 规则如下
module:{
rules:[
//文件后缀名的匹配规则
{test:/\.less$/,use:['style-loader','css-loader','less-loader']}
]
}
- 打包处理样式表中与url路径相关的文件（file-loader）
- npm命令
运行
npm i url-loader@4.1.1 file-loader@6.2.0 -D - 配置
在
webpack.config.js的module -> rules 数组中，添加 loader 规则如下
module:{
rules:[
//处理图片文件的loader
//如果需要调用的 loader 只有一个，则值传递一个字符串也行，如有多个loader
{test:/\.jpg|png|gif$/,use:'url-loader?limit-22229'}
]
}
其中 ? 之后的是loader的参数项：
limit用来指定**图片的大小**，单位是字节(byte)
只有 ≤ limit 大小的图片，才会被转为base64格式的图片
- 打包处理js文件中的高级语法(babel-loader)
- npm命令
运行
npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D - 配置 在 webpack.config.js 的module -> rules 数组中，添加 loader 规则如下
module:{
rules:[
//在配置babel-loader的时候，程序员只需要把自己的代码进行转换即可；一定要排除 node_modules目录中的js文件
{test:/\.js$/,use:'babel-loader',exclude:/node_modules/}
]
}
根目录新建babel.config.js,定义Babel的配置项如下:
module.exports = {
//声明babel可用的插件
plugins:[['@babel/plugin-proposal-decorators',{legacy:true}]]
}
打包发布
一、为什么要打包发布？
- 开发环境下，打包生成的文件存放于内存中，无法获取到最终打包生成的文件
- 开发环境下，打包生成的文件不会进行代码压缩和性能优化
二、配置 webpack的打包发布
在 package.json 文件的 scripts 节点下，新增build 命令如下：
"scripts":{
//开发环境中，运行 dev 命令
"dev":"webpack serve",
//项目发布时，运行build命令
"build":"webpack --mode production"
}
--model 是一个参数项，用来指定 webpack 的运行模式。production代表生产环境，会对打包生成的文件进行代码压缩和性能优化。
注：通过--model指定的参数项，会覆盖 webpack.config.js中的model选项
1、把JavaScript文件统一生成到js目录中
在webpack.config.js配置文件的output节点中，进行如下配置：
output: {
path: path.join(__dirname,'dist'),
// 明确告诉 webpack 把生成的 bundle.js 文件放到 dist 目录下的 js 子目录中
filename: 'js/bundle.js'
}
2、把图片文件统一生成到image目录中
修改 webpack.config.js中的 url-loader配置项，新增outputPath选项即可指定图片文件的输出路径：
{
test: /\.jpg|png|gif$/,
use: {
loader: 'url-loader',
options: {
limit: 22228,
// 明确指定把打包生成的图片文件，存储到 dist 目录下的image 文件夹中
outputPath: 'image'
}
}
}
3、自动清理dist目录下的旧文件
参考网址：https://www.npmjs.com/package/clean-webpack-plugin
Source Map
一、Source Map是什么?
就是一个信息文件，里面存储这位置信息。也就是说， Source Map文件中存储着压缩混淆后的代码，所对应的转换前的位置。
二、 如何使用？
- 开发环境下
推荐在
webpack.config.js中添加如下的配置，即可保证运行时报错的行数与源代码的行数保持一致
module.exports = {
mode:'development',
devtool:'eval-source-map'
}
- 生产环境下
如果省略了 devtool 选项，则最终生成的文件中不包含 Source Map。这能够防止原始代码通过 Source Map的形式暴露给别有所图之人。
或者将
devtool的值设置为nosources-source-map,这样只会定位出错行数，而不暴露源码。
补充
一、npm命令补充
- -S 是
--save的简写 明确告诉npm将第三方模块名称和版本号写在dependencies中 - -D是
--save-dev的简写 -D 明确告诉npm 将该文件放到devDependencies中 只在开发阶段需要用到,就使用 -D 将文件放到devDependencies中
二、使用 @ 表示src源代码目录
在 webpack.config.js中新增一个 resolve节点
resolve:{
alias:{
//告诉 webpack ,程序员写的代码中，@符号表示 src 这一层目录
'@':path.join(__dirname,'/src/')
}
}
总结
关于前端工程化的解决方案，Vue为我们提供了 Vue CLI脚手架工具，其基于 webpack 构建，并带有合理的默认配置。可以让我们更专注撰写应用上，而不用花费好几天的时间纠结配置的问题。最后给大家奉上Vue CLI官网地址https://cli.vuejs.org/zh/，今天就到这里，拜拜~
