代码示例

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({// 编译哪个 htmltemplate: 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 -Dmodule: {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 中使用 {// assettest: /\.(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

② 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',
}

webpack 打包配置相关推荐

vue-cli+webpack打包配置
vue-cli+webpack打包配置一: 目录结构: ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── ut ...
前端webpack打包配置
最近在学习webpack打包,顺便做了一下笔记用来总结.后续继续补充对项目进行初始化生成package.json文件 npm init -y 通过npm或cnpm下载webpack打包工具以及ts- ...
webpack打包配置
在网页中会引用那些常见的静态资源? js .js .jsx .coffee .ts(Typescript 类 C#语言) css .css .less .sass .scss images .jpg ...
vue.config.js配置，webpack打包配置详解
注意: vue-cli3 脚手架搭建完成后,项目目录中没有 vue.config.js 文件,需要手动创建第一步:手动创建vue.config.js文件, 一般放在和package.json同级目录 ...
vue项目webpack打包配置
基于vue/cli3.0+脚手架搭建Vue项目(12) 文章目录基于vue/cli3.0+脚手架搭建Vue项目(12) 前言一.webpack配置 1.配置vue.config.js 2.配置Dl ...
webpack基本打包配置流程
项目搭建以及webpack打包配置流程创建文件夹EC(文件夹和文件名根据需求自定义) 在EC文件夹下新建文件夹APP 在APP文件夹下新建入口文件index.js 和运行该入口文件的index.ht ...
建立项目的webpack简单配置
实战项目中的 Webpack 配置: 说明:以下命令通过 Git Bash 执行 1.建立webpack-demo文件夹及npm初始化 Administrator@PC-20170414ZFJO MI ...
webpack打包HTML配置自动,十三、HtmlWebpackPlugin的使用 ------- 2019-04-25
一.作用:htmlWebpackPlugin插件会在webpack打包结束后,自动帮我们生成一个HTML文件,并把打包生成的js自动引入到这个HTML文件中: 二.安装 :npm install ht ...
自定义配置webpack打包文件
基础使用安装 npm install webpack -g 模块化程序(配置过程忽略此步骤) cale.js function add(a,b){return a + b; } module.exp ...

webpack 打包配置

代码示例

前端工程化

什么是前端工程化

前端工程化的解决方案

webpack 的基本概念

什么是 webpack

为什么要学习 webpack

安装全部所需的包

webpack 的基本使用

创建列表隔行变色项目

分析项目中遇到的问题

安装和配置webpack

打包结果

mode 的可选值

webpack.config.js的作用

webpack 中的默认约定

自定义打包的入口与出口

webpack 中的插件

概述

clean-webpack-plugin

webpack-dev-server

基本使用

打包生成的文件哪儿去了？

生成到内存中的文件该如何访问？

html-webpack-plugin

webpack 中的 loader

loader 概述

loader 的调用过程

打包处理 css 文件

打包处理 less 文件

打包处理与 url 路径相关的文件

打包处理 js 文件中的高级语法

打包发布

为什么要打包发布

配置 webpack 的打包发布

Source Map

目前的问题

什么是 Source Map

配置

开发环境

生产环境

webpack 打包配置相关推荐

最新文章

热门文章