Vue3依赖的Webpack基础打包（六）

牧云code
1,663 阅读8分钟

1.认识Webpack

前端开发日益复杂的今天

我们会使用到很多东西

比如需要模块化、预处理器、代码热更新、代码压缩优化等

目前三大框架都可以借助脚手架（cli），脚手架内部又是基于webpack来帮助我们支持模块化、Typescript、Less、打包优化等

image-20220129215128452

image-20220129215400071

webpack是一个静态的模块化打包工具，为现代的JavaScript应用程序

  • 打包bundler：webpack可以将帮助我们进行打包，所以它是一个打包工具
  • 静态的static：这样表述的原因是我们最终可以将代码打包成最终的静态资源（部署到静态服务器）
  • 模块化module：webpack默认支持各种模块化开发，ES Module、CommonJS、AMD等
  • 现代的modern：我们前端说过，正是因为现代前端开发面临各种各样的问题，才催生了webpack的出现和发展

image-20220129215431972

2.webpack使用前提

webpack的官方文档是webpack.js.org/

webpack的中文官方文档是webpack.docschina.org/

Webpack的运行是依赖Node环境的，所以我们电脑上必须有Node环境

所以我们需要先安装Node.js，并且同时会安装npm（node.js内置npm）

Node官方网站：nodejs.org/

3.Vue项目需要加载的文件

JavaScript的打包：

  • 将ES6转换成ES5的语法
  • TypeScript的处理，将其转换成JavaScript

CSS的处理

  • CSS文件模块的加载、提取
  • Less、Sass等预处理器的处理

资源文件img、font

  • 图片img文件的加载
  • 字体font文件的加载

HTML资源的处理

  • 打包HTML资源文件

处理vue项目的SFC文件.vue文件

4.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 # 局部安装

image-20220129235042174

5.Webpack的默认打包

在目录下直接执行 webpack 命令。我们可以通过webpack进行打包，之后运行打包之后的代码

生成一个dist文件夹，里面存放一个main.js的文件，就是我们打包之后的文件

打包后文件被压缩和筹划了，但是现代码中依然存在ES6的语法，如const、箭头函数，后续可以使用babel转换语法为ES5之前的语法

为什么当我们使用webpack命令能正常打包，入口是什么？

  • 当我们运行webpack时，webpack会查找当前目录下的 src/index.js作为入口，没有则报错

当然我们可以配置指定入口和出口

npx webpack --entry ./src/main.js --output-path ./build

5.创建局部的webpack

之前使用的是全局的webpack命令，如果我们要使用局部按照以下步骤操作

  1. 创建package.json文件，用于管理项目的信息、库依赖等 => npm init
  2. 安装局部的webpack => npm install webpack webpack-cli -D
  3. 使用局部的webpack => 使用局部的webpack
  4. 在package.json中创建scripts脚本，执行脚本打包即可 npm run build

image-20220129235319003

6.Webpack配置文件

通常情况webpack需要打包的项目是非常复杂，所以我们需要一系列额外配置满足要求

我们可以在根目录下创建一个webpack.config.js文件，来作为webpack的配置文件

image-20220129235447296

继续执行npm run build依然可以正常打包

但是如果我们想webpack配置文件的名字默认不是webpack.config.js，而是wk.config.js

这时候我们通过--config指定对应配置文件

webpack --config wk.config.js

执行命令打包繁琐，我们同样可以在package.json中增加一个新的脚本执行这个命令打包

image-20220129235935053

7.Webpack的依赖图

当上webpack在处理应用程序时，它会根据命令或者配置文件找到入口文件

从入口开始，会生成一个 依赖关系图，这个依赖关系图会包含应用程序中所需的所有模块（比如.js文件、css文件、图片、字体等）

p 然后遍历图结构，打包一个个模块（根据文件的不同使用不同的loader来解析）

8.css-loader的使用

先看一个例子：当我们通过JavaScript创建了一个元素，并且希望给它设置一些样式

image-20220130000231897

上面报错告诉我们需要一个loader来加载这个css文件，loader又是什么呢？

loader 可以使用于对模块的源代码进行转换

我们可以将css文件也看成是一个模块，我们是通过import来加载这个模块的

但是在加载这个模块时，webpack其实并不知道如何对其进行加载，我们必须制定对应的loader来完成这个功能

所以对于读取CSS文件的loader最常用的就是css-loader

安装：npm install css-loader -D

对于css-loader加载CSS文件有三种方式：

1.内联方式

  • 内联方式使用较少，因为不方便管理，在引入的样式前加上使用的loader，并且使用!分割

image-20220130000648213

2.CLI方式

  • 在webpack5的文档中已经没有了--module-bind，实际应用中也比较少使用，因为不方便管理

3.配置方式

  • 这种方式使得我们可以在webpack.config.js文件中写明配置信息
  • 这种方式可以配置多个不同的loader，更好的展示和维护

module.rules的配置如下：

  • rules属性对应的值是一个数组：[Rule]

  • 数组中存放的是一个个的Rule，Rule是一个对象，对象中可以设置多个属性

    • test属性：用于对 resource（资源）进行匹配的，通常会设置成正则表达式

    • use属性：对应的值时一个数组：[UseEntry]

      • UseEntry是一个对象，可以通过对象的属性来设置一些其他属性

        • loader：必须有一个 loader属性，对应的值是一个字符串
        • options：可选的属性，值是一个字符串或者对象，值会被传入到loader中
        • query：目前已经使用options来替代

      • 传递字符串（如use: [ 'css-loader' ]）是（如use: [ { loader: 'css-loader'} ] ) loader 属性的简写方式

image-20220130003320748

9.style-loader的使用

上面我们已经可以通过css-loader来加载css文件了

但是这个css在我们的代码中并没有生效（页面没有效果）

这是因为css-loader只是负责将.css文件进行解析，并不会将解析之后的css插入到页面中

如果我们希望再完成插入style的操作就需要style-loader了

安装：npm install style-loader -D

配置style-loader：

  • 注意：因为loader的执行顺序是从右向左（或者说从下到上，或者说从后到前的），所以我们需要将style-loader写到css-loader的前面；

image-20220130004615317

重新npm run build之后发现我们css是通过页内样式的方式添加进来的

后续我们会说如何抽离到单独的文件以及压缩操作

10.less-loader的使用

开发中，我们可能会使用less、sass、stylus的预处理器来编写css样式提高效率

我们就需要将这些CSS预处理转换成普通的CSS的工具

比如我们编写的less样式：

image-20220130005052605

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

npm install less -D

执行如下命令：

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

但是我们更有可能使用less-loader来自动转换less到css

npm install less-loader -D

image-20220130005529148

执行npm run build，less就可以自动转换成css，并且页面也会生效了

11.PostCSS的使用

PostCSS是一个通过JavaScript来转换样式的工具

这个工具可以帮助我们进行一些CSS的转换和适配，比如自动添加浏览器前缀、css样式的重置

但是实现这些功能，我们还需要借助于PostCSS对应的插件

命令行使用PostCSS

终端使用PostCSS需要单独安装一个工具postcss-cli

npm install postcss postcss-cli -D

我们编写一个需要添加前缀的css：

autoprefixer插件

因为我们需要添加前缀，所以要安装autoprefixer

npm install autoprefixer -D

直接使用使用postcss工具，并且制定使用autoprefixer

npx postcss --use autoprefixer -o end.css ./src/css/style.css

postcss-loader

真实开发中我们往往是借助于构建工具，而非命令行工具

在webpack中使用postcss就是使用postcss-loader来处理的

安装postcss-loader => npm install postcss-loader -D

配置完loader后我们还需要配置postcss对应的插件才会起效果

image-20220130010620729

我们也可以将PostCSS配置的options放到单独文件管理

这时我们可以在根目录创建postcss.config.js

image-20220130010836636

image-20220130010959673

postcss-preset-env插件

实际我们在配置postcss-loader时，我们配置插件并不需要使用autoprefixer

我们可以使用postcss-preset-env这个postcss的插件

它可以帮助我们将一些现代的CSS特性，转成大多数浏览器认识的CSS，并且会根据目标浏览器或者运行时环境添加所需的polyfill，当然是内置了autoprefixer

安装：npm install postcss-preset-env -D

image-20220130011307439

同时匹配less或者css

image-20220130011526697

avatar
文章
阅读
粉丝