前端工程化之构建工具webpack 的基本使用

Posted 黑马程序员官方

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端工程化之构建工具webpack 的基本使用相关的知识,希望对你有一定的参考价值。

1. 什么是 webpack

概念:webpack 是前端项目工程化的具体解决方案

主要功能:它提供了友好的前端模块化开发支持,以及代码压缩混淆处理浏览器端 javascript 的兼容性性能优化等强大的功能。

好处:让程序员工作的重心放到具体功能的实现上,提高了前端开发效率和项目的可维护性

注意:目前 Vue,React 等前端项目,基本上都是基于 webpack 进行工程化开发的。

2. 创建列表隔行变色项目

① 新建项目空白目录,并运行 npm init –y 命令,初始化包管理配置文件 package.json

② 新建 src 源代码目录

③ 新建 src -> index.html 首页和 src -> index.js 脚本文件

④ 初始化首页基本的结构

⑤ 运行 npm install jquery –S 命令,安装 jQuery

⑥ 通过 ES6 模块化的方式导入 jQuery,实现列表隔行变色效果

3. 在项目中安装 webpack

在终端运行如下的命令,安装 webpack 相关的两个包:

npm install webpack@5.42.1 webpack-cli@4.7.2 -D

4. 在项目中配置 webpack

① 在项目根目录中,创建名为 webpack.config.js 的 webpack 配置文件,并初始化如下的基本配置:

 ② 在 package.json 的 scripts 节点下,新增 dev 脚本如下:

 ③ 在终端中运行 npm run dev 命令,启动 webpack 进行项目的打包构建

4.1 mode 的可选值

mode 节点的可选值有两个,分别是:

① development

开发环境

不会对打包生成的文件进行代码压缩性能优化

打包速度快,适合在开发阶段使用

② production

生产环境

对打包生成的文件进行代码压缩性能优化

打包速度很慢,仅适合在项目发布阶段使用

4.2 webpack.config.js 文件的作用

webpack.config.js 是 webpack 的配置文件。webpack 在真正开始打包构建之前,会先读取这个配置文件, 从而基于给定的配置,对项目进行打包。

注意:由于 webpack 是基于 node.js 开发出来的打包工具,因此在它的配置文件中,支持使用 node.js 相关的语法和模块进行 webpack 的个性化配置。

4.3 webpack 中的默认约定

在 webpack 4.x 和 5.x 的版本中,有如下的默认约定:

① 默认的打包入口文件为 src -> index.js

② 默认的输出文件路径为 dist -> main.js

注意:可以在 webpack.config.js 中修改打包的默认约定

4.4 自定义打包的入口与出口

在 webpack.config.js 配置文件中,通过 entry 节点指定打包的入口。通过 output 节点指定打包的出口

示例代码如下:

 


 黑马前端专栏干货多多,关注再学,好方便~

2022年前端学习路线图:课程、源码、笔记,技术栈 另外此线路图实时更新!需要课后资料的友友们,可以直接告诉我喔~

 

以上是关于前端工程化之构建工具webpack 的基本使用的主要内容,如果未能解决你的问题,请参考以下文章

一webpack的基本使用

webpack前端工程化构建工具的使用

webpack环境搭建

webpack环境搭建

从Npm Script到Webpack,6种常见的前端构建工具对比

从 Webpack 到 Ykit —— 前端工程构建实践