前端工程化webapck
什么是前端工程化
前端工程化指的是:在企业级的前端项目开发中,把前端开发所需的工具、技术、流程、经验等进行规范化、标准化
前端工程化的解决方案
早期的前端工程化解决方案:
- grunt( https://www.gruntjs.net/ )
- gulp( https://www.gulpjs.com.cn/ )
目前主流的前端工程化解决方案:
- webpack( https://www.webpackjs.com/ )
- parcel( https://zh.parceljs.org/ )
webpack的基本使用
什么是webpack
概念:webpack 是前端项目工程化的具体解决方案。
主要功能:它提供了友好的前端模块化开发支持,以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性、性能优化等强大的功能。
好处:让程序员把工作的重心放到具体功能的实现上,提高了前端开发效率和项目的可维护性。
使用webpack
我们拿一个项目来演示webpack的使用过程,一步步带着大家来使用和配置webpack
我们就简单来做一个文字带有背景的颜色的例子,方便大家理解
1. 我们先建立一个空白文档
- 我们先新建一个src的文件夹
- 在src的目录下,我们新建index.html,index.css,index,js这三个文件
- 我们在终端输入npm init –y 这个命令,初始化包管理配置文件 package.json
如图所示,我们这几个文件都建好了,然后我们开始往这三个文件里面去加一些内容
index.html:
<!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>Document</title>
</head>
<body>
<div>这是一段文字</div>
</body>
</html>
这里我打算用jQuery+es6的东西来给这个页面加样式,这个时候我们需要下一个jQuery的包
我们在终端中输入
npm i juqery -S
来下载出jQuery的包供我们来使用,这里我怕有伙伴们不知道这行代码啥意思所以解释以下
npm 是包的意思
i是install的意思,写install也行
jQuery是我们要下的包
-S是模块写入到 dependencies对象
这个是npm的知识点了,就说到这里了
如图所示,这里我们下完了jQuery的包啦!
然后,我打算通过 ES6 模块化的方式导入 jQuery,
index.js:
//使用ES6导入语法,导入jQuery
import $ from 'jquery'
//定义jQuery入口函数
$(function(){
$('div').css('background-color','pink')
})
然后在index.html导入后发现它报错了,显示是个语法错误,其实它并不错,而是这个语法比较高级,它识别不了
这回我们就要用webpack来解决这个问题了
2. 在项目中安装 webpack
在终端运行如下的命令,安装 webpack 相关的两个包:
npm install webpack@5.42.1 webpack-cli@4.9.0 -D
如图,安装成功
3. 在项目中配置 webpack
1.我们在项目根目录中,新创建名为 webpack.config.js 的 webpack 配置文件,并初始化如下的基本配置
这个mode里面,我们可以选两个值
- development 开发环境 不会对打包生成的文件进行代码压缩和性能优化 打包速度快,适合在开发阶段使用
- production 生产环境 会对打包生成的文件进行代码压缩和性能优化 打包速度很慢,仅适合在项目发布阶段使用
同时,有的小伙伴会问,这个webpack.config.js文件有什么用:
webpack.config.js 是 webpack 的配置文件。webpack
在真正开始打包构建之前,会先读取这个配置文件,从而基于给定的配置,对项目进行打包。
注意:由于 webpack 是基于 node.js 开发出来的打包工具,因此在它的配置文件中,支持使用 node.js 相关的语法和模块进行 webpack 的个性化配置
2.在 package.json 的 scripts 节点下,新增 dev 脚本如下:
3. 在终端中运行 npm run dev 命令,启动 webpack 进行项目的打包构建
我们会发现,在根目录下,自动给我们新建了一个dist文件夹,里面有个main.js文件
这个就是webpack给我们打包好的文件
然后,我们在index.html中导入main.js文件
我们在运行一下这个界面,会发现
诶!运行成功了!
webpack的默认约定
我们发现,webpack打包后给我们自动生成了dist文件夹和main.js文件,这是为什么呢,我们可以修改它们的名字吗?
在 webpack 4.x 和 5.x 的版本中,有如下的默认约定:
- 默认的打包入口文件为 src -> index.js
- 默认的输出文件路径为 dist -> main.js
但是!既然是默认的,就代表我们是可以修改它的
自定义打包的入口与出口
在 webpack.config.js 配置文件中,通过 entry 节点指定打包的入口。通过 output 节点指定打包的出口。示例代码如下:
路径和名字自行修改可以了!修改后重新在终端启动一下
npm run dev