Vue基础自学系列 | webpack的基本使用

Posted 2022-08-29 COCOgsta

视频来源：B站《黑马程序员Vue全套视频教程，从vue2.0到vue3.0一套全覆盖，前端必会的框架教程》

一边学习一边整理老师的课程内容及试验笔记，并与大家分享，侵权即删，谢谢支持！

附上汇总贴：Vue基础自学系列 | 汇总_COCOgsta的博客-CSDN博客

---

1. 什么是webpack

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

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

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

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

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

   • 新建项目空白目录，并运行npm init -y命令，初始化包管理配置文件package.json
   • 新建src源代码目录
   • 新建src -> index.html首页和src -> index.js脚本文件
   • 初始化首页基本的结构
   • 运行npm install jquery -S命令，安装jQuery
   • 通过ES6模块化的方式导入jQuery，实现列表隔行变色效果

1. 在项目中安装webpack

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

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

-S是--save的简写

-D是--save-dev的简写

1. 在项目中配置webpack

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

   • module.exports = 
       mode: 'development'  // mode 用来指定构建模式。可选值有development和production
     
     复制代码

   • 在package.json的scripts节点下，新增dev脚本如下：

   • "scripts": 
       "dev": "webpack"  // script 节点下的脚本，可以通过npm run执行。例如npm run dev
     
     复制代码

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

4.1 mode的可选值

mode节点的可选值有两个，分别是：

1. development

   1. 开发环境
   2. 不会对打包生成的文件进行代码压缩和性能优化
   3. 打包速度快，适合在开发阶段使用

1. production

   1. 生产环境
   2. 会对打包生成的文件进行代码压缩和性能优化
   3. 打包速度慢，仅适合在项目发布阶段使用

4.2 webpack.config.js文件的作用

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

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

4.3 webpack中的默认约定

在webpack4.x和5.x的版本中，有如下的默认约定：

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

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

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

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

在webpack.config.js配置文件中，通过entry节点指定打包的入口。通过output节点指定打包的出口。示例代码如下：

const path = require('path')  // 导入node.js中专门操作路径的模块

module.exports = 
  entry: path.join(__dirname, './src/index.js'),  // 打包入口文件的路径
  output: 
    path: path.join(__dirname, './dist'),  // 输出文件的存放路径
    filename: 'bundle.js'  // 输出文件的名称
  

复制代码