前端工程化-认识webpack工具-webpack的配置方法

落日映苍穹つ 2023-09-28 14:39 27阅读 0赞

#### 文章目录 ####

*   *  认识webpack工具
     *   *  node内置模块path
         *  认识webpack
         *  Webpack作用
         *  Vue项目加载的文件
         *  Webpack的安装
     *  webpack配置
     *   *  Webpack的默认打包
         *  Webpack配置文件

### 认识webpack工具 ###

#### node内置模块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接口；

--------------------

**path常见的API**

**从路径中获取信息**

*  **dirname**：获取文件的父文件夹；
 *  **basename**：获取文件名；
 *  **extname**：获取文件后缀名(扩展名)；

// 导入内置模块path
    const path = require("path")
    
    // 自定义一个路径
    const filepath = "C://aaa/bbb/abc.txt"
    
    // 从路径中获取信息
    console.log(path.dirname(filepath)) // C://aaa/bbb
    console.log(path.basename(filepath)) // abc.txt
    console.log(path.extname(filepath)) // .txt

**路径的拼接：path.join**

*  如果我们希望**将多个路径进行拼接**，但是不同的操作系统可能使用的是不同的分隔符；
 *  这个时候我们可以使用path.join函数；

// 导入内置模块path
    const path = require("path")
    
    const path1 = "/aaa/bbb"
    const path2 = "../name/age/height.txt"
    
    console.log(path.join(path1, path2)) // \aaa\name\age\height.txt

**拼接绝对路径：path.resolve**

*  path.resolve() 方法会把一个路径或路径片段的序列解析为一个**路径, 且这个路径一定是绝对路径**；
 *  给定的路径的序列**是从右往左被处理的**，后面**每个 path 被依次解析，直到构造完成一个绝对路径**；

// 导入内置模块path
    const path = require("path")
    
    // 形成绝对路径就会停止解析, 返回这个绝对路径
    console.log(path.resolve("./aaa", "/bbb", "./ccc.txt")) // E:\bbb\ccc.txt

*  如果在**处理完所有给定path的段之后，还没有生成绝对路径，则使用当前工作目录**；

// 导入内置模块path
    const path = require("path")
    
    // 处理完没有形成绝对路径, 那么则使用当前目录
    console.log(path.resolve("./aaa", "./bbb", "./ccc.txt")) 
    // 打印结果 E:\代码\05_Node.js\Node.js基础知识\aaa\bbb\ccc.txt

*  生成的路径被规范化并删除尾部斜杠，零长度path段被忽略；

// 导入内置模块path
    const path = require("path")
    
    // ./ccc.txt/尾部多一个斜杠, 生成后会删除
    // 零长度的path会被忽略
    console.log(path.resolve("/aaa","" , "./ccc.txt")) // E:\aaa\ccc.txt

*  如果没有path传递段，path.resolve()将返回当前工作目录的绝对路径；

// 导入内置模块path
    const path = require("path")
    
    // 没有path传递段，path.resolve()将返回当前工作目录的绝对路径
    console.log(path.resolve()) // E:\代码\05_Node.js\Node.js基础知识

**在webpack中的使用**

*  在webpack中某些场景要求传入绝对路径, 这个时候我们就可以通过path.resolve()方法生成绝对路径

#### 认识webpack ####

**事实上随着前端的快速发展，目前前端的开发已经变的越来越复杂了**：

*  比如开发过程中我们需要通过模块化的方式来开发；
 *  比如也会使用一些高级的特性来加快我们的开发效率或者安全性，比如通过ES6+、TypeScript开发脚本逻辑，通过sass、less等方式来编写css样式代码；
 *  比如开发过程中，我们还希望实时的监听文件的变化来并且反映到浏览器上，提高开发的效率；
 *  比如开发完成后我们还需要将代码进行压缩、合并以及其他相关的优化；
 *  等等….

**但是对于很多的前端开发者来说，并不需要思考这些问题，日常的开发中根本就没有面临这些问题**：

*  这是因为目前前端开发我们通常都会直接使用三大框架来开发：Vue、React、Angular；
 *  但是事实上，这三大框架的创建过程我们都是借助于脚手架（CLI）的；
 *  事实上Vue-CLI、create-react-app、Angular-CLI都是基于webpack来帮助我们支持模块化、less、TypeScript、打包优化等的；

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

![在这里插入图片描述][39a788fa09db4bbeb9d2a5caefe57964.png_pic_center]

#### Webpack作用 ####

**那么webpack到底是什么, 它能做什么? 我们先来看一下官方的解释**：

![在这里插入图片描述][a2cb8854ae6e441a948fb73a1b05a5d2.png_pic_center]

**官方上的意思是说: webpack是一个静态的模块化打包工具，为现代的JavaScript应用程序**；

**我们来对上面的解释进行解读**：

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

--------------------

#### Vue项目加载的文件 ####

**在Vue项目中加载的文件有哪些呢?**

**JavaScript的打包**：

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

**Css的处理**：

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

**资源文件img、font**：

*  图片img文件的加载；
 *  字体font文件的加载；

**HTML资源的处理**：

*  打包HTML资源文件；

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

--------------------

#### Webpack的安装 ####

**webpack的官方文档是https://webpack.js.org/**

*  webpack的中文官方文档是https://webpack.docschina.org/
 *  DOCUMENTATION：文档详情，也是我们最关注的

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

*  所以我们需要先安装Node.js，并且同时会安装npm；
 *  Node官方网站：https://nodejs.org/

--------------------

**webpack的安装目前分为两个：webpack、webpack-cli**

**那么它们是什么关系呢？**

*  执行webpack命令，会执行node\_modules下的.bin目录下的webpack；
 *  webpack在执行时是依赖webpack-cli的，如果没有安装就会报错；
 *  而webpack-cli中代码执行时，才是真正利用webpack进行编译和打包的过程；
 *  所以在安装webpack时，我们需要同时安装webpack-cli（第三方的脚手架事实上是没有使用webpack-cli的，而是类似于自己的vue-service-cli的东西）

![在这里插入图片描述][40e2fb9f0203464fb57244cd88d00a6e.png_pic_center]

全局安装: `npm install webpack webpack-cli –g`

局部安装: `npm install webpack webpack-cli –D`

### webpack配置 ###

#### Webpack的默认打包 ####

**我们可以通过webpack进行打包，之后运行打包之后的代码**

*  在目录下直接执行 webpack 命令
 *  `webpack`

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

*  这个文件中的代码被压缩和丑化了；
 *  另外我们发现代码中依然存在ES6的语法，比如箭头函数、const等，这是因为默认情况下webpack并不清楚我们打包后的文件是否需要转成ES5之前的语法，后续我们需要通过babel来进行转换和设置；

**我们发现是可以正常进行打包的，但是有一个问题，webpack是如何确定我们的入口的呢？**

*  事实上，当我们运行webpack时，webpack会查找当前目录下的 **src/index.js作为入口**；
 *  所以，如果当前项目中**没有存在src/index.js文件，那么会报错**；

**当然，我们也可以通过配置来指定入口和出口**

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

--------------------

**创建局部的webpack**

前面我们直接执行webpack命令使用的是全局的webpack，如果希望使用局部的可以按照下面的步骤来操作。

*  第一步：**创建package.json文件**，用于管理项目的信息、库依赖等

`npm init`

*  第二步：**安装局部的webpack**

`npm install webpack webpack-cli -D`

*  第三步：**使用局部的webpack**

`npx webpack`

*  第四步：**在package.json中创建scripts脚本，执行脚本打包即可**

"scripts": {
        
      "test": "echo \"Error: no test specified\" && exit 1",
      "build": "webpack"
    },

*  配置完成使用`npm run build`运行

#### Webpack配置文件 ####

在通常情况下，webpack需要打包的项目是非常复杂的，并且我们需要一系列的配置来满足要求，默认配置必然是不可以的。

*  例如我们的入口文件不是index.js
 *  例如我们打包的文件夹不想叫做dist, 以及文件不想叫做main.js

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

// 导入path模块
    const path = require("path")
    
    // 导出配置信息
    module.exports = {
        
      // 设置入口文件
      entry: "./src/main.js",
      output: {
        
        // 打包后的文件名
        filename: "bundle.js",
        // 打包后的文件夹路径, 以及文件夹名
        path: path.resolve(__dirname, "./build")
      }
    }

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

--------------------

**指定配置文件**

**但是如果我们的配置文件并不是webpack.config.js的名字，而是其他的名字呢？**

*  比如我们将webpack.config.js修改成了 wk.config.js；
 *  这个时候我们可以通过 --config 来指定对应的配置文件: `webpack --config 指定的文件名`

**但是每次这样执行命令来对源码进行编译，会非常繁琐，所以我们可以在package.json中增加一个新的脚本**:

*  例如: 我想要打包的时候执行 wk.config.js 这个配置文件

"scripts": {
        
    	"build": "webpack --config wk.config.js"
    },

**之后我们正常执行 `npm run build`来打包即可。**

[39a788fa09db4bbeb9d2a5caefe57964.png_pic_center]: https://img-blog.csdnimg.cn/39a788fa09db4bbeb9d2a5caefe57964.png#pic_center
[a2cb8854ae6e441a948fb73a1b05a5d2.png_pic_center]: https://img-blog.csdnimg.cn/a2cb8854ae6e441a948fb73a1b05a5d2.png#pic_center
[40e2fb9f0203464fb57244cd88d00a6e.png_pic_center]: https://img-blog.csdnimg.cn/40e2fb9f0203464fb57244cd88d00a6e.png#pic_center