5、webpack

1、前端工程化

前端工程化指的是：在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化

2、什么是webpack

1. 概念：webpack 是前端项目工程化的具体解决方案
2. 功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性、性能优化等强大的功能
3. 好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性

3、列表隔行变色项目

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

4、webpack的基本使用

安装webpack包

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

项目中配置webpack

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

① 在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件，并初始化如下的基本配置：
// 向外导出一个webpack配置项
module.exports = {
    // 代表webpack的运行模式，可选值：development  和  production
    mode: 'development'
}
② 在 package.json 的 scripts 节点下，新增 dev 脚本如下：
"scripts": {
    "dev": "webpack"
}
③ 在终端中运行 npm run dev 命令，启动 webpack 进行项目的打包构建

webpack中的默认约定

在 webpack 4.x 和 5.x 的版本中，有如下的默认约定：
① 默认的打包入口文件为 src -> index.js
② 默认的输出文件路径为 dist -> main.js
注意：可以在 webpack.config.js 中修改打包的默认约定

const path = require('path')
// 向外导出一个webpack配置项
module.exports = {
    // 代表webpack的运行模式，可选值：development  和  production
    mode: 'development',
    // entry: '指定要处理哪个文件'
    entry: path.join(__dirname, './src/index.js'),
    output: {
        path: path.join(__dirname, './dist'),//输出文件存放的路径
        filename: 'index.js'    //输出文件的名称
    }
}

5、mode的可选值

mode 节点的可选值有两个，分别是：
① development
⚫ 开发环境
⚫ 不会对打包生成的文件进行代码压缩和性能优化
⚫ 打包速度快，适合在开发阶段使用
② production
⚫ 生产环境
⚫ 会对打包生成的文件进行代码压缩和性能优化
⚫ 打包速度很慢，仅适合在项目发布阶段使用

6、webpack插件

6.1 webpack-dev-server插件

每当修改了源代码，webpack 会自动进行项目的打包和构建

配置：
1. 修改 package.json -> scripts 中的 dev 命令
"scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server"
}
2.注意：webpack-dev-server 会启动一个实时打包的 http 服务器

打包生成的文件去哪了

① 不配置 webpack-dev-server 的情况下，webpack 打包生成的文件，会存放到实际的物理磁盘上
	严格遵守开发者在 webpack.config.js 中指定配置
	根据 output 节点指定路径进行存放
② 配置了 webpack-dev-server 之后，打包生成的文件存放到了内存中
	不再根据 output 节点指定的路径，存放到实际的物理磁盘上
	提高了实时打包输出的性能，因为内存比物理磁盘速度快很多

6.2 html-webpack-plugin插件

html-webpack-plugin 是 webpack 中的 HTML 插件，可以通过此插件自定制 index.html 页面的内容

// 导入html插件，得到一个构造函数
const HtmlPlugin = require('html-webpack-plugin')

// 创建Html插件的实例对象
const htmlPlugin = new HtmlPlugin({
    template: './src/index.html',   //指定原文件的指定路径
    filename: './index.html'         //指定生成的文件的路径
})
// 向外导出一个webpack配置项
module.exports = {
    // 代表webpack的运行模式，可选值：development  和  production
    mode: 'development',
    // entry: '指定要处理哪个文件'
    entry: path.join(__dirname, './src/index.js'),
    output: {
        path: path.join(__dirname, './dist/'),  //输出文件存放的路径
        filename: 'main.js'    //输出文件的名称
    },
    plugins: [htmlPlugin]   //通过plugins节点，使htmlPlugin插件生效
}