一、什么是 Webpack
概念:
webpack
是前端项目工程化的具体解决方案。
主要功能:
它提供了友好的前端模块化开发支持,以及代码压缩混淆、处理浏览器端
JavaScript
的兼容性、性能化等强大的功能。
好处:
让程序员把工作重心放到具体功能的实现上,提高了前端开发效率和项目的可维护性。
注意:
目前
Vue
、React
等前端项目基本上都是基于webpack
进行工程化开发的。
二、Demo
步骤:
1)新建项目空目录,并运行
npm init -y
命令,初始化包管理配置文件package.json
2)新建
src
源代码目录3)新建
src -> index.html
首页和src -> index.js
脚本文件4)初始化首页基本结构
5)运行
npm install jquery -S
命令,安装jquery
6)通过 ES6 模块化的方式导入
jquery
,实现列表隔行变色效果
执行完
npm install jquery -S
命令后会下载jquery
,并自动把jquery
加载到package.json
文件中
{"name": "change-rows-color","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": [],"author": "","license": "ISC","dependencies": {"jquery": "^3.6.0"}
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>隔行变色</title><script src="./index.js"></script>
</head>
<body><ul><li>这是第 1 个li</li><li>这是第 2 个li</li><li>这是第 3 个li</li><li>这是第 4 个li</li><li>这是第 5 个li</li><li>这是第 6 个li</li><li>这是第 7 个li</li><li>这是第 8 个li</li><li>这是第 9 个li</li></ul>
</body>
</html>
// 使用 ES6 导入 jquery
import $ from 'jquery'// 定义 jquery 的入口函数
$(function(){// 实现功能$('li:odd').css('background-color','cyan');$('li:even').css('background-color','pink');
})
由于使用 ES6 语法导入
jquery
,因浏览器兼容问题出现下列报错,可以使用webpack
,解决浏览器兼容问题。
使用
npm install webpack@5.42.1 webpack-cli@4.9.0 -D
命令安装webpack
,并记录到package.json
文件中
{"name": "change-rows-color","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": [],"author": "","license": "ISC","dependencies": {"jquery": "^3.6.0"},"devDependencies": {"webpack": "^5.42.1","webpack-cli": "^4.9.0"}
}
/*** 开发阶段以及部署运行阶段都需要用到的包需要在命令行末尾添加“-S”或“--save”添加到“dependencies”的分支中* 只在开发阶段会使用到的包就需要在命令行末尾添加“-D”或“--save-dev”添加到“devDependencies”的分支中**/
三、配置 Webpack
步骤:
1)在项目根目录中,创建名为 webpack.config.js
的 webpack
配置文件,并初始化如下的基本配置
module.exports = {mode:'development' // mode 用来指定构建模式,可选择 development 和 production
}
2)在 package.json
的 scripts
节点下,新增 dev
脚本如下:
"scripts":{"dev":"webpack" // scripts 节点下的脚本,可以通过 npm run 执行,例如:npm run dev
}
3)在终端中运行 npm run dev
命令,启动 webpack
进行项目的打包构建
最终效果:
四、mode 的可选值
mode 节点的可选值有两个,分别是:
1)development
-
开发环境
-
不会对打包生成的文件进行代码压缩和性能优化
-
打包速度快,适合在开发阶段使用
2)prodution
-
生产环境
-
会对打包生成的文件进行代码压缩和性能优化
-
打包速度很慢,仅适合在项目发布阶段使用
五、webpack.config.js 文件的作用
webpack.config.js
是webpack
的配置文件。
webpack
在真正开始打包构建之前,会先读取这个配置文件,从而基于给定的配置,对项目进行打包。
由于
webpack
是基于node.js
开发出来的打包工具,因此在它的配置文件中,支持使用node.js
相关的语法和模块进行webpack
的个性化配置。
六 、webpack 中的默认约定
在 webpack 4.x
和 5.x
的版本中,有如下的默认约定:
-
默认的打包入口文件为:
src -> index.js
-
默认的输出文件路径为:
dist -> main.js
可以在
webpack.config.js
文件中修改打包的默认约定在
webpack.config.js
配置文件中
通过
entry
节点指定打包的入口通过
output
节点指定打包的出口
示例代码:
// 导入 node.js 中专门操作路径的模块
const path = require('path')modeule.exports = {entry: path.join(__dirname,'./src/index.js'), // 打包入口文件的路径output:{path:path.join(__dirname,'./dist'), // 输出文件的存放路径filename:'bundle.js' // 输出文件的名称}
}
一 叶 知 秋,奥 妙 玄 心