webpack 的基本使用

1. 什么是 webpack

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

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

能优化等强大的功能。

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

注意：目前企业级的前端项目开发中，绝大多数的项目都是基于 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.5.1 webpack-cli@4.2.0 -D

4. 在项目中配置 webpack

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

module.exports = {
	mode: 'development' //mode 用来指定构建模式。可选值有 develoment 和 production
}

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

"scripts": {
	"dev": "webpack"  //script 节点下的脚本，可以通过 npm run 执行。npm run 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 中有如下的默认约定：

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

② 默认的输出文件路径为 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' //输出文件的名称
    }
}