webpack的学习目标

理解什么是前端工程化
- 转变对前端开发的认知
了解webpack的基本用法
- 为后面vue和react课程的学习做技术储备
不强制要求大家能手动配置webpack
- 一定要知道webpack在项目中有什么作用
- 清楚webpack中的核心概念

前端工程化

1.小白眼中的前端开发 vs 实际的前端开发
- 小白眼中的前端开发
  - 会写 HTML + CSS + JavaScript 就会前端开发
  - 需要美化页面样式，就使用bootstrap
  - 需要操作DOM或发起Ajax请求，就使用Jquery
  - 需要快速实现网页布局效果，就使用Layui
- 实际的前端开发
  - 模块化(js的模块化、css的模块化、资源的模块化)
  - 组件化(复用现有的UI结构、样式、行为)
  - 规范化(目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理)
  - 自动化(自动化构建、自动部署、自动化测试) ctrl+s 保存自动刷新页面
2.什么是前端工程化
- 前端工程化指的是：在企业级的前端项目开发中，把前端开发所需要的工具、技术、流程、经验等进行规范化、标准化。
- 企业中的vue项目和react项目，都是基于工程化的方式进行开发的。
- 好处：前端开发自成体系，有一套标准的开发方案和流程。
3.前端工程化的解决方案
- 早期的前端工程化解决方案：
  - grunt
  - gulp
- 目前主流的前端工程化解决方案：
  - webpack ☆
  - parcel(开发第三方包的时候使用)

webpack的基本使用

1.什么是webpack
- 概念：webpack是前端项目工程化的具体解决方案。
- 主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端JavaScript的兼容性、性能优化等强大的功能。
- 好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。
- 注意：目前vue和react等前端项目，基本上都是基于webpack进行工程化开发的。
2.创建列表隔行变色项目demo (change-rows-color)
- a.新建项目空白目录，并 "运行npm init -y" 命令，初始化包管理配置文件 "package.json"
- b.新建src源代码目录
- c.新建src/index.html首页和index.js脚本文件
- d.初始化首页基本的结构
- e.运行 "npm install jquery -S",安装jQuery
- f.通过ES6模块化的方式导入jQuery, 实现列表隔行变色效果
3.在项目中安装webpack
- 在终端运行如下命令，安装webpack相关的两个包：npm install webpack@5.42.1 webpack-cli@4.7.2 -D
- 注意：
  - -S 是 --save的简写，安装到dependencies生产环境
  - -D 是 --save-dev的简写，安装到devDependencies 开发环境
4.在项目中配置webpack
- 1.在项目根目录中，创建名为 webpack.config.js的webpack配置文件，并初始化如下的基本配置：
```
    module.exports={
        mode:'development' //mode用来指定构建模式，可选值有 development 和 production
    }
```
- 2.在package.json的scripts节点下，新增dev脚本如下：
```
    "scripts":{
        "dev":"webpack" // script节点下的脚本，可以通过 npm run 执行，例如npm run dev
    }
```
- 3.在终端中运行 npm run dev 命令，启动webpack进行项目的打包构建
  - 将导入到index.html中的index.js文件，替换成经过webpack处理的dist/main.js文件。(解决index.html中直接导入index.js文件的兼容性问题)
  - 配置webpack.config.js中的mode为production，压缩出来的包体积会更小，但是打包时间会很长。
  - 配置webpack.config.js中的mode为development，压缩出来的包体积会更小，但是打包时间会很长。
  - 清空终端命令：cls
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节点指定打包的出口。
示例代码如下：

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

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

webpack中的插件

1.webpack插件的作用
- 通过安装和配置第三方的插件，可以拓展webpack的能力，从而让webpack用起来更方便。最常用的webpack插件有如下两个：
  - webpack-dev-server
    - 类似于node.js阶段用到的nodemon工具
    - 每当修改了源代码，webpack会自动进行项目的打包和构建
  - html-webpack-plugin
    - webpack中的HTML插件(类似于一个模板引擎插件)
    - 可以通过此插件自定制index.html页面的内容
2-1.安装 webpack-dev-server(作用：帮助我们实时监听，项目中文件的变化，只要我们ctrl+s,就会立即进行自动化打包)
- 项目终端运行如下的命令，即可在项目中安装此插件：npm install webpack-dev-server@3.11.2 -D
2-2.配置webpack-dev-server(配置完成后，执行npm run dev生成的bundle.js文件放到了内存里面，不会展示在项目目录(物理磁盘上)中)
- 1.修改package.json文件下的"scripts"中的dev命令如下：
```
    "script":{
        "dev":"webpack serve" // script节点下的脚本，可以通过npm run执行
    }
```
- 2.再次执行npm run dev命令，重新进行项目的打包
- 3.在浏览器中访问 http://localhost:8080 地址，查看自动打包效果
- 注意：webpack-dev-server会启动一个实时打包的http服务器
3-1.安装html-webpack-plugin(作用：帮助我们把src下面的index.html首页复制一份放到根目录下)
- 项目终端运行如下的命令，即可在项目中安装此插件：npm install html-webpack-plugin@5.3.2 -D

3-2.配置html-webpack-plugin(将复制出来的页面自动注入一个脚本，然后自动引入bundle.js文件)

    // 1.导入HTML插件，得到一个构造函数
    const HtmlPlugin = require('html-webpack-plugin)
    
    // 2.创建HTML插件的实例对象
    const htmlPlugin = new HtmlPlugin({
        template:'./src/index.html', //指定原文件的存放路径
        filename:'./index.html', // 指定生成的文件的存放路径 
    })

    module.exports = {
        mode:'development',
        plugins:[htmlPlugin], //3.通过 plugins 节点，使 htmlPlugin 插件生效
    }

3-3.解惑html-webpack-plugin
- 通过HTML插件复制到项目根目录中的index.html页面，也被放到了内存中。
- HTML插件在生成的index.html页面，自动注入了打包的bundle.js文件。

4.devServer 节点

在webpack.config.js配置文件中，可以通过devServer节点对webpack-dev-server插件进行更多的配置，示例代码如下：

    devServer:{
        open:true, // 首次打包完成后，自动打开浏览器
        host:'127.0.0.1', // 实时打包所使用的主机地址
        port:80, // 实时打包所使用的端口号，在http协议中，如果端口号是80，则可以被省略(url地址栏会自动省略)
    }

凡是修改了webpack.config.js配置文件，或修改了package.json配置文件，必须重启实时打包的服务器，否则最新的配置文件无法生效。

不想手动配置webpack, 可以使用vue-cli脚手架，它已经将webpack配置好了。

webpack中的loader(加载器)

1.loader概述
- 在实际开发过程中，webpack默认只能打包处理以 .js 后缀名结尾的模块。其他非 .js 后缀名结尾的模块，webpack默认处理不了，需要调用 loader 加载器才可以正常打包，否则会报错！
- loader加载器的作用：协助webpack打包处理特定的文件模块。比如：
  - css-loader 可以打包处理 .css 相关的文件
  - less-loader 可以打包处理 .less 相关的文件
  - babel-loader 可以打包处理webpack无法处理的高级JS语法
2.loader的调用过程
3.打包处理CSS文件
- 运行 npm i style-loader@3.0.0 css-loader@5.2.6 -D 命令，安装处理css文件的loader
- 在webpack.config.js的 module ——> rules数组中，添加loader规则如下：
```
    module:{ //所有第三方文件模块的匹配规则
        rules:[ // 文件后缀名的匹配规则
            { test: /\.css$/, use:['style-loader','css-loader']}
        ]
    }
```
  - 其中，test表示匹配的文件类型，use表示对应要调用的loader
  - 注意：
    - use数组中指定的loader顺序是固定的
    - 多个loader的调用顺序是：从后往前调用
- 小结：
  - 1.webpack默认只能打包处理 .js 结尾的文件，处理不了其他后缀的文件。
  - 2.由于代码中包含了 index.css 这个文件，因此webpack默认处理不了。
  - 3.当webpack发现某个文件处理不了的时候，会查找webpack.config.js这个配置文件，看 module.rules 数组中，是否配置了对应的 loader 加载器。
  - 4.webpack把index.css这个文件，先转交给最后一个 loader 进行处理(先转交给css-loader)。
  - 5.当 css-loader 处理完毕之后，会把处理的结果，转交给下一个loader(转交给style-loader)。
  - 6.当style-loader处理完毕之后，发现没有下一个loader了，于是就把处理的结果，转交给了webpack。
  - 7.webpack把style-loader处理的结果，合并到 /dist/bundle.js 中，最终生成打包好的文件。

4.打包处理less文件

1.运行 npm i less-loader@10.0.1 less@4.1.1 -D 命令
2.在webpack.config.js的 module——> rules 数组中，添加 loader 规则如下：

    module:{ // 所有第三方文件模块的匹配规则
        rules:[ // 文件后缀名的匹配规则
            { test:/\.less$/,use:['style-loader','css-loader','less-loader']}
        ]
    }

5.打包处理样式表中与url路径相关的文件
- 1.运行 npm i url-loader@4.1.1 file-loader@6.2.0 -D 命令
  - file-loader是内置依赖项，只需要安装，不需要配置
- 2.在webpack.config.js的 module——>rules 数组中，添加loader规则如下：
```
    module: { // 所有第三方文件模块的匹配规则
        rules: [ // 文件后缀名的匹配规则
            { test:/\.jpg|png|gif$/, use:'url-loader?limit=22229' },
        ]
    }
```
- 其中 ? 之后的是loader的参数项
  - limit用来指定图片的大小，单位是字节(byte)
  - 只有 ≤ limit 大小的图片，才会被转为 base64 格式的图片
- 注意：项目起服务以后，浏览器会请求和下载 index.html 文件里面的标签，浏览器拿到标签以后，只是拿到了 img 标签，并没有拿到所引入的图片。如果浏览器想要真正的将图片展示出来，需要再发送一次请求去拿 logo.jpg 图片，然后才能将图片渲染到浏览器页面。当将图片转为base64码后，项目起服务后，浏览器在请求和下载 index.html 文件里面的标签的时候，也会将图片请求回来。
  - 优点：使用base64的好处是防止发送一些不必要的请求。
  - 缺点：使用base64转码的缺点是会增大文件的体积。小图片适合进行base64转码，大图片不适合进行base64转码。
- 示例：
6.打包处理js文件中的高级语法
- webpack只能打包处理一部分高级的JavaScript语法。对于那些webpack无法处理的高级js语法，需要借助于babel-loader进行打包处理。例如webpack无法处理下面的JavaScript代码：
```
    // 1.定义了名为 info 的装饰器
    function info(target){
        // 2.为目标添加静态属性 info
        target.info = 'Person info'
    }

    // 3.为Person类应用info装饰器
    @info
    class Person{}

    // 4.打印Person的静态属性info
    console.log(Person.info);
```
- 6-1.安装babel-loader相关的包
  - 运行如下的命令安装对应的依赖包：npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D
  - 在webpack.config.js的 module——>rules 数组中，添加loader规则如下：
```
    // 注意: 必须使用 exclude 指定排除项; 因为 node_modules 目录下的第三方包不需要被打包
    { test:/\.js$/, use:'babel-loader', exclude:/node_modules/}
```
- 6-2.配置babel-loader
  - 在项目根目录下，创建名为 babel.config.js 的配置文件，定义Babel的配置项如下：
```
    // 声明 babel 可用的插件
    plugins:[['@babel/plugin-proposal-decorators',{legacy:true}]]
```
注意：@babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 告诉 babel-loader 如何解析和处理装饰器语法 @info 。

打包发布

1.为什么要打包发布？
- 项目开发完成之后，需要使用webpack对项目进行打包发布，主要原因有以下两点：
  - 1.开发环境下，打包生成的文件存放在内存中，无法获取到最终打包生成的文件
  - 2.开发环境下，打包生成的文件不会进行代码压缩和性能优化
- 为了让项目能够在生产环境中高性能的运行，因此需要对项目进行打包发布。
2.配置webpack的打包发布
- 在 package.json 文件的script节点下，新增build命令如下：
```
    "scripts":{
        "dev":"webpack server", // 开发环境中，运行dev命令
        "build":"webpack --mode production" // 项目发布时，运行build命令
    }
```
- --model是一个参数项，用来指定webpack的运行模式。production代表生产环境，会对打包生成的文件进行代码压缩和性能优化。
- 注意：通过 --model 指定的参数项，会覆盖webpack.config.js中的model选项。
- 注意："dev":"webpack server" 中的server参数是为了避免修改完源代码后，需要重新执行npm run dev，所以安装了一个插件可以监听源代码的变化，自动实现实时打包，所以需要配置上server。(server会将我们生成的文件放到内存里面，不会放到磁盘[项目]里面)
- 注意：在开发阶段运行的命令npm run dev，生成的文件在内存上。在发布的时候，执行npm run build, 生成的文件在物理磁盘上。

3.把JavaScript文件统一生成到js目录中

在 webpack.config.js 配置文件的 output 节点中，进行如下的配置：

    output:{
        path:path.join(__dirname,'dist'),

        // 明确告诉 webpack 把生成的 bundle.js 文件存放到dist目录下的js子目录中
        filename:'js/bundle.js',
    }

4.把图片文件统一生成到image目录中

修改 webpack.config.js 中的 url-loader 配置项，新增 outputPath 选项即可指定图片文件的输出路径：

    {
        test:/\.jpg|png|gif$/,
        use:{
            loader:'url-loader',
            options:{
                //只有 ≤ limit 大小的图片，才会被转为 base64 格式的图片
                limit:22228,

                //明确指定把打包生成的图片文件，存储到dist目录下的images文件夹中
                outputPath:'images',
            }
        }
    }

5.自动清理 dist 目录下的旧文件

为了在每次打包发布时自动清理掉dist目录中的旧文件，可以安装并配置 clean-webpack-plugin 插件：npm install clean-webpack-plugin@3.0.0 -D

    // 1.安装清理dist目录的webpack插件
    npm install clean-webpack-plugin@3.0.0 -D 或者 npm install --save-dev clean-webpack-plugin

    // 2.按需导入插件，得到插件的构造函数之后，创建插件的实例对象
    const { CleanWebpackPlugin } = require('clean-webpack-plugin');
    const cleanPlugin = new CleanWebpackPlugin();

    // 3.把创建的 cleanPlugin 插件实例对象，挂载到 plugins 节点中
    plugins:[htmlPlugin,cleanPlugin], // 挂载插件

clean-webpack-plugin插件学习网址：www.npmjs.com/package/cle…

小结：打包发布做了哪些事情?
- 1.在 webpack.config.js 文件中自定义了一个build命令 "build": "webpack --mode production" ，执行npm run build就会执行打包发布的操作。(配置的dev命令 "dev": "webpack serve" ，带serve会将打包的文件放到内存当中，不带serve会将打包的文件放到磁盘中)。如果配置的build命令是 "build": "webpack" ,他会将打包的代码放到物理磁盘上，但是不会进行压缩优化。
- 2.在output中设置打包的时候将 bundle.js 文件放到 js 目录下。
- 3.在module中设置将打包后的图片放到指定目录下:outputPath:'images'
- 4.设置每次执行 npm run build 自动删除上一次打包的dist文件，安装 clean-webpack-plugin 插件，并进行配置。

Source Map

1.什么是Source Map?
- Source Map就是一个信息文件，里面存储着位置信息。也就是说，Source Map文件中存储着压缩混淆后的代码，所对应的转换前的位置。
- 有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码，能够极大的方便后期的调试。
2.webpack开发环境下的Source Map
- 在开发环境下，webpack默认启用了Source Map功能。当程序运行出错时，可以直接在控制台提示错误行的位置，并定位到具体的源代码：
- 2-1.开发环境下默认生成的Source Map，记录的是生成后的代码的位置。会导致运行时报错的行数与源代码的行数不一致的问题，示意图如下：
- 2-2.解决默认Source Map的问题
  - 开发环境下，推荐在 webpack.config.js 中添加如下的配置，即可保证运行时报错的行数与源代码的行数保持一致：
```
    module.exports = {
        mode:'development',

        // eval-source-map 仅限在"开发模式"下使用，不建议在"生产模式"下使用
        // 此选项生成的Source Map能够保证"运行时报错的行数"与"源代码的函数"保持一致
        devtool:'eval-source-map',

        // 省略其他配置项...
    }
```
  - demo测试执行命令npm run dev,查看浏览器控制台Sources中错误代码所在的位置行数
3.webpack生产环境下的Source Map
- 在生产环境下，如果省略了devtool选项，则最终生成的文件中不包含Source Map。这能够防止原始代码通过Source Map的形式暴露给别有用途之人：
- 3-1.只定位行数不暴露源码
  - 在生产环境下，如果只想定位报错的具体行数，且不想暴露源码。此时可以将devtool的值设置为 nosources-source-map 。实际效果如图所示：测试demo命令npm run build
- 3-2.定位行数且暴露源码( 强烈不推荐)
  - 在生产环境下，如果想在定位报错行数的同时，展示具体报错的源码。此时可以将 devtool 的值设置为 source-map。实际效果如图展示：
4.Source Map的最佳实践
- 1.开发环境下：
  - 建议把 devtool 的值设置为 eval-source-map
  - 好处：可以精准定位到具体的错误行
- 2.生产环境下：
  - 建议关闭 Source Map 或将devtool的值设置为 nosources-source-map
  - 好处：防止源码泄露，提高网站的安全性

配置 @ 表示 src 源代码目录

A组件引入B组件,路径查找让其从外往里查找,在webpack.config.js中配置：

    resolve:{
        alias:{
            // 下面代码表示告诉webpack，程序员写的代码中，@ 符号表示 src 这一层目录
            '@':path.join(__dirname,'./src/')
        }
    }