四、邂逅webpack 和静态模块化打包文件及相关配置的深入学习

Lyk 2022/8/17 前端工程化webpackpackage.jsonwebpack.config.js打包css文件css-loaderstyle-loader打包less文件less-loader自动添加前缀-兼容浏览器postcss-loaderpostcss.config.js打包图片文件打包js文件babel-loaderES6打包成ES5语法babel.config.js打包vue文件vue-loaderresolve模块解析

webpack整个演练案例代码 (opens new window)

# 1、Node内置模块path

# 1.1.内置模块path

path模块用于对路径和文件进行处理，提供了很多好用的方法。
我们知道在Mac OS、Linux和window上的路径时不一样的
- window上会使用 \或者 \ 来作为文件路径的分隔符，当然目前也支持 /；
- 在Mac OS、Linux的Unix操作系统上使用 / 来作为文件路径的分隔符；
那么如果我们在window上使用 \ 来作为分隔符开发了一个应用程序，要部署到Linux上面应该怎么办呢？
- 显示路径会出现一些问题；
- 所以为了屏蔽他们之间的差异，在开发中对于路径的操作我们可以使用 path 模块；
可移植操作系统接口（英语：Portable Operating System Interface，缩写为POSIX）
- Linux和Mac OS都实现了POSIX接口；
- Window部分电脑实现了POSIX接口；

# 1.2.path常见的API

从路径中获取信息
- path.dirname：获取文件的父文件夹的绝对路径；
- path.basename：获取文件名；
- path.extname：获取文件扩展名；
路径的拼接：path.join
- 如果我们希望将多个路径进行拼接，但是不同的操作系统可能使用的是不同的分隔符；
- 这个时候我们可以使用path.join函数；
拼接绝对路径：path.resolve
- path.resolve() 方法会把一个路径或路径片段的序列解析为一个绝对路径；
- 给定的路径的序列是从右往左被处理的，后面每个 path 被依次解析，直到构造完成一个绝对路径；
- 如果在处理完所有给定path的段之后，还没有生成绝对路径，则使用当前工作目录；
- 生成的路径被规范化并删除尾部斜杠，零长度path段被忽略；
- 如果没有path传递段，path.resolve()将返回当前工作目录的绝对路径；

//假设该文件index.js的路径为：C:\Users\Lyka\Desktop\lyk_demo\04_webpack\01_node内置模块\index.js 

const path = require('path')
console.log(__filename)//C:\Users\Lyka\Desktop\lyk_demo\04_webpack\01_node内置模块\index.js
console.log(__dirname)//C:\Users\Lyka\Desktop\lyk_demo\04_webpack\01_node内置模块

//path内置模块的一些api展示
console.log(path.dirname(__dirname))//C:\Users\Lyka\Desktop\lyk_demo\04_webpack
console.log(path.basename(__filename))//index.js
console.log(path.extname(__filename))//.js

console.log(path.join(__dirname,'views'))//C:\Users\Lyka\Desktop\lyk_demo\04_webpack\01_node内置模块\views
console.log(path.resolve())//C:\Users\Lyka\Desktop\lyk_demo\04_webpack\01_node内置模块

const resolve = dir => path.resolve(__dirname,dir)
console.log(resolve('src'))//C:\Users\Lyka\Desktop\lyk_demo\04_webpack\01_node内置模块\src

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 1.3.在webpack中的使用

在webpack中获取路径或者起别名的地方也可以使用

# 2、webpack的深入了解

# 2.1.认识webpack

事实上随着前端的快速发展，目前前端的开发已经变的越来越复杂了：
- 比如开发过程中我们需要通过模块化的方式来开发；
- 比如也会使用一些高级的特性来加快我们的开发效率或者安全性，比如通过ES6+、TypeScript开发脚本逻辑，通过sass、less等方式来编写css样式代码；
- 比如开发过程中，我们还希望实时的监听文件的变化来并且反映到浏览器上，提高开发的效率；
- 比如开发完成后我们还需要将代码进行压缩、合并以及其他相关的优化；
- 等等….
但是对于很多的前端开发者来说，并不需要思考这些问题，日常的开发中根本就没有面临这些问题：
- 这是因为目前前端开发我们通常都会直接使用三大框架来开发：Vue、React、Angular；
- 但是事实上，这三大框架的创建过程我们都是借助于脚手架（CLI）的；
- 事实上Vue-CLI、create-react-app、Angular-CLI都是基于webpack来帮助我们支持模块化、less、TypeScript、打包优化等的；

# 2.2.脚手架依赖webpack

事实上我们上面提到的所有脚手架都是依赖于webpack的

# 2.3.Webpack到底是什么呢？

我们先来看一下官方的解释：webpack is a static module bundler for modern JavaScript applications.
- webpack是一个静态的模块化打包工具，为现代的JavaScript应用程序；
我们来对上面的解释进行拆解：
- 打包bundler：webpack可以将帮助我们进行打包，所以它是一个打包工具
- 静态的static：这样表述的原因是我们最终可以将代码打包成最终的静态资源（部署到静态服务器）；
- 模块化module：webpack默认支持各种模块化开发，ES Module、CommonJS、AMD等；
- 现代的modern：我们前端说过，正是因为现代前端开发面临各种各样的问题，才催生了webpack的出现和发展；
Webpack官方的图片

# 2.4.Vue项目加载的文件有哪些呢？

JavaScript的打包：
- 将ES6转换成ES5的语法；
- TypeScript的处理，将其转换成JavaScript；
CSS的处理：
- CSS文件模块的加载、提取；
- Less、Sass等预处理器的处理；
资源文件img、font：
- 图片img文件的加载；
- 字体font文件的加载；
HTML资源的处理：打包HTML资源文件；
处理vue项目的SFC文件.vue文件；

# 2.5.Webpack的使用前提

webpack的官方文档是webpack官方文档 (opens new window)
- webpack的中文官方文档是webpack中文官方文档 (opens new window)
- DOCUMENTATION：文档详情，也是我们最关注的
Webpack的运行是依赖Node环境的，所以我们电脑上必须有Node环境
- 所以我们需要先安装Node.js，安装node的同时会安装npm；
- 我当前电脑上的node版本是v16.16.0，npm版本是8.11.0（你也可以使用nvm或者n来管理Node版本）；
- Node官方网站：node官方网站 (opens new window)

# 2.6.Webpack的安装

webpack的安装目前分为两个：webpack、webpack-cli
那么它们是什么关系呢？
- 执行webpack命令，会执行node_modules下的.bin目录下的webpack；
- webpack在执行时是依赖webpack-cli的，如果没有安装就会报错；
- 而webpack-cli中代码执行时，才是真正利用webpack进行编译和打包的过程；
- 所以在安装webpack时，我们需要同时安装webpack-cli（第三方的脚手架事实上是没有使用webpack-cli的，而是类似于自己的vue-service-cli的东西）

npm install webpack webpack-cli –g # 全局安装
npm install webpack webpack-cli –D # 局部安装 且安装到开发环境当中

1
2

# 2.7.Webpack的默认打包

我们可以通过webpack进行打包，之后运行打包之后的代码
- 在目录下直接执行 webpack 命令 : webpack
生成一个dist文件夹，里面存放一个main.js的文件，就是我们打包之后的文件：
- 这个文件中的代码被压缩和丑化了；
- 另外我们发现代码中依然存在ES6的语法，比如箭头函数、const等，这是因为默认情况下webpack并不清楚我们打包后的文件是否需要转成ES5之前的语法，后续我们需要通过babel来进行转换和设置；
我们发现是可以正常进行打包的，但是有一个问题，webpack是如何确定我们的入口的呢？
- 事实上，当我们运行webpack时，webpack会查找当前目录下的 src/index.js作为入口；
- 所以，如果当前项目中没有存在src/index.js文件，那么会报错；
当然，我们也可以通过配置来指定入口和出口

# 指定入口为： ./src/main.js   出口为：./build
npx webpack --entry ./src/main.js --output-path ./build

1
2

# 2.8.创建局部的webpack

前面我们直接执行webpack命令使用的是全局的webpack，如果希望使用局部的可以按照下面的步骤来操作。
第一步：创建package.json文件，用于管理项目的信息、库依赖等：npm init
第二步：安装局部的webpack npm install webpack webpack-cli -D
第三步：使用局部的webpack npx webpack --> 当然也可以直接webpack （因为webpack内部进行了处理，即使不用npx,也会优先找局部的版本）
第四步：在package.json中创建scripts脚本，执行脚本打包即可 npm run build

{
  "scirpt" : "webpack"
}

1
2
3

# 2.9.Webpack配置文件

在通常情况下，webpack需要打包的项目是非常复杂的，并且我们需要一系列的配置来满足要求，默认配置必然是不可以的。
我们可以在根目录下创建一个webpack.config.js文件，来作为webpack的配置文件：

继续执行webpack命令，依然可以正常打包 : npm run build

# 2.10.指定配置文件

但是如果我们的配置文件并不是webpack.config.js的名字，而是其他的名字呢？
- 比如我们将webpack.config.js修改成了 wk.config.js；
- 这个时候我们可以通过 --config 来指定对应的配置文件,直接执行即可；webpack --config wk.config.js
但是每次这样执行命令来对源码进行编译，会非常繁琐，所以我们可以在package.json中增加一个新的脚本：
- 之后我们执行 npm run build来打包即可。

# 2.11.Webpack的依赖图

webpack到底是如何对我们的项目进行打包的呢？
- 事实上webpack在处理应用程序时，它会根据命令或者配置文件找到入口文件；(没有设置配置文件时；默认找当前文件夹的src/index.js文件为入口文件；)
- 从入口开始，会生成一个依赖关系图，这个依赖关系图会包含应用程序中所需的所有模块（比如.js文件、css文件、图片、字体等）；
- 然后遍历图结构，打包一个个模块（根据文件的不同使用不同的loader来解析）；

# 3、css-loader的学习

# 3.1.编写案例代码引出的问题

我们创建一个component.js
- 通过JavaScript创建了一个元素，并且希望给它设置一些样式；

# 3.2.css-loader的使用

css-loader文档 (opens new window)
上面的错误信息告诉我们需要一个loader来加载这个css文件，但是loader是什么呢？
- loader 可以用于对模块的源代码进行转换；
- 我们可以将css文件也看成是一个模块，我们是通过import来加载这个模块的；
- 在加载这个模块时，webpack其实并不知道如何对其进行加载，我们必须制定对应的loader来完成这个功能；
那么我们需要一个什么样的loader呢？
- 对于加载css文件来说，我们需要一个可以读取css文件的loader；
- 这个loader最常用的是css-loader；
css-loader的安装：npm install css-loader -D

# 3.3.css-loader的使用方案

如何使用这个loader来加载css文件呢？有三种方式：
- 内联方式；
- CLI方式（webpack5中不再使用）；
- 配置方式；
内联方式：内联方式使用较少，因为不方便管理；
- 在引入的样式前加上使用的loader，并且使用!分割；
CLI方式
- 在webpack5的文档中已经没有了--module-bind；
- 实际应用中也比较少使用，因为不方便管理；

# 3.4.loader配置方式

配置方式表示的意思是在我们的webpack.config.js文件中写明配置信息：
- module.rules中允许我们配置多个loader（因为我们也会继续使用其他的loader，来完成其他文件的加载）；
- 这种方式可以更好的表示loader的配置，也方便后期的维护，同时也让你对各个Loader有一个全局的概览；
module.rules的配置如下：
- rules属性对应的值是一个数组：[Rule]
- 组中存放的是一个个的Rule，Rule是一个对象，对象中可以设置多个属性：
  - test属性：用于对 resource（资源）进行匹配的(即匹配对应资源的后缀名)，通常会设置成正则表达式；
  - use属性：对应的值时一个数组：[UseEntry]
    - UseEntry是一个对象，可以通过对象的属性来设置一些其他属性
      - ➢ loader：必须有一个 loader属性，对应的值是一个字符串；
      - ➢ options：可选的属性，值是一个字符串或者对象，值会被传入到loader中；
      - ➢ query：目前已经使用options来替代；
  - 传递字符串（如：use: [ 'style-loader' ]）是 loader 属性的简写方式（如：use: [ { loader: 'style-loader'} ]）；
  - loader属性： Rule.use: [ { loader } ] 的简写。

# 3.5.Loader配置的学习

# 4、style-loader的学习

# 4.1.认识style-loader

style-loader文档 (opens new window)
我们已经可以通过css-loader来加载css文件了
- 但是你会发现这个css在我们的代码中并没有生效（页面没有效果）。
这是为什么呢？
- 因为css-loader只是负责将.css文件进行解析，并不会将解析之后的css插入到页面中；
- 如果我们希望再完成插入style的操作，那么我们还需要另外一个loader，就是style-loader；
安装style-loader：

npm install style-loader -D

# 4.2.配置style-loader

那么我们应该如何使用style-loader：
- 在配置文件中，添加style-loader；
- 注意：因为loader的执行顺序是从右向左（或者说从下到上，或者说从后到前的），所以我们需要将style-loader写到cssloader的前面

rules: [
  {
    test: /\.css$/,
    use: [ // use中多个loader的使用顺序是从后往前,从右至左的（所以style-loader在css-loader的前面）
      { loader: "style-loader" },
      { loader: "css-loader" }
    ]
  }
]

1
2
3
4
5
6
7
8
9

重新执行编译npm run build，可以发现打包后的css已经生效了：
- 当前目前我们的css是通过页内样式的方式添加进来的；
- 后续我们也会学习如何将css抽取到单独的文件中，并且进行压缩等操作；

# 5、less-loader的学习

# 5.1.如何处理less文件？

在我们开发中，我们可能会使用less、sass、stylus的预处理器来编写css样式，效率会更高。
那么，如何可以让我们的环境支持这些预处理器呢？
- 首先我们需要确定，less、sass等编写的css需要通过工具转换成普通的css；
比如我们编写如下的less样式：

@fontSize:30px;
@fontWeight:700;

.content {
  font-size:@fontSize;
  font-weight:@fontWeight;
}

1
2
3
4
5
6
7

# 5.2.Less工具处理

我们可以使用less工具来完成它的编译转换：

npm install less -D

执行如下命令：

npx lessc ./src/css/title.less title.css

# 5.3.less-loader处理

less-loade文档 (opens new window)
但是在项目中我们会编写大量的css，它们如何可以自动转换呢？
- 这个时候我们就可以使用less-loader，来自动使用less工具转换less到css；【如果之前已经安装了less，那么这里不需要再次安装；】

npm install less less-loader -D

配置webpack.config.js
- 执行npm run build；less就可以自动转换成css，并且页面也会生效了

module: {
  rules: [
    {
      test: /\.css$/,
      use: ["style-loader", "css-loader",]
    },
    {
      test:/\.less$/,
      use: ["style-loader",'css-loader',"less-loader"]
    }
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12

# 6、postcss-loader及相关插件的学习

# 6.1.认识PostCSS工具

什么是PostCSS呢？
- PostCSS是一个通过JavaScript来转换样式的工具；
- 这个工具可以帮助我们进行一些CSS的转换和适配，比如自动添加浏览器前缀、css样式的重置；
- 但是实现这些功能，我们需要借助于PostCSS对应的插件；

如何使用PostCSS呢？主要就是两个步骤：
- 第一步：查找PostCSS在构建工具中的扩展，比如webpack中的postcss-loader；
- 第二步：选择可以添加你需要的PostCSS相关的插件；

# 6.2.postcss-loader

postcss-loader文档 (opens new window)
我们可以借助于构建工具：
- 在webpack中使用postcss就是使用postcss-loader来处理的；
我们来安装postcss-loader：

npm install postcss-loader -D

我们修改加载css的loader：
- 注意：因为postcss需要有对应的插件autoprefixer才会起效果，所以我们需要配置它的plugin；
  - 安装autoprefixer插件：npm install autoprefixer -D

# 6.3.单独的postcss配置文件

因为我们需要自动添加前缀，所以要安装postcss的插件autoprefixer：npm install autoprefixer -D
- autoprefixer插件文档 (opens new window)
我们可以将这些配置信息放到一个单独的文件中进行管理：（我们发现上面6.2写法太麻烦，如果多处用到，要写好几遍）所以我们可以将他抽出来，放到一个单独文件中进行管理
- 在根目录下创建postcss.config.js；如下：是不是更简洁了呀

# 6.4.postcss-preset-env插件替代 autoprefixer插件

PostCSS预设环境-postcss-preset-env文档 (opens new window)
事实上，在配置postcss-loader时，我们配置插件并不需要使用autoprefixer。
我们可以使用另外一个插件：postcss-preset-env
- postcss-preset-env也是一个postcss的插件；
- 它可以帮助我们将一些现代的CSS特性，转成大多数浏览器认识的CSS，并且会根据目标浏览器或者运行时环境添加所需的polyfill；
  - polyfill (polyfiller)，指的是一个代码块。. 这个代码块向开发者提供了一种技术，这种技术可以让浏览器提供原生支持，抹平不同浏览器对API兼容性的差异。
- 也包括会自动帮助我们添加autoprefixer（所以相当于已经内置了autoprefixer）；
首先，我们需要安装postcss-preset-env：npm install postcss-preset-env -D
之后，我们直接修改掉之前的autoprefixer即可：
- 注意：我们在使用某些postcss插件时，也可以直接传入字符串

# 7、webpack打包本地图片资源

# 7.1.加载图片案例准备

为了演示我们项目中可以加载图片，我们需要在项目中使用图片，比较常见的使用图片的方式是两种：
- img元素，设置src属性；
- 其他元素（比如div），设置background-image的css属性；

这个时候打包会报错

# 7.2.认识asset module type

asset module文档 (opens new window)
我们当前使用的webpack版本是webpack5：
- 在webpack5之前，加载这些资源我们需要使用一些loader，比如raw-loader 、url-loader、file-loader；
- 在webpack5开始，我们可以直接使用资源模块类型（asset module type），来替代上面的这些loader；
资源模块类型(asset module type)，通过添加 4 种新的模块类型，来替换所有这些 loader：
- asset/resource 发送一个单独的文件并导出 URL。
  - 之前通过使用 file-loader 实现；【将文件发送到输出目录】
- asset/inline 导出一个资源的 data URI。
  - 之前通过使用 url-loader 实现；【将文件作为数据 URI 内联到包中】
- asset/source 导出资源的源代码
  - 之前通过使用 raw-loader 实现；【将文件作为字符串导入】
- asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。
  - 之前通过使用 url-loader，并且配置资源体积限制实现；

# 7.3.asset module type的使用

比如加载图片，我们可以使用下面的方式：
但是，如何可以自定义文件的输出路径和文件名呢？
- 方式一：修改output，添加assetModuleFilename属性；
- 方式二：在Rule中，添加一个generator属性，并且设置filename；
我们这里介绍几个最常用的placeholder（占位符）：
- [ext]：处理文件的扩展名；
- [name]：处理文件的名称；
- [hash]：文件的内容，使用MD4的散列函数处理，生成的一个128位的hash值（32个十六进制）；

# 7.4.url-loader的limit效果

开发中我们往往是小的图片需要转换，但是大的图片直接使用图片即可
- 这是因为小的图片转换base64之后可以和页面一起被请求，减少不必要的请求过程；
- 而大的图片也进行转换，反而会影响页面的请求速度；
我们需要两个步骤来实现：
- 步骤一：将type修改为asset；
- 步骤二：添加一个parser属性，并且制定dataUrl的条件，添加maxSize属性；

# 8、babel-loader及相关插件的学习

# 8.1.为什么需要babel？

事实上，在开发中我们很少直接去接触babel，但是babel对于前端开发来说，目前是不可缺少的一部分：
- 开发中，我们想要使用ES6+的语法，想要使用TypeScript，开发React项目，它们都是离不开Babel的；
- 所以，学习Babel对于我们理解代码从编写到线上的转变过程至关重要；
那么，Babel到底是什么呢？
- Babel是一个工具链，主要用于旧浏览器或者环境中将ECMAScript 2015+代码转换为向后兼容版本的JavaScript；
- 包括：语法转换、源代码转换等；\

[1,2,3].map(n => n + 1)

//转换成
[1,2,3].map(function(n) {
  return n + 1
})

1
2
3
4
5
6

# 8.2.Babel命令行使用

babel本身可以作为一个独立的工具（和postcss一样），不和webpack等构建工具配置来单独使用。
如果我们希望在命令行尝试使用babel，需要安装如下库：
- @babel/core：babel的核心代码，必须安装；
- @babel/cli：可以让我们在命令行使用babel；

npm install @babel/cli @babel/core -D

安装好后，使用babel来处理我们的源代码：
- src：是源文件的目录；
- --out-dir：指定要输出的文件夹dist；

npx babel src --out-dir dist

# 8.3.插件的使用

比如我们需要转换箭头函数，那么我们就可以使用箭头函数转换相关的插件：

npm install @babel/plugin-transform-arrow-functions -D # 安装插件

# 使用插件
# src是源文件的目录；
# --out-dir：指定要输出的文件夹dist；
npx babel src --out-dir dist --plugins=@babel/plugin-transform-arrow-functions #

1
2
3
4
5
6

查看转换后的结果：我们会发现 const 并没有转成 var
- 这是因为 plugin-transform-arrow-functions，并没有提供这样的功能；
- 我们需要使用 plugin-transform-block-scoping 来完成这样的功能；

npm install @babel/plugin-transform-block-scoping -D # 安装插件

# 使用插件
# src是源文件的目录；
# --out-dir：指定要输出的文件夹dist；
npx babel src --out-dir dist --plugins=@babel/plugin-transform-block-scoping,@babel/plugin-transform-arrow-functions

1
2
3
4
5
6

# 8.4.Babel的预设preset

但是如果要转换的内容过多，一个个设置是比较麻烦的，我们可以使用预设（preset）：
- 后面我们再具体来讲预设代表的含义；
安装@babel/preset-env预设：

npm install @babel/preset-env -D # 安装插件

执行如下命令：

npx babel src --out-dir dist --presets=@babel/preset-env #使用插件

# 8.5.babel-loader

babel-loader文档 (opens new window)
在实际开发中，我们通常会在构建工具中通过配置babel来对其进行使用的，比如在webpack中。
那么我们就需要去安装相关的依赖：
- 如果之前已经安装了@babel/core，那么这里不需要再次安装；

npm install -D babel-loader @babel/core @babel/preset-env webpack

我们可以设置一个规则，在加载js文件时，使用我们的babel：

# 8.6.babel-preset（@babel/preset-env）

如果我们一个个去安装使用插件，那么需要手动来管理大量的babel插件，我们可以直接给webpack提供一个preset，webpack会根据我们的预设来加载对应的插件列表，并且将其传递给babel。
比如常见的预设有三个：
env
react
TypeScript
安装preset-env：

npm install @babel/preset-env

# 8.7.@babel/preset-env插件的抽取写法

# 9、webpack打包.vue文件

# 9.1.编写App.vue代码

在开发中我们会编写Vue相关的代码，webpack可以对Vue代码进行解析：
- 接下来我们编写自己的App.vue代码; 并安装vue： npm install vue

# 9.2.App.vue的打包过程

我们对代码打包会报错：我们需要合适的Loader来处理文件。

这个时候我们需要使用vue-loader：vue-loader (opens new window)

npm install vue-loader -D

在webpack的模板规则中进行配置

module: {
  rules: [
    {
      test: /\.vue$/,
      loader:'vue-loader'
    }
  ]
}

1
2
3
4
5
6
7
8

# 9.3.@vue/compiler-sfc

打包依然会报错，这是因为我们必须添加@vue/compiler-sfc来对template进行解析：

npm install @vue/compiler-sfc -D

另外我们需要配置对应的Vue插件：
- 注：如下图：main.js在src的文件夹中哦；

重新打包即可支持App.vue的写法；当然我们也可以编写其他的.vue文件来编写自己的组件；
- 注意这里需要在局部安装webpack webpack-cli 再进行打包；否则会报错
- 如下图：是我们全局安装了webpack wepack-cli 而局部没有安装 -> 导致出现的报错情况：

全局安装webpack跟局部(本地)安装，哪一种更好呢？
- webpack可以全局安装或者本地安装。官网上不推荐全局安装，因为这会将你项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。
- 如果全局和局部都安装webpack,这样命令行内直接使用webpack命令，使用的是全局的，想要用局部的wepack，必须：npx webpack；【当然现在webpack内部已经进行了处理，只要命令行用webpack命令就会优先用局部安装的webpack；不需要用npx了】
- 全局安装是为了可以在命令行中使用webpack，项目安装是为了让项目发布后，其他人可以在直接使用npm命令时使用与你相同版本的webpack。这样构建就不会出现失败的情况了
- 所以以后电脑的全局直接不用安装webpack；为了防止带来不必要的麻烦，直接每次安装局部的webpack webpack-cli即可

# 10、resolve模块解析

# 10.1.resolve模块解析

resolve用于设置模块如何被解析：resolve解析模块文档 (opens new window)
在开发中我们会有各种各样的模块依赖，这些模块可能来自于自己编写的代码，也可能来自第三方库；
resolve可以帮助webpack从每个 require/import 语句中，找到需要引入到合适的模块代码；
webpack 使用 enhanced-resolve 来解析文件路径；
# webpack能解析三种文件路径：

➢ 绝对路径
- 由于已经获得文件的绝对路径，因此不需要再做进一步解析。
➢ 相对路径
- 在这种情况下，使用 import 或 require 的资源文件所处的目录，被认为是上下文目录；
- 在 import/require 中给定的相对路径，会拼接此上下文路径，来生成模块的绝对路径；
➢ 模块路径
- 在 resolve.modules中指定的所有目录检索模块；
  - 默认值是 ['node_modules']，所以默认会从node_modules中查找文件；
- 我们可以通过设置别名的方式来替换初识模块路径，具体后面讲解alias的配置；

# 10.2.确实文件还是文件夹

如果是一个文件：
- 如果文件具有扩展名，则直接打包文件；
- 否则，将使用 resolve.extensions选项作为文件扩展名解析；
如果是一个文件夹：
- 会在文件夹中根据 resolve.mainFiles配置选项中指定的文件顺序查找；
  - resolve.mainFiles的默认值是 ['index']；
  - 再根据 resolve.extensions来解析扩展名；

# 10.3.resolve模块中 extensions和alias配置

extensions是解析到文件时自动添加扩展名：
- 默认值是 ['.wasm', '.mjs', '.js', '.json']；
- 所以如果我们代码中想要添加加载 .vue 或者 jsx 或者 ts 等文件时，我们必须自己写上扩展名；
另一个非常好用的功能是配置别名alias：
- 特别是当我们项目的目录结构比较深的时候，或者一个文件的路径可能需要 ../../../这种路径片段；
- 我们可以给某些常见的路径起一个别名；

三、前端开发常用的包管理工具(npm,yarn,pnpm,cnpm,npx)深入学习五、webpack常见的插件和模式及 webpack搭建本地服务器

Lyk-Blog

四、邂逅webpack 和 静态模块化打包文件及相关配置的深入学习

四、邂逅webpack 和 静态模块化打包文件及相关配置的深入学习

# 1、Node内置模块path

# 1.1.内置模块path

# 1.2.path常见的API

# 1.3.在webpack中的使用

# 2、webpack的深入了解

# 2.1.认识webpack

# 2.2.脚手架依赖webpack

# 2.3.Webpack到底是什么呢？

# 2.4.Vue项目加载的文件有哪些呢？

# 2.5.Webpack的使用前提

# 2.6.Webpack的安装

# 2.7.Webpack的默认打包

# 2.8.创建局部的webpack

# 2.9.Webpack配置文件

# 2.10.指定配置文件

# 2.11.Webpack的依赖图

# 3、css-loader的学习

# 3.1.编写案例代码引出的问题

# 3.2.css-loader的使用

# 3.3.css-loader的使用方案

# 3.4.loader配置方式

# 3.5.Loader配置的学习

# 4、style-loader的学习

# 4.1.认识style-loader

# 4.2.配置style-loader

# 5、less-loader的学习

# 5.1.如何处理less文件？

# 5.2.Less工具处理

# 5.3.less-loader处理

# 6、postcss-loader及相关插件的学习

# 6.1.认识PostCSS工具

# 6.2.postcss-loader

# 6.3.单独的postcss配置文件

# 6.4.postcss-preset-env插件 替代 autoprefixer插件

# 7、webpack打包本地图片资源

# 7.1.加载图片案例准备

# 7.2.认识asset module type

# 7.3.asset module type的使用

# 7.4.url-loader的limit效果

# 8、babel-loader及相关插件的学习

# 8.1.为什么需要babel？

# 8.2.Babel命令行使用

# 8.3.插件的使用

# 8.4.Babel的预设preset

# 8.5.babel-loader

# 8.6.babel-preset（@babel/preset-env）

# 8.7.@babel/preset-env插件的抽取写法

# 9、webpack打包.vue文件

# 9.1.编写App.vue代码

# 9.2.App.vue的打包过程

# 9.3.@vue/compiler-sfc

# 10、resolve模块解析

# 10.1.resolve模块解析

# webpack能解析三种文件路径：

# 10.2.确实文件还是文件夹

# 10.3.resolve模块中 extensions和alias配置

四、邂逅webpack 和静态模块化打包文件及相关配置的深入学习

四、邂逅webpack 和静态模块化打包文件及相关配置的深入学习

# 6.4.postcss-preset-env插件替代 autoprefixer插件