1.认识webpack
- 官网:webpack.js.org/ 中文网站: www.webpackjs.com/
webpack 是一个用于现代 JavaScript 应用程序的 打包工具。当 webpack 处理应用程序时,它会在内部从一个或多个入口点构建一个依赖图,然后将项目中所需的每一个模块组合成一个或多个 bundles,它们均为静态资源,可以在浏览器上直接运行。在 webpack 看来, 前端的所有资源文件(js、json、css、img 、html...)都会作为模块处理。
- 解决方案:前端工程化(Webpack),在企业级的前端项目开发中,把前端开发所需的工具、技术、 流程、经验等进行规范化、标准化
本质上,webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时,它会在内部从一个或多个入口点构建一个依赖图,然后将你项目中所需的每一个模块组合成一个或多个 bundles,它们均为静态资源,用于展示你的内容
介绍:
总结:
- webapck是一个构建工具,是基于node的,电脑上必须安装node,node版本需要大于16
- 打包器,是从入口开始,按照模块依赖进行打包,最终得到浏览器的可以识别的静态资源。
- 从某种程度来说,webpack代表的是一种架构能力。
2.搭建环境
所需要的依赖如下:
json
{
"name": "react-webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.18.5",
"@babel/preset-env": "^7.18.2",
"@babel/preset-react": "^7.17.12",
"autoprefixer": "^10.4.7",
"axios": "^0.27.2",
"babel-loader": "^8.2.5",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^6.7.1",
"eslint": "^8.18.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-plugin-import": "^2.26.0",
"eslint-webpack-plugin": "^3.1.1",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.5.0",
"less": "^4.1.3",
"less-loader": "^11.0.0",
"mini-css-extract-plugin": "^2.6.1",
"optimize-css-assets-webpack-plugin": "^6.0.1",
"postcss": "^8.4.14",
"postcss-loader": "^7.0.0",
"postcss-preset-env": "^7.7.1",
"sass": "^1.52.3",
"sass-loader": "^13.0.0",
"style-loader": "^3.3.1",
"url-loader": "^4.1.1",
"vue-loader": "^17.0.0",
"vue-style-loader": "^4.1.3",
"vue-template-compiler": "^2.6.14",
"vue-template-loader": "^1.1.0",
"webpack": "^5.73.0",
"webpack-bundle-analyzer": "^4.5.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.9.2",
"webpack-merge": "^5.8.0"
},
"dependencies": {
"vue": "^3.2.37",
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
}
使用cnpm i进行安装
可以通过npx webpack -v测试是否安装成功(因为是在项目中安装,所以需要使用npx)
零配置打包,命令如下:
将 src/index.js 打包至 dist/main.js 模式默认值:production
npx webpack
将 src/index.js 打包至 dist/main.js 模式指定为:development
npx webpack --mode development
将 src/one.js 打包至 dist/main.js
npx webpack ./src/one.js --mode development
将 src/one.js、two.js 打包至 dist/main.js
npx webpack ./src/one.js ./src/two.js --mode development
将 src/one.js 打包至 build/main.js
npx webpack ./src/one.js --output-path build --mode development
将 src/two.js 打包至 dist/index.js
npx webpack ./src/two.js --output-filename index.js --mode development
将 src/one.js 和 src/two.js 打包至 build/index.js
npx webpack ./src/one.js ./src/two.js --output-path build --output-filename index.js --mode development
打包模式:
-
开发模式 development
-
开发模式顾名思义就是我们开发代码时使用的模式,是为开发者更方便开发而存在的,在开发模式下,一般是为了更方便的调试,所以错误信息会提示很全面,并且存在热更新状态等。这个模式下我们主要做两件事:
- 编译代码,使浏览器能识别运行,开发时我们有样式资源、字体图标、图片资源、html 资源等,webpack 默认都不能处理这些资源,所以我们要加载配置来编译这些资源。
- 代码质量检查,树立代码规范,提前检查代码的一些隐患,让代码运行时能更加健壮。提前检查代码规范和格式,统一团队编码风格,让代码更优雅美观。
-
-
生产模式 production
-
生产模式是开发完成代码后,我们需要得到代码将来部署上线,在生产模式下,会去掉更多的错误提示,让想打包尽可能变小等。这个模式下我们主要对代码进行优化,让其运行性能更好。优化主要从两个角度出发:
- 优化代码运行性能
- 优化代码打包速度
开始打包:
指定模式打包,如下:
指定入口文件:
-
webpack的五大核心概念:
- Entry: 指示 webpack 从哪个文件开始打包 。
- Output: 指示 webpack 打包完的文件输出到哪里去,如何命名等 。
- Loader: webpack 本身只能处理 js、json 等资源,其他资源需要借助 loader,Webpack 才能解析 。
- Plugins: 扩展 webpack 的功能 ,如打包优化、压缩等。
- Mode:模式,有生产模式 production 和开发模式 development 两种。 代码如下:
js
module.exports = {
// 入口
entry: "./src/main.js",
// 出口
output: {}
}
开始打包,如下: 看一下,打包后文件,如下:
指定mode,如下:
需要
webpack.config.js
文件名变了,打包时,需要手动指定,如下:
可以在package.json
配置一个脚本
json
"dev":"webpack --config webpack.config.js"
运行脚本
arduino
cnpm run dev
npm run dev
3.入口和出口
path
js
//path是node中的内置模块
const path=require("path")
//__dirname是node中内置变量
//即E:\2402\第四阶段\react-webpack\src
console.log(__dirname)
//E:\2402\第四阶段\react-webpack\src\main.js
console.log(path.resolve(__dirname,"main.js"))
入口可以写成相对地址,绝对地址,以及对象
js
const path = require("path")
module.exports = {
mode: "development", // 开发打包
// 入口
// entry: "./src/main.js",
// entry: path.resolve(__dirname, "src/main.js"), // 绝对路径
entry: {
// app表示你打包后的资源名字就是app
app1: path.resolve(__dirname, "src/main.js"), // 绝对路径
},
// 出口
output: {}
}
出口指定的地址必须是一个绝对路径,相对路径会报错
最好还是叫dist,有的地方,叫build,我们就叫dist。 filename可以指定一个格式化字符串,可以指定hash值。说白了,输入的JS模块所依赖的源码发生了变化,打包时,hash值也会发生变化,用于解决浏览器缓存导致页面不刷新的问题。
将打开后的js文件,放到js文件夹下面的
js
const path = require("path")
module.exports = {
mode: "development", // 开发打包
// 入口
// entry: "./src/main.js",
// entry: path.resolve(__dirname, "src/main.js"), // 绝对路径
entry: {
// app表示你打包后的资源名字就是app
app: path.resolve(__dirname, "src/main.js"), // 绝对路径
},
// 出口
output: {
path: path.resolve(__dirname, "dist"), // 绝对路径
// filename:"bundle.js" // 一捆 一束
filename: "js/[name].[chunkhash:8].js" // 一捆 一束
}
}
4.配置开发服务器
到目前为止 webpack 基本上可以正常使用了,但在实际开发中你可能会需要:
- 提供 HTTP 服务而不是使用本地文件预览;
- 监听文件的变化并自动刷新网页,做到实时预览;
- 支持
Source Map
,以方便调试。
前面打包是把包打包到硬盘上的。在开发时,需要配置一个开发服务器,这个开发服务器可以直接让我们在内存中打包,速度是远远高于硬盘的。我们之前用的脚手架,都是在内存中打开。
在window.config.js
中配置开发服务器 在
package.json
中配置一个脚本,通过npm run serve
执行
5.创建页面,把打包后的js插入页面
创建一个页面 访问localhost:8080/index.html
使用
html-webpack-plugin
插件 在内存中打包(
npm run serve
),测试结果(打开localhost:8080/index.html)
! ! !
此时在浏览器中跑的代码是你打包以后的代码
代码的配置如下
js
const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
mode: "development", // 开发打包
// 入口
// entry: "./src/main.js",
// entry: path.resolve(__dirname, "src/main.js"), // 绝对路径
entry: {
// app表示你打包后的资源名字就是app
app: path.resolve(__dirname, "src/main.js"), // 绝对路径
},
// 出口
output: {
path: path.resolve(__dirname, "dist"), // 绝对路径
// filename:"bundle.js" // 一捆 一束
filename: "js/[name].[chunkhash:8].js" // 一捆 一束
},
// 配置开发服务器
devServer: {
port: 8080
},
plugins: [
new HtmlWebpackPlugin({
template: "./public/index.html"
})
]
}
6.区分硬盘打包和内存打包
打包分两种,一种是开发时的打包,一种是生产时的打包。不同的打包方式,是有不同的配置的,现在有两种打包方式,也就是说有两种配置,但是这两种配置中有一些公共的配置,把这些配置区分出来,创建build.js
(生产配置),config.js
(开发和生产的公共配置),serve.js
(开发配置)
config.js(开发和生产的公共配置)

serve.js(开发配置)

build.js(生产配置)
在package.json中配置脚本,如下
使用合并,做出开发模式时
config.js(开发和生产的公共配置)+serve.js(开发配置)
,生产配置时build.js(生产配置)+config.js(开发和生产的公共配置)
的效果 webpack.config.js代码如下: 在cdm中输入
npm run build
或 npm run serve
即可使用