代码示例
webpack.config.js
// 引入 path 为了使用 join 方法
const path = require('path')
// webpack 插件
// clean-webpack-plugin - 清理之前编译过的文件
// 1. 引入插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// 2. 创建插件对象 - 然后再配置信息对象里使用
const cleanPlugin = new CleanWebpackPlugin()
// webpack-dev-server 打开开发的服务器并把服务器编译好的内容到服务器中
// 当我们改变代码的时候，浏览器中页面会自动刷新，页面属于运行在服务器中
// 1. 在 package.json 中设置一个简易命令 例如："serve": "webpack serve"
// 2. 在命令行中执行 serve 命令 nom run serve
// 3. 命令输入完后，会返回一个url,通过那里打开
// 4. 注意：使用插件后，所有编译的内容都在内存中，通过路径访问文件时，统一在根目录/文件名
// html-webpack-plugin 编译html，自动引入 js 文件
// 1. 引入插件
const HtmlPlugin = require('html-webpack-plugin')
// 2. 创建插件对象
const html = new HtmlPlugin({
// 编译哪个 html
template: path.join(__dirname, 'public', 'index.html'),
// 编译后，html文件名是什么
filename: 'index.html'
})
// 作用，声明 webpack 配置信息
module.exports = {
// 能看到正确的报错位置，但是可以通过浏览器看到源码 - 开发中使用
devtool: 'source-map',
// 能看到正确的报错位置，但是无法通过浏览器看到源码 - 生产中使用
devtool: 'nosources-source-map',
// mode 声明打包方式
// development 开发环境 - 开发时
// production 生产环境 - 上线运行时
mode: 'development',
// 入口文件
entry: './src/index.js',
// 出口文件(打包后的文件路径和文件名)
output: {
// 指定打包好的文件 文件夹名称 - 打包到当前绝对路径下的 dist 文件夹中
path: path.join(__dirname, 'dist'),
// 打包后的文件名称
filename: 'index.js',
// 设置资源文件输出路径
assetModuleFilename: 'images/[name][ext]'
},
// 3. 声明插件数组，在数组中放入船舰的插件对象
plugins: [cleanPlugin, html],
// 修改开发服务器端口号
devServer: {
// 端口号
port: 3000,
// 运行完是否自动打开网页
open: true
},
// loader npm i style-loader css-loader less-loader url-loader -D
module: {
rules: [
// 一个对象代表一个文件类型的 loader
{
// 声明要处理的文件格式
test: /\.css$/, // 匹配所有的 .css文件
// 用什么 loader 处理这个类型的文件
use: ['style-loader', 'css-loader']
},
// less loader 处理 less 文件
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
},
// // 处理图片- 适合用在 webpack5 版本以前 设置以下配置 - 图片可以在 js 和 css 中使用
// {
// // 识别的图片类型
// test: /\.(jpg|png|gif)$/,
// // limit 用来指定图片的大小，单位是字节（byte）
// // 只有 ≤ limit 大小的图片，才会被转为 base64 格式的图片；> limit的图片直接使用图片文件。
// // outputPath 输出路径
// // 写法一
// // use: 'url-loader?limit=23500&outputPath=images',
// // 写法二
// loader: 'url-loader',
// options: {
// limit : 235000,
// outputPath: 'images',
// // 文件生成的名称
// // [name] 原文件名 - [ext] 拓展名 - [hash:8] 哈希值前八位
// name: '[name].[ext]',
// // 这一项是用来在css中使用图片
// esModule: false
// },
// // 这一项是用来在css中使用图片
// type: 'javascript/auto'
// },
// 处理图片- 适合用在 webpack5 版本及以后版本 设置以下配置 - 图片可以在 js 和 css 中使用
{
// asset
test: /\.(png|gif|jpg)$/,
type: 'asset'
},
// 处理图片 - 图片可以在 html 中使用
// html-loader 需要提前 npm i html-loader -D
{
test: /\.html$/,
use: 'html-loader'
},
// 处理 js 高级语法
{
test: /\.js$/,
use: 'babel-loader',
// 排除 node_modules 文件
exclude: /node_modules/
}
]
}
}
package.json
{
"name": "code",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode production",
"serve": "webpack serve"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"jquery": "^3.6.0"
},
"devDependencies": {
"@babel/core": "^7.15.8",
"@babel/plugin-proposal-decorators": "^7.15.8",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^4.0.0",
"css-loader": "^6.4.0",
"file-loader": "^6.2.0",
"html-loader": "^4.1.0",
"html-webpack-plugin": "^5.3.2",
"less": "^4.1.2",
"less-loader": "^10.1.0",
"style-loader": "^3.3.0",
"url-loader": "^4.1.1",
"webpack": "^5.58.2",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.3.1"
}
}
前端工程化
前端小白眼中的前端开发 vs 实际的前端开发
-
前端小白眼中的前端开发：
- ① 会写 HTML + CSS + JavaScript 就是合格的前端程序员
- ② 东拼西凑，不成体系
-
实际的前端开发（四个现代化）：
- ① 模块化（js 的模块化、css 的模块化、资源的模块化）
- ② 组件化（复用现有的 UI 结构、样式、行为）
- ③ 规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、 Git 分支管理）
- ④ 自动化（自动化构建、自动部署、自动化测试）
什么是前端工程化
- 概念
- 以模块化、组件化、规范化、自动化为基础，进项前端项目开发的方式，叫做前端工程化
- 为什么进行工程化
- 工程化提供了一套标准的开发方案和流程，让前端开发自成体系
注意： 企业中的 Vue 和 React 项目，都是基于工程化的方式进行开发的 前端工程化
前端工程化的解决方案
- 早期的前端工程化解决方案：
- grunt（ https://www.gruntjs.net/ ）
- gulp（ https://www.gulpjs.com.cn/ ）
- 目前主流的前端工程化解决方案：
- webpack（ https://www.webpackjs.com/ ）
- parcel（ https://zh.parceljs.org/ ）
webpack 的基本概念
什么是 webpack
webpack 是前端项目工程化的具体解决方案。
为什么要学习 webpack
webpack 让前端开发变得更高效
① 代码压缩混淆
② 处理浏览器端 JavaScript 的兼容性
③ 以模块化的方式处理项目中的资源
注意：目前绝大部分的 Vue/React 等前端项目，都是基于 webpack 进行工程化开发的。
安装全部所需的包
目的：一次性把今天所需的包全部安装好。
# 切换镜像源
nrm use taobao
# 初始化
npm init
# 安装项目依赖包
npm install jquery
# 安装项目开发依赖包
npm install webpack@5.58.2 webpack-cli@4.9.0 clean-webpack-plugin@4.0.0 webpack-dev-server@4.3.1 html-webpack-plugin@5.3.2 style-loader@3.3.0 css-loader@6.4.0 less-loader@10.1.0 less@4.1.2 url-loader@4.1.1 file-loader@6.2.0 babel-loader@8.2.2 @babel/core@7.15.8 @babel/plugin-proposal-decorators@7.15.8 -D
webpack 的基本使用
创建列表隔行变色项目
目的：以模块化的方式实现列表隔行变色的项目，为 webpack 的学习做准备。
具体步骤：
① 在项目目录中，新建 src 源代码目录
② 在项目目录中，新建public 静态资源目录
③ src目录中创建index.js
④ public目录中创建index.html，引入index.js
⑤ 初始化首页基本的结构（创建ul>li这样的结构）
⑥ 通过 ES6 模块化的方式导入 jQuery，实现列表隔行变色效果
import $ from 'jquery';
$(function () {
$('li:odd').css('background-color', '#ccffcc');
$('li:even').css('background-color', '#ffccff');
})
分析项目中遇到的问题
- 报错的原因：
- 浏览器对 ES6+ 高级语法支持的不好，有兼容性问题
- 如何解决：
- 在开发的时候，让程序员尽可能 “写得爽”
- 在运行的时候，让浏览器不出现“兼容性问题”
- 具体方案：
- 在项目中安装和配置 webpack，对 JS 代码进行降级处理
安装和配置webpack
目标：
- 通过 webpack 处理 JS 代码的兼容性问题
- 了解 webpack 的基本配置步骤。
安装 webpack 相关的两个包： webpack@5.58.2 和 webpack-cli@4.9.0 （前面已经统一安装过了）
① 在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件，并初始化如下的基本配置：
module.exports = {
// 打包模式
mode: 'development', // production：生成 development：开发
}
② 在 package.json 的 scripts 节点下，新增 dev 脚本如下：
"scripts": {
"dev": "webpack"
},
③ 在终端中运行 npm run dev 命令，启动 webpack 进行项目的打包构建
打包结果
执行 npm run dev 命令后，会在项目根目录生成 dist文件夹，并在 dist 文件夹中生成 main.js
main.js 就是 jquery.js 和 index.js 的结合体。
index.html 中引入 main.js ，再看效果。
mode 的可选值
目标：清楚每个 mode 值的作用，知道每个值的具体应用场景。
mode 节点的可选值有两个，分别是：
① development
- 开发环境
- 不会对打包生成的文件进行代码压缩和性能优化
- 打包速度快，适合在开发阶段使用
② production
- 生产环境
- 会对打包生成的文件进行代码压缩和性能优化
- 打包速度很慢，仅适合在项目发布阶段使用
webpack.config.js的作用
webpack.config.js是什么
- webpack.config.js 是 webpack 的配置文件。
作用
- 告诉 webpack 怎么对项目进行打包。
被读取的时机
- npm run dev 的时候（打包的时候），会先读取配置文件，再对项目进行打包处理。
webpack 中的默认约定
在 webpack 4.x 和 5.x 的版本中，有如下的默认约定：
① 默认的打包入口文件为 src -> index.js
② 默认的输出文件路径为 dist -> main.js
注意：可以在 webpack.config.js 中修改打包的默认约定
自定义打包的入口与出口
在 webpack.config.js 配置文件中，通过 entry 节点指定打包的入口。通过 output 节点指定打包的出口。
示例代码如下：
const { join } = require('path');
module.exports = {
// 打包模式
mode: 'development', // production：生成 development：开发
// 入口文件
entry: join(__dirname, 'src', 'index.js'),
// 出口文件
output: {
path: join(__dirname, 'dist'), // 要使用绝对路径，否则报错
filename: 'bundle.js',
}
}
重新运行 npm run dev ，即可得到新的打包结果 bundle.js .
index.html 中引入新的打包结果 bundle.js。
webpack 中的插件
概述
webpack 插件的作用
通过安装和配置第三方的插件，可以拓展 webpack 的能力，从而让 webpack 用起来更方便。
最常用的 webpack 插件有如下3个：
① clean-webpack-plugin
- 每次打包时，自动清理 dist 目录
② webpack-dev-server
- 类似于 node.js 阶段用到的 nodemon 工具
- 每当修改了源代码，webpack 会自动进行项目的打包和构建
③ html-webpack-plugin
- webpack 中的 HTML 插件
- 可以通过此插件自定制 index.html 页面的内容
clean-webpack-plugin
作用：每次打包构建的时候，自动清理 dist 目录下的旧文件，保证 dist 目录的代码是最新的。
安装依赖包：clean-webpack-plugin@4.0.0 （前面已经统一安装过）
在 webpack.config.js 中增加配置：
// 1. 配置自动清理插件（在打包的时候，插件就会自动清理 dist 中没用的文件）
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const cleanPlugin = new CleanWebpackPlugin();
module.exports = {
mode: 'development',
// 其他项省略......
// 插件配置
plugins: [ cleanPlugin ]
}
重新运行 npm run dev ，即可将 dist 文件夹中没用的文件清理掉.
webpack-dev-server
基本使用
作用：可以让 webpack 监听项目源代码的变化，从而进行自动打包构建。
安装包 webpack-dev-server@4.3.1（前面已经统一安装过）
配置 webpack-dev-server
① 修改 package.json -> scripts 中的 dev 命令如下：
"scripts": {
"dev": "webpack serve" // 注意这里是 serve ，不是 server
},
② 在 webpack.config.js 配置文件中，增加 devServer 节点对 webpack-dev-server 插件进行更多的配置
devServer: {
port: 9000, // 实时打包所用的端口号
open: true // 初次打包完成后，自动打开浏览器
}
③ 再次运行 npm run dev 命令，重新进行项目的打包
④ 在浏览器中访问 http://localhost:8080 地址，查看自动打包效果
注意：凡是修改了 webpack.config.js 配置文件，或修改了 package.json 配置文件，必须重启实时打包的服务器，否则最新的配置文件无法生效！
打包生成的文件哪儿去了？
① 不配置 webpack-dev-server 的情况下，webpack 打包生成的文件，会存放到实际的物理磁盘上
-
严格遵守开发者在 webpack.config.js 中指定配置
-
根据 output 节点指定路径进行存放
② 配置了 webpack-dev-server 之后，打包生成的文件存放到了内存中
-
不再根据 output 节点指定的路径，存放到实际的物理磁盘上
-
提高了实时打包输出的性能，因为内存比物理磁盘速度快很多
生成到内存中的文件该如何访问？
- webpack-dev-server 生成到内存中的文件，默认放到了项目的根目录中，而且是虚拟的、不可见的。
- 可以直接用 / 表示项目根目录，后面跟上要访问的文件名称，即可访问内存中的文件
- 例如 /bundle.js 就表示要访问 webpack-dev-server 生成到内存中的 bundle.js 文件
所以，index.html 中应该这样引入js <script src="/bundle.js"></script>
html-webpack-plugin
html-webpack-plugin 是 webpack 中的 HTML 插件。
作用：自动把生成好的 bundle.js 注入到 HTML 页面中。
安装包 html-webpack-plugin@5.3.2 （前面已经统一安装过）
在webpack.config.js中配置 html-webpack-plugin
const HtmlPlugin = require('html-webpack-plugin');
const htmlPlugin = new HtmlPlugin({
template: path.join(__dirname, 'public', 'index.html'), // public中，你的html叫什么
filename: 'index.html' // 打包后的html叫什么（这个文件会生成到dist文件夹）
});
module.exports = {
mode: 'development',
// 其他项省略......
// 插件配置
plugins: [ cleanPlugin, htmlPlugin ]
}
其他说明：
① 通过 HTML 插件复制到项目根目录中的 index.html 页面，也被放到了内存中，所以看不到
② HTML 插件在生成的 index.html 页面，自动注入了打包的 bundle.js 文件
webpack 中的 loader
loader 概述
loader加载器有什么用？
- 在实际开发过程中，webpack 默认只能打包处理以 .js 后缀名结尾的模块。
- 其他非 .js 后缀名结尾的模块， webpack 默认处理不了
- 需要调用 loader 加载器才可以正常打包非 js 文件，否则会报错！
所以，loader 加载器的作用是协助 webpack 打包处理特定的文件模块。比如：
- css-loader 可以打包处理 .css 相关的文件
- less-loader 可以打包处理 .less 相关的文件
- babel-loader 可以打包处理 webpack 无法处理的高级 JS 语法
loader 的调用过程
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7CXnpKq0-1660726620410)(C:\Users\hp\Desktop\02-案例-资料-笔记\02-案例-资料-笔记\NodeJS资料\项目前置课-05\webpack文档\md-imgs\image-20211224205337478.png)]
打包处理 css 文件
① 安装包 style-loader@3.3.0 和 css-loader@6.4.0 （前面已经统一安装过）
② 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：
module.exports = {
mode: 'development',
// 其他项省略......
module: {
rules: [
// 处理css文件
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
]
}
}
其中，test 表示匹配的文件类型， use 表示对应要调用的 loader
注意：
- use 数组中指定的 loader 顺序是固定的
- 多个 loader 的调用顺序是：从后往前调用
打包处理 less 文件
① 安装 less-loader@10.1.0 和 less@4.1.2（前面已经安装过）
② 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：
module.exports = {
mode: 'development',
// 其他项省略......
module: {
rules: [
// 处理css文件
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
// 处理less文件
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
]
}
}
打包处理与 url 路径相关的文件
① 安装 url-loader@4.1.1和 file-loader@6.2.0（前面已经统一安装过）
② 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：
module.exports = {
mode: 'development',
// 其他项省略......
module: {
rules: [
// 处理css文件
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
// 处理less文件
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
// 处理图片文件
{ test: /\.(jpg|png|gif)$/, use: 'url-loader?limit=6055&outputPath=images' },
]
}
}
其中 ? 之后的是 loader 的参数项：
-
limit 用来指定图片的大小，单位是字节（byte）
-
只有 ≤ limit 大小的图片，才会被转为 base64 格式的图片；> limit的图片直接使用图片文件。
打包处理 js 文件中的高级语法
webpack 只能打包处理一部分高级的 JavaScript 语法。对于那些 webpack 无法处理的高级 js 语法，需要借 助于 babel-loader 进行打包处理。
例如 webpack 无法处理下面的 JavaScript 代码：
// js装饰器
function info(target) {
target.abc = '哈哈哈哈哈哈哈，这是新语法';
}
// 下面的语法，表示给Person加了一个abc属性
@info
class Person { }
consle.log(Person.abc);
安装 babel-loader 相关的包 babel-loader@8.2.2 和 @babel/core@7.15.8 和 @babel/plugin-proposal-decorators@7.15.8 （前面已经统一安装过）
在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：
module.exports = {
mode: 'development',
// 其他项省略......
module: {
rules: [
// 处理css文件
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
// 处理less文件
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
// 处理图片文件
{ test: /\.(jpg|png|gif)$/, use: 'url-loader?limit=6055&outputPath=images' },
// .js 文件使用 babel-loader去处理。但是不要处理 node_moduels文件夹中的第三方模块
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
]
}
}
配置 babel-loader
在项目根目录下，创建名为 babel.config.js 的配置文件，定义 Babel 的配置项如下：
module.exports = {
// 声明 babel 可用的插件
plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]]
}
打包发布
为什么要打包发布
项目开发完成之后，需要使用 webpack 对项目进行打包发布，主要原因有以下两点：
① 开发环境下，打包生成的文件存放于内存中，无法获取到最终打包生成的文件
② 开发环境下，打包生成的文件不会进行代码压缩和性能优化
为了让项目能够在生产环境中高性能的运行，因此需要对项目进行打包发布。
配置 webpack 的打包发布
在 package.json 文件的 scripts 节点下，新增 build 命令如下：
"scripts": {
"dev": "webpack serve",
"build": "webpack --mode production"
},
- –model 是一个参数项，用来指定 webpack 的运行模式。
- production 代表生产环境，会对打包生成的文件 进行代码压缩和性能优化。
注意：通过 --model 指定的参数项，会覆盖 webpack.config.js 中的 model 选项。
把 JavaScript 文件统一生成到 js 目录中
-
在 webpack.config.js 配置文件的 output 节点中，进行如下的配置：
output: { path: path.join(__dirname, 'dist'), filename: 'js/bundle.js', // 这里加入 js 文件夹。 },
把图片文件统一生成到 image 目录中
-
修改 webpack.config.js 中的 url-loader 配置项，新增 outputPath 选项即可指定图片文件的输出路径：
module: { rules: [ { test: /\.(jpg|png|gif)$/, use: 'url-loader?limit=6055&outputPath=images' }, ] }
Source Map
目前的问题
- 开发环境中，错误行号对应不上。比如本来是在第23行报错了，但是浏览器提示在第20行报错。
- 打包后，又不希望我们的代码被其他人看到源码。
上述问题，可以通过sourceMap解决。
什么是 Source Map
Source Map 就是一个信息文件，里面储存着位置信息。
也就是说，Source Map 文件中存储着压缩混淆后的代码，所对应的转换前的位置。
有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码，能够极大的方便后期的调试。
配置
开发环境
推荐在 webpack.config.js 中添加如下的配置，即可保证运行时报错的行数与源代码的行数 保持一致：
module.exports = {
// eval-source-map 仅限在开发模式中使用
//（开发中，程序员需要排错，需要准确的定位错误行号）
devtool: 'eval-source-map',
}
生产环境
module.exports = {
// nosources-source-map 适合生产环境。
//（生产环境，我们不希望别人看到我们的源码，这个配置项只显示行号，但不会显示源码）
devtool: 'nosources-source-map',
}
1968
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
