webpack5常用配置--从零开始学webpack，搭建自己的脚手架

业界资讯 2022-04-09 22:34:56 阅读次数: 0

webpack5及babel入门学习

一、是什么

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

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

打包bundler：webpack可以将帮助我们进行打包，所以它是一个打包工具

静态的static：这样表述的原因是我们最终可以将代码打包成最终的静态资源（部署到静态服务器）；

模块化module：webpack默认支持各种模块化开发，ES Module、CommonJS、AMD等；

现代的modern：我们前端说过，正是因为现代前端开发面临各种各样的问题，才催生了webpack的出现和发展

二、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 # 局部安装

三、入门使用

首先通过一个简单示例，看一下webpack的作用，下面代码使用了ES模块和CommonJs模块进行导入导出，但是并没有使用webpack，我们看一下是否能正常工作

目录结构
在这里插入图片描述
js文件夹下的math.js

// ES Module
export function sum(num1, num2) {
    
    
  return num1 + num2;
}

js文件夹下的format.js

const priceFormat = function() {
    
    
  return "¥99.88";
}

// CommonJS的导出
module.exports = {
    
    
  priceFormat
}

main.js

import {
    
     sum } from "./js/math";
const {
    
     priceFormat } = require("./js/format");

console.log(sum(20, 30));
console.log(priceFormat());

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script src="./src/index.js" type="module"></script>
</body>
</html>

看运行结果
在这里插入图片描述
再用Live Server打开试一下
在这里插入图片描述
我们可以发现，无论怎样都会报错，那是因为浏览器不会直接支持识别这样的模块化代码，所以需要我们用工具去处理这个问题，所以webpack就出现了。

在刚才的文件夹根目录打开终端，输入webpack进行打包看看会怎样？
在这里插入图片描述
打包之后，发现多了一个dist文件夹，里面有main.js，这个main.js就是打包之后的文件，现在我们将其引入index.html，发现代码就可以正常在浏览器执行了
在这里插入图片描述

四、 webpack局部安装使用

一般情况下，我们都会为每一个项目单独安装webpack，并不使用全局的webpack，因为每个项目的webpack版本可能不一样

看一下局部安装的步骤

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

第二步：安装局部的webpack
npm install webpack webpack-cli -D

第三步：使用局部的webpack
法一：.\node_modules\.bin\webpack
法二：npx webpack
法三：在packpage.json中配置脚本"build": "webpack",然后在终端直接npm run build

安装完之后的目录
在这里插入图片描述

五、Webpack配置文件

1、作用及entry和output的简单使用

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

现在我们将上面的index.js改为main.js看一下报什么样的错
在这里插入图片描述
那我们就想写成main.js怎么解决这个问题，那么webpack配置文件就来了，我们可以在配置文件中指定入口文件为main.js就不会报错了。

一种指定方式就是在终端输入命令的时候指定
npx webpack --entry ./src/main.js --output-path ./build

当然开发中使用的肯定都是在配置文件中指定
我们可以在根目录下创建一个webpack.config.js文件，来作为webpack的配置文件

const path = require('path')

module.exports = {
    
    
  entry: './src/main.js',  //指定入口文件
  output: {
    
    
    path: path.resolve(__dirname, './build'), //指定出口路径
    filename: 'bundle.js'  //指定出口文件名
  }
}

打包之后的目录
在这里插入图片描述

2、loader的介绍与使用

1）作用

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！

2）webpack到底是如何对我们的项目进行打包的呢？

  • 事实上webpack在处理应用程序时，它会根据命令或者配置文件找到入口文件
  • 从入口开始，会生成一个 依赖关系图，这个依赖关系图会包含应用程序中所需的所有模块（比如.js文件、css文件、图片、字体等）
  • 然后遍历图结构，打包一个个模块（根据文件的不同使用不同的loader来解析）
    在这里插入图片描述

3）loader配置方式

配置方式表示的意思是在我们的webpack.config.js文件中写明配置信息

  • module.rules中允许我们配置多个loader（因为我们也会继续使用其他的loader，来完成其他文件的加载）
  • 这种方式可以更好的表示loader的配置，也方便后期的维护，同时也让你对各个Loader有一个全局的概览

module.rules的配置如下

  • rules属性对应的值是一个数组，数组中存放的是一个个的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 } ] 的简写。

4）css-loader的使用

看一个案例
现在有一个element.js文件

import "../css/style.css"
const divEl = document.createElement("div");
divEl.className = "title";
divEl.innerHTML = "你好啊,李银河";

document.body.appendChild(divEl);

style.css

.title {
    
    
  color: #10569c78;
  font-weight: 700;
  font-size: 30px;
  user-select: none;
}

打包之后发现出错了，告诉我们模块解析失败，所以我们需要一个合适的loader来处理css这样的文件类型。

上面的错误信息告诉我们需要一个loader来加载这个css文件，但是loader是什么呢？

  • loader 可以用于对模块的源代码进行转换
  • 我们可以将css文件也看成是一个模块，我们是通过import来加载这个模块的
  • 在加载这个模块时，webpack其实并不知道如何对其进行加载，我们必须制定对应的loader来完成这个功能

那么我们需要一个什么样的loader呢？

  • 对于加载css文件来说，我们需要一个可以读取css文件的loader
  • 这个loader最常用的是css-loader
  • css-loader的安装npm install css-loader -D

css-loader的使用方案

  • 内联方式：内联方式使用较少，因为不方便管理；
    在引入的样式前加上使用的loader，并且使用!分割
    在这里插入图片描述

  • CLI方式
    在webpack5的文档中已经没有了–module-bind

  • css-loader的配置方式
    在这里插入图片描述

5）认识style-loader

  • 我们已经可以通过css-loader来加载css文件了
  • 但是你会发现这个css在我们的代码中并没有生效（页面没有效果）
  • 这是为什么呢？
  • 因为css-loader只是负责将.css文件进行解析，并不会将解析之后的css插入到页面中
  • 如果我们希望再完成插入style的操作，那么我们还需要另外一个loader，就是style-loader
  • 安装style-loader：npm install style-loader -D
  • 配置style-loader
  • 在配置文件中，添加style-loader
  • 注意：因为loader的执行顺序是从右向左（或者说从下到上，或者说从后到前的），所以我们需要将style-loader写到css-loader的前面

在这里插入图片描述
经过上述操作，我们发现css可以渲染在页面上了，但是目前我们的css是通过页内样式的方式添加进来的

下面还要介绍到如何将css抽取到单独的文件中，并且进行压缩等操作

6）less-loader

如何处理less文件？

  • 在我们开发中，我们可能会使用less、sass、stylus的预处理器来编写css样式，效率会更高
  • 那么，如何可以让我们的环境支持这些预处理器呢？
  • 首先我们需要确定，less、sass等编写的css需要通过工具转换成普通的css
  • 比如我们编写如下的less样式
    在这里插入图片描述
  • 我们可以使用less工具来完成它的编译转换
    npm install less -D
  • 执行如下命令：
    npx lessc ./src/css/title.less title.css
  • 但是在项目中我们会编写大量的css，它们如何可以自动转换呢？
  • 这个时候我们就可以使用less-loader，来自动使用less工具转换less到css
  • npm install less-loader -D
  • 配置webpack.config.js
    在这里插入图片描述
  • 执行npm run build, less就可以自动转换成css，并且页面也会生效了

7）认识PostCSS工具

  • 什么是PostCSS呢？
  • PostCSS是一个通过JavaScript来转换样式的工具
  • 这个工具可以帮助我们进行一些CSS的转换和适配，比如自动添加浏览器前缀、css样式的重置
  • 但是实现这些功能，我们需要借助于PostCSS对应的插件
  • 如何使用PostCSS呢？主要就是两个步骤
  • 第一步：查找PostCSS在构建工具中的扩展，比如webpack中的postcss-loader
  • 第二步：选择可以添加你需要的PostCSS相关的插件
  • 当然，我们能不能也直接在终端使用PostCSS呢？
  • 也是可以的，但是我们需要单独安装一个工具postcss-cli
  • 我们可以安装一下它们：postcss、postcss-cli
  • npm install postcss postcss-cli -D
  • 我们编写一个需要添加前缀的css
  • https://autoprefixer.github.io/
  • 我们可以在上面的网站中查询一些添加css属性的样式
    在这里插入图片描述
  • 因为我们需要添加前缀，所以要安装autoprefixer
  • npm install autoprefixer -D
  • 直接使用postcss工具，并且指定使用autoprefixer
  • npx postcss --use autoprefixer -o end.css ./src/css/style.css
  • 转化之后的css样式如下
    在这里插入图片描述
  • 真实开发中我们必然不会直接使用命令行工具来对css进行处理，而是可以借助于构建工具
  • 在webpack中使用postcss就是使用postcss-loader来处理的
  • 我们来安装postcss-loader
  • npm install postcss-loader -D
  • 我们修改加载css的loader：（配置文件已经过多，给出一部分了）
    在这里插入图片描述
  • 当然，我们也可以将这些配置信息放到一个单独的文件中进行管理
  • 在根目录下创建postcss.config.js
    在这里插入图片描述
  • 事实上，在配置postcss-loader时，我们配置插件并不需要使用autoprefixer
  • 我们可以使用另外一个插件：postcss-preset-env
  • postcss-preset-env也是一个postcss的插件
  • 它可以帮助我们将一些现代的CSS特性，转成大多数浏览器认识的CSS，并且会根据目标浏览器或者运行时环境 添加所需的polyfill
  • 也包括会自动帮助我们添加autoprefixer（所以相当于已经内置了autoprefixer）
  • 首先，我们需要安装postcss-preset-env
  • npm install postcss-preset-env -D
  • 之后，我们直接修改掉之前的autoprefixer即可
    在这里插入图片描述
  • 注意：我们在使用某些postcss插件时，也可以直接传入字符串
    在这里插入图片描述

8）file-loader

  • 为了演示我们项目中可以加载图片，我们需要在项目中使用图片，比较常见的使用图片的方式是两种
  • img元素，设置src属性
  • 其他元素（比如div），设置background-image的css属性
    在这里插入图片描述
    在这里插入图片描述
    这个时候，打包会报错
  • 要处理jpg、png等格式的图片，我们也需要有对应的loader：file-loader
  • file-loader的作用就是帮助我们处理import/require()方式引入的一个文件资源，并且会将它放到我们输出的文件夹中
  • 安装file-loader
  • npm install file-loader -D
  • 配置处理图片的Rule
    在这里插入图片描述
    这个时候再次打包就不会出现问题了
  • 有时候我们处理后的文件名称按照一定的规则进行显示
  • 比如保留原来的文件名、扩展名，同时为了防止重复，包含一个hash值等
  • 这个时候我们可以使用PlaceHolders来完成，webpack给我们提供了大量的PlaceHolders来显示不同的内容
  • 我们这里介绍几个最常用的placeholder
  • [ext]： 处理文件的扩展名
  • [name]：处理文件的名称
  • [hash]：文件的内容，使用MD4的散列函数处理，生成的一个128位的hash值（32个十六进制）
  • [contentHash]：在file-loader中和[hash]结果是一致的（在webpack的一些其他地方不一样，后面会讲到）
  • [hash:&lt;length>]：截图hash的长度，默认32个字符太长了
  • [path]：文件相对于webpack配置文件的路径
  • 那么我们可以按照如下的格式编写
  • 这个也是vue的写法
    在这里插入图片描述
  • 当然，我们刚才通过 img/ 已经设置了文件夹，这个也是vue、react脚手架中常见的设置方式
  • 其实按照这种设置方式就可以了
  • 当然我们也可以通过outputPath来设置输出的文件夹
    在这里插入图片描述

9）url-loader

  • url-loader和file-loader的工作方式是相似的，但是可以将较小的文件，转成base64的URI
  • 安装url-loader
  • npm install url-loader -D
    在这里插入图片描述
  • 显示结果是一样的，并且图片可以正常显示
  • 但是在dist文件夹中，我们会看不到图片文件
  • 这是因为我的两张图片的大小分别是38kb和295kb
  • 默认情况下url-loader会将所有的图片文件转成base64编码
  • 但是开发中我们往往是小的图片需要转换，但是大的图片直接使用图片即可
  • 这是因为小的图片转换base64之后可以和页面一起被请求，减少不必要的请求过程
  • 而大的图片也进行转换，反而会影响页面的请求速度
  • 那么，我们如何可以限制哪些大小的图片转换和不转换呢？
  • url-loader有一个options属性limit，可以用于设置转换的限制
  • 下面的代码38kb的图片会进行base64编码，而295kb的不会
    在这里插入图片描述

10）认识asset module type

  • 我们当前使用的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 实现
  • asset/source 导出资源的源代码。之前通过使用 raw-loader 实现
  • asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现
  • 比如加载图片，我们可以使用下面的方式
    在这里插入图片描述
  • 但是，如何可以自定义文件的输出路径和文件名呢？
  • 方式一：修改output，添加assetModuleFilename属性
  • 方式二：在Rule中，添加一个generator属性，并且设置filename
    在这里插入图片描述
    在这里插入图片描述
  • url-loader的limit效果
  • 我们需要两个步骤来实现
  • 步骤一：将type修改为asset
  • 步骤二：添加一个parser属性，并且制定dataUrl的条件，添加maxSize属性
    在这里插入图片描述

11）加载字体文件

  • 如果我们需要使用某些特殊的字体或者字体图标，那么我们会引入很多字体相关的文件，这些文件的处理也是一样的
  • 首先，我从阿里图标库中下载了几个字体图标
    在这里插入图片描述
  • 在element.js中引入，并且添加一个i元素用于显示字体图标
    在这里插入图片描述
  • 这个时候打包会报错，因为无法正确的处理eot、ttf、woff等文件
  • 我们可以选择使用file-loader来处理，也可以选择直接使用webpack5的资源模块类型来处理
    在这里插入图片描述

3、Plugin

1）认识Plugin

loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务
想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例

2）CleanWebpackPlugin

  • 前面我们演示的过程中，每次修改了一些配置，重新打包时，都需要手动删除dist文件夹
    -我们可以借助于一个插件来帮助我们完成，这个插件就是CleanWebpackPlugin
  • 首先，我们先安装这个插件
  • npm install clean-webpack-plugin -D
  • 之后在插件中配置
    在这里插入图片描述

3）HtmlWebpackPlugin与DefinePlugin

  • 另外还有一个不太规范的地方
  • 我们的HTML文件是编写在根目录下的，而最终打包的dist文件夹中是没有index.html文件的
  • 在进行项目部署时，必然也是需要有对应的入口文件index.html
  • 所以我们也需要对index.html进行打包处理
  • 对HTML进行打包处理我们可以使用另外一个插件：HtmlWebpackPlugin
  • npm install html-webpack-plugin -D
    在这里插入图片描述
  • 我们会发现，现在自动在dist文件夹中，生成了一个index.html的文件
  • 该文件中也自动添加了我们打包的bundle.js文件
    在这里插入图片描述
  • 这个文件是如何生成的呢？
  • 默认情况下是根据ejs的一个模板来生成的
  • 在html-webpack-plugin的源码中，有一个default_index.ejs模块
  • 如果我们想在自己的模块中加入一些比较特别的内容
  • 比如添加一个noscript标签，在用户的JavaScript被关闭时，给予响应的提示
  • 比如在开发vue或者react项目时，我们需要一个可以挂载后续组件的根标签<div id="app"></div>
  • 这时候我们需要一个属于自己的index.html模块
    在这里插入图片描述
  • 上面的代码中，会有一些类似这样的语法<% 变量 %>，这个是EJS模块填充数据的方式
  • 在配置HtmlWebpackPlugin时，我们可以添加如下配置
  • template：指定我们要使用的模块所在的路径
  • title：在进行htmlWebpackPlugin.options.title读取时，就会读到该信息
    在这里插入图片描述
  • 但是，这个时候编译还是会报错，因为在我们的模块中还使用到一个BASE_URL的常量
    在这里插入图片描述
  • 这是因为在编译template模块时，有一个BASE_URL
  • <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  • 但是我们并没有设置过这个常量值，所以会出现没有定义的错误
  • 这个时候我们可以使用DefinePlugin插件
  • DefinePlugin允许在编译时创建配置的全局常量，是一个webpack内置的插件（不需要单独安装）
    在这里插入图片描述
  • 这个时候，编译template就可以正确的编译了，会读取到BASE_URL的值

4）CopyWebpackPlugin

  • 在vue的打包过程中，如果我们将一些文件放到public的目录下，那么这个目录会被复制到dist文件夹中
  • 这个复制的功能，我们可以使用CopyWebpackPlugin来完成
  • 安装CopyWebpackPlugin插件
  • npm install copy-webpack-plugin -D
  • 接下来配置CopyWebpackPlugin即可
  • 复制的规则在patterns中设置
  • from：设置从哪一个源中开始复制
  • to：复制到的位置，可以省略，会默认复制到打包的目录下
  • globOptions：设置一些额外的选项，其中可以编写需要忽略的文件
  • index.html：也不需要复制，因为我们已经通过HtmlWebpackPlugin完成了index.html的生成
    在这里插入图片描述

5）babel相关

1、为什么需要babel？

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

2、Babel命令行使用

  • babel本身可以作为一个独立的工具（和postcss一样），不和webpack等构建工具配置来单独使用
  • 如果我们希望在命令行尝试使用babel，需要安装如下库
  • @babel/core：babel的核心代码，必须安装
  • @babel/cli：可以让我们在命令行使用bable
  • npm install @babel/cli @babel/core -D
  • 使用babel来处理我们的源代码
  • src：是源文件的目录
  • –out-dir：指定要输出的文件夹dist
  • npx babel src --out-dir dist

3、插件的使用

  • 比如我们需要转换箭头函数，那么我们就可以使用箭头函数转换相关的插件
  • npm install @babel/plugin-transform-arrow-functions -D
  • npx babel src --out-dir dist --plugins=@babel/plugin-transform-arrow-functions
  • 查看转换后的结果：我们会发现 const 并没有转成 var
  • 这是因为 plugin-transform-arrow-functions，并没有提供这样的功能
  • 我们需要使用 plugin-transform-block-scoping来完成这样的功能
  • npm install @babel/plugin-transform-block-scoping -D
  • npx babel src --out-dir dist --plugins=@babel/plugin-transform-block-scoping ,@babel/plugin-transform-arrow-functions

4、Babel的预设preset

  • 但是如果要转换的内容过多，一个个设置是比较麻烦的，我们可以使用预设（preset）
  • 后面我们再具体来讲预设代表的含义
  • 安装@babel/preset-env预设
  • npm install @babel/preset-env -D
  • 执行如下命令
  • npx babel src --out-dir dist --presets=@babel/preset-env

5、Babel的底层原理

  • babel是如何做到将我们的一段代码（ES6、TypeScript、React）转成另外一段代码（ES5）的呢？
  • 从一种源代码（原生语言）转换成另一种源代码（目标语言），这是什么的工作呢？
  • 就是编译器，事实上我们可以将babel看成就是一个编译器
  • Babel编译器的作用就是将我们的源代码，转换成浏览器可以直接识别的另外一段源代码
  • Babel也拥有编译器的工作流程
  • 解析阶段（Parsing）
  • 转换阶段（Transformation）
  • 生成阶段（Code Generation）

6、Babel编译器执行原理

Babel的执行阶段
在这里插入图片描述
当然，这只是一个简化版的编译器工具流程，在每个阶段又会有自己具体的工作
在这里插入图片描述

7、babel-loader

  • 在实际开发中，我们通常会在构建工具中通过配置babel来对其进行使用的，比如在webpack中
  • 那么我们就需要去安装相关的依赖
  • 如果之前已经安装了@babel/core，那么这里不需要再次安装
  • npm install babel-loader @babel/core
  • 我们可以设置一个规则，在加载js文件时，使用我们的babel
    在这里插入图片描述
  • 我们必须指定使用的插件才会生效
    在这里插入图片描述
  • 如果我们一个个去安装使用插件，那么需要手动来管理大量的babel插件，我们可以直接给webpack提供一个preset，webpack会根据我们的预设来加载对应的插件列表，并且将其传递给babel
  • 比如常见的预设有三个：
  • env
  • react
  • TypeScript
  • 安装preset-env
  • npm install @babel/preset-env
    在这里插入图片描述
  • Babel的配置文件
  • 像之前一样，我们可以将babel的配置信息放到一个独立的文件中，babel给我们提供了两种配置文件的编写
  • babel.config.json（或者.js，.cjs，.mjs）文件
  • .babelrc.json（或者.babelrc，.js，.cjs，.mjs）文件
  • 它们两个有什么区别呢？目前很多的项目都采用了多包管理的方式（babel本身、element-plus、umi等）
  • .babelrc.json：早期使用较多的配置方式，但是对于配置Monorepos项目是比较麻烦的
  • babel.config.json（babel7）：可以直接作用于Monorepos项目的子包，更加推荐
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

6）Vue相关

1、Vue源码的打包

  • 首先安装npm install vue
  • 在main.js中写入如下代码
    在这里插入图片描述
  • 打包编译发现界面上是没有效果的
  • 并且我们查看运行的控制台，会发现如下的警告信息
    在这里插入图片描述

2、Vue打包后不同版本解析

  • vue(.runtime).global(.prod).js
  • 通过浏览器中的 <script src=“…”> 直接使用
  • 我们之前通过CDN引入和下载的Vue版本就是这个版本
  • 会暴露一个全局的Vue来使用
  • vue(.runtime).esm-browser(.prod).js
  • 用于通过原生 ES 模块导入使用 (在浏览器中通过 <script type=“module”> 来使用)
  • vue(.runtime).esm-bundler.js
  • 用于 webpack，rollup 和 parcel 等构建工具
  • 构建工具中默认是vue.runtime.esm-bundler.js
  • 如果我们需要解析模板template，那么需要手动指定vue.esm-bundler.js
  • vue.cjs(.prod).js
  • 服务器端渲染使用
  • 通过require()在Node.js中使用
  • 通过上述描述，所以我们应该修改为指定版本
    在这里插入图片描述

3、运行时+编译器 vs 仅运行时

  • 在Vue的开发过程中我们有三种方式来编写DOM元素
  • 方式一：template模板的方式（之前经常使用的方式）
  • 方式二：render函数的方式，使用h函数来编写渲染的内容
  • 方式三：通过.vue文件中的template来编写模板
  • 它们的模板分别是如何处理的呢？
  • 方式二中的h函数可以直接返回一个虚拟节点，也就是Vnode节点
  • 方式一和方式三的template都需要有特定的代码来对其进行解析
  • 方式三.vue文件中的template可以通过在vue-loader对其进行编译和处理
  • 方式一种的template我们必须要通过源码中一部分代码来进行编译
  • 所以，Vue在让我们选择版本的时候分为 运行时+编译器 vs 仅运行时
  • 运行时+编译器包含了对template模板的编译代码，更加完整，但是也更大一些
  • 仅运行时没有包含对template版本的编译代码，相对更小一些

4、全局标识的配置

  • 我们会发现控制台还有另外的一个警告
    在这里插入图片描述
  • 在GitHub上的文档中我们可以找到说明
    在这里插入图片描述
  • 这是两个特性的标识，一个是使用Vue的Options，一个是Production模式下是否支持devtools工具
  • 虽然他们都有默认值，但是强烈建议我们手动对他们进行配置

5、编写App.vue代码

  • 接下来我们编写自己的App.vue代码
    在这里插入图片描述
    在mian.js引入
    在这里插入图片描述
  • 我们对代码打包会报错：我们需要合适的Loader来处理文件
    在这里插入图片描述
  • 这个时候我们需要使用vue-loader
  • npm install vue-loader -D
  • 在webpack的模板规则中进行配置
    在这里插入图片描述
  • 打包依然会报错，这是因为我们必须添加@vue/compiler-sfc来对template进行解析
  • npm install @vue/compiler-sfc -D
  • 另外我们需要配置对应的Vue插件
    在这里插入图片描述
    在这里插入图片描述
  • 重新打包即可支持App.vue的写法

7）搭建本地服务器相关

1、为什么要搭建本地服务器？

  • 目前我们开发的代码，为了运行需要有两个操作
  • 操作一：npm run build，编译相关的代码
  • 操作二：通过live server或者直接通过浏览器，打开index.html代码，查看效果
  • 这个过程经常操作会影响我们的开发效率，我们希望可以做到，当文件发生变化时，可以自动的完成 编译 和 展示
  • 为了完成自动编译，webpack提供了几种可选的方式
  • webpack watch mode
  • webpack-dev-server（常用）
  • webpack-dev-middleware

2、Webpack watch

  • webpack给我们提供了watch模式
  • 在该模式下，webpack依赖图中的所有文件，只要有一个发生了更新，那么代码将被重新编译
  • 我们不需要手动去运行 npm run build指令了
  • 如何开启watch呢？两种方式
  • 方式一：在导出的配置中，添加 watch: true
  • 方式二：在启动webpack的命令中，添加 --watch的标识
  • 这里我们选择方式二，在package.json的 scripts 中添加一个 watch 的脚本
    在这里插入图片描述
    或者在webpack.config.js文件的导出配置中添加watch: true
    在这里插入图片描述

3、webpack-dev-server

  • 上面的方式可以监听到文件的变化，但是事实上它本身是没有自动刷新浏览器的功能的

  • 当然，目前我们可以在VSCode中使用live-server来完成这样的功能

  • 但是，我们希望在不使用live-server的情况下，可以具备live reloading（实时重新加载）的功能

  • 安装webpack-dev-server

  • npm install webpack-dev-server -D

  • 修改配置文件，告知 dev server，从什么位置查找文件
    在这里插入图片描述
    在这里插入图片描述

  • webpack-dev-server 在编译之后不会写入到任何输出文件，而是将 bundle 文件保留在内存中

  • 事实上webpack-dev-server使用了一个库叫memfs（memory-fs webpack自己写的）

4、认识模块热替换（HMR）

  • 什么是HMR呢？

  • HMR的全称是Hot Module Replacement，翻译为模块热替换

  • 模块热替换是指在 应用程序运行过程中，替换、添加、删除模块，而无需重新刷新整个页面

  • HMR通过如下几种方式，来提高开发的速度

  • 不重新加载整个页面，这样可以保留某些应用程序的状态不丢失

  • 只更新需要变化的内容，节省开发的时间

  • 修改了css、js源代码，会立即在浏览器更新，相当于直接在浏览器的devtools中直接修改样式

  • 如何使用HMR呢？

  • 默认情况下，webpack-dev-server已经支持HMR，我们只需要开启即可

  • 在不开启HMR的情况下，当我们修改了源代码之后，整个页面会自动刷新，使用的是live reloading

  • 开启HMR

  • 修改webpack的配置
    在这里插入图片描述

  • 浏览器可以看到如下效果
    在这里插入图片描述

  • 但是你会发现，当我们修改了某一个模块的代码时，依然是刷新的整个页面

  • 这是因为我们需要去指定哪些模块发生更新时，进行HMR
    在这里插入图片描述

  • 框架的HMR

  • 有一个问题：在开发其他项目时，我们是否需要经常手动去写入 module.hot.accpet相关的API呢？

  • 比如开发Vue、React项目，我们修改了组件，希望进行热更新，这个时候应该如何去操作呢？

  • 事实上社区已经针对这些有很成熟的解决方案了

  • 比如vue开发中，我们使用vue-loader，此loader支持vue组件的HMR，提供开箱即用的体验

  • 比如react开发中，有React Hot Loader，实时调整react组件（目前React官方已经弃用了，改成使用reactrefresh）

  • HMR的原理

  • 那么HMR的原理是什么呢？如何可以做到只更新一个模块中的内容呢？

  • webpack-dev-server会创建两个服务：提供静态资源的服务（express）和Socket服务（net.Socket）

  • express server负责直接提供静态资源的服务（打包后的资源直接被浏览器请求和解析）

  • HMR Socket Server，是一个socket的长连接

  • 长连接有一个最好的好处是建立连接后双方可以通信（服务器可以直接发送文件到客户端）

  • 当服务器监听到对应的模块发生变化时，会生成两个文件.json（manifest文件）和.js文件（update chunk）

  • 通过长连接，可以直接将这两个文件主动发送给客户端（浏览器）

  • 浏览器拿到两个新的文件后，通过HMR runtime机制，加载这两个文件，并且针对修改的模块进行更新

  • HMR的原理图
    在这里插入图片描述

5、hotOnly、host配置

  • host设置主机地址
  • 默认值是localhost
  • 如果希望其他地方也可以访问，可以设置为 0.0.0.0
  • localhost 和 0.0.0.0 的区别
  • localhost：本质上是一个域名，通常情况下会被解析成127.0.0.1
  • 127.0.0.1：回环地址(Loop Back Address)，表达的意思其实是我们主机自己发出去的包，直接被自己接收
  • 正常的数据库包经过 应用层 - 传输层 - 网络层 - 数据链路层 - 物理层
  • 而回环地址，是在网络层直接就被获取到了，是不会经过数据链路层和物理层的
  • 比如我们监听 127.0.0.1时，在同一个网段下的主机中，通过ip地址是不能访问的
  • 0.0.0.0：监听IPV4上所有的地址，再根据端口找到不同的应用程序
  • 比如我们监听 0.0.0.0时，在同一个网段下的主机中，通过ip地址是可以访问的

6、port、open、compress

  • port设置监听的端口，默认情况下是8080
  • open是否打开浏览器
  • 默认值是false，设置为true会打开浏览器
  • 也可以设置为类似于 Google Chrome等值
  • compress是否为静态文件开启gzip compression
  • 默认值是false，可以设置为true
    在这里插入图片描述

7、Proxy

  • proxy是我们开发中非常常用的一个配置选项，它的目的设置代理来解决跨域访问的问题
  • 比如我们的一个api请求是 http://localhost:8888，但是本地启动服务器的域名是 http://localhost:8000，这个时候发送网络请求就会出现跨域的问题
  • 那么我们可以将请求先发送到一个代理服务器，代理服务器和API服务器没有跨域的问题，就可以解决我们的跨域问题了
  • 我们可以进行如下的设置
  • target：表示的是代理到的目标地址，比如 /api-hy/moment会被代理到 http://localhost:8888/api-hy/moment
  • pathRewrite：默认情况下，我们的 /api-hy 也会被写入到URL中，如果希望删除，可以使用pathRewrite
  • secure：默认情况下不接收转发到https的服务器上，如果希望支持，可以设置为false
  • changeOrigin：它表示是否更新代理后请求的headers中host地址

在这里插入图片描述

8、changeOrigin的解析

  • 这个 changeOrigin官方说的非常模糊，通过查看源码我发现其实是要修改代理请求中的headers中的host属性
  • 因为我们真实的请求，其实是需要通过 http://localhost:8888来请求的
  • 但是因为使用了代码，默认情况下它的值时 http://localhost:8000
  • 如果我们需要修改，那么可以将changeOrigin设置为true即可

9、historyApiFallback

  • historyApiFallback是开发中一个非常常见的属性，它主要的作用是解决SPA页面在路由跳转之后，进行页面刷新时，返回404的错误
  • boolean值：默认是false
  • 如果设置为true，那么在刷新时，返回404错误时，会自动返回 index.html 的内容
  • object类型的值，可以配置rewrites属性（了解）
  • 可以配置from来匹配路径，决定要跳转到哪一个页面

10、resolve模块解析

  • resolve用于设置模块如何被解析
  • 在开发中我们会有各种各样的模块依赖，这些模块可能来自于自己编写的代码，也可能来自第三方库
  • resolve可以帮助webpack从每个 require/import 语句中，找到需要引入到合适的模块代码
  • webpack 使用 enhanced-resolve 来解析文件路径
  • webpack能解析三种文件路径
  • 绝对路径
  • 由于已经获得文件的绝对路径，因此不需要再做进一步解析
  • 相对路径
  • 在这种情况下，使用 import 或 require 的资源文件所处的目录，被认为是上下文目录
  • 在 import/require 中给定的相对路径，会拼接此上下文路径，来生成模块的绝对路径
  • 模块路径
  • 在 resolve.modules中指定的所有目录检索模块
  • 默认值是 [‘node_modules’]，所以默认会从node_modules中查找文件
  • 我们可以通过设置别名的方式来替换初识模块路径，具体后面讲解alias的配置
  • 确定是文件还是文件夹
  • 如果是一个文件
  • 如果文件具有扩展名，则直接打包文件
  • 否则，将使用 resolve.extensions选项作为文件扩展名解析
  • 如果是一个文件夹
  • 会在文件夹中根据 resolve.mainFiles配置选项中指定的文件顺序查找
  • resolve.mainFiles的默认值是 [‘index’]
  • 再根据 resolve.extensions来解析扩展名
  • extensions和alias配置
  • extensions是解析到文件时自动添加扩展名
  • 默认值是 [’.wasm’, ‘.mjs’, ‘.js’, ‘.json’]
  • 所以如果我们代码中想要添加加载 .vue 或者 jsx 或者 ts 等文件时，我们必须自己写上扩展名
  • 另一个非常好用的功能是配置别名alias
  • 特别是当我们项目的目录结构比较深的时候，或者一个文件的路径可能需要 …/…/…/这种路径片段
  • 我们可以给某些常见的路径起一个别名
    在这里插入图片描述

11、如何区分开发环境和生产环境

  • 目前我们所有的webpack配置信息都是放到一个配置文件中的：webpack.config.js
  • 当配置越来越多时，这个文件会变得越来越不容易维护
  • 并且某些配置是在开发环境需要使用的，某些配置是在生成环境需要使用的，当然某些配置是在开发和生成环境都会使用的
  • 所以，我们最好对配置进行划分，方便我们维护和管理
  • 那么，在启动时如何可以区分不同的配置呢？
  • 方案一：编写两个不同的配置文件，开发和生成时，分别加载不同的配置文件即可
  • 方式二：使用相同的一个入口配置文件，通过设置参数来区分它们
  • 在根目录下创建一个config文件夹
    在这里插入图片描述
  • 然后对原有的webpack.config.js进行分离，同时使用webpack-merge进行和公共的配置文件进行合并
  • 原来的webpack.config.js
const path = require("path");
const {
    
     CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {
    
     DefinePlugin } = require("webpack");
const CopyWebpackPlugin = require('copy-webpack-plugin');
const {
    
     VueLoaderPlugin } = require('vue-loader/dist/index');

module.exports = {
    
    
  target: "web",
  mode: "development",
  devtool: "source-map",
  entry: "./src/main.js",
  output: {
    
    
    path: path.resolve(__dirname, "./build"),
    filename: "js/bundle.js",
  },
  devServer: {
    
    
    contentBase: "./public",
    hot: true,
    // host: "0.0.0.0",
    port: 7777,
    open: true,
    // compress: true,
    proxy: {
    
    
      "/api": {
    
    
        target: "http://localhost:8888",
        pathRewrite: {
    
    
          "^/api": ""
        },
        secure: false,
        changeOrigin: true
      }
    }
  },
  resolve: {
    
    
    extensions: [".js", ".json", ".mjs", ".vue", ".ts", ".jsx", ".tsx"],
    alias: {
    
    
      "@": path.resolve(__dirname, "./src"),
      "js": path.resolve(__dirname, "./src/js")
    }
  },
  module: {
    
    
    rules: [
      {
    
    
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
      {
    
    
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      // },
      {
    
    
        test: /\.(jpe?g|png|gif|svg)$/,
        type: "asset",
        generator: {
    
    
          filename: "img/[name]_[hash:6][ext]",
        },
        parser: {
    
    
          dataUrlCondition: {
    
    
            maxSize: 10 * 1024,
          },
        },
      },
      {
    
    
        test: /\.(eot|ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
    
    
          filename: "font/[name]_[hash:6][ext]",
        },
      },
      {
    
    
        test: /\.js$/,
        loader: "babel-loader"
      },
      {
    
    
        test: /\.vue$/,
        loader: "vue-loader"
      }
    ],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
    
    
      template: "./public/index.html",
      title: "哈哈哈哈"
    }),
    new DefinePlugin({
    
    
      BASE_URL: "'./'",
      __VUE_OPTIONS_API__: true,
      __VUE_PROD_DEVTOOLS__: false
    }),
    // new CopyWebpackPlugin({
    
    
    //   patterns: [
    //     {
    
    
    //       from: "public",
    //       to: "./",
    //       globOptions: {
    
    
    //         ignore: [
    //           "**/index.html"
    //         ]
    //       }
    //     }
    //   ]
    // }),
    new VueLoaderPlugin()
  ],
};
  • webpack.comm.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {
    
     DefinePlugin } = require("webpack");
const {
    
     VueLoaderPlugin } = require('vue-loader/dist/index');

module.exports = {
    
    
  target: "web",
  entry: "./src/main.js",
  output: {
    
    
    path: path.resolve(__dirname, "../build"),
    filename: "js/bundle.js",
  },
  resolve: {
    
    
    extensions: [".js", ".json", ".mjs", ".vue", ".ts", ".jsx", ".tsx"],
    alias: {
    
    
      "@": path.resolve(__dirname, "../src"),
      "js": path.resolve(__dirname, "../src/js")
    }
  },
  module: {
    
    
    rules: [
      {
    
    
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
      {
    
    
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      // },
      {
    
    
        test: /\.(jpe?g|png|gif|svg)$/,
        type: "asset",
        generator: {
    
    
          filename: "img/[name]_[hash:6][ext]",
        },
        parser: {
    
    
          dataUrlCondition: {
    
    
            maxSize: 10 * 1024,
          },
        },
      },
      {
    
    
        test: /\.(eot|ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
    
    
          filename: "font/[name]_[hash:6][ext]",
        },
      },
      {
    
    
        test: /\.js$/,
        loader: "babel-loader"
      },
      {
    
    
        test: /\.vue$/,
        loader: "vue-loader"
      }
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
    
    
      template: "./public/index.html",
      title: "哈哈哈哈"
    }),
    new DefinePlugin({
    
    
      BASE_URL: "'./'",
      __VUE_OPTIONS_API__: true,
      __VUE_PROD_DEVTOOLS__: false
    }),
    new VueLoaderPlugin()
  ],
};
  • webpack.dev.config.js
const {
    
     merge } = require('webpack-merge');

const commonConfig = require('./webpack.comm.config');

module.exports = merge(commonConfig, {
    
    
  mode: "development",
  devtool: "source-map",
  devServer: {
    
    
    contentBase: "./public",
    hot: true,
    // host: "0.0.0.0",
    port: 7777,
    open: true,
    // compress: true,
    proxy: {
    
    
      "/api": {
    
    
        target: "http://localhost:8888",
        pathRewrite: {
    
    
          "^/api": ""
        },
        secure: false,
        changeOrigin: true
      }
    }
  },
})
  • webpack.prod.config.js
const {
    
     CleanWebpackPlugin } = require("clean-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');
const {
    
    merge} = require('webpack-merge');

const commonConfig = require('./webpack.comm.config');

module.exports = merge(commonConfig, {
    
    
  mode: "production",
  plugins: [
    new CleanWebpackPlugin(),
    new CopyWebpackPlugin({
    
    
      patterns: [
        {
    
    
          from: "./public",
          globOptions: {
    
    
            ignore: [
              "**/index.html"
            ]
          }
        }
      ]
    }),
  ]
})
  • 然后在packpage.json中进行脚本配置
    在这里插入图片描述

12、入口文件解析

  • 我们之前编写入口文件的规则是这样的：./src/index.js，但是如果我们的配置文件所在的位置变成了 config 目录，我们是否应该变成 …/src/index.js呢？
  • 如果我们这样编写，会发现是报错的，依然要写成 ./src/index.js
  • 这是因为入口文件其实是和另一个属性时有关的 context
  • context的作用是用于解析入口（entry point）和加载器（loader）
  • 官方说法：默认是当前路径（但是经过我测试，默认应该是webpack的启动目录）
  • 另外推荐在配置中传入一个值

在这里插入图片描述
在这里插入图片描述

4、Mode配置

  • Mode配置选项，可以告知webpack使用响应模式的内置优化

  • 默认值是production（什么都不设置的情况下）

  • 可选值有：'none' | 'development' | 'production'

  • 这几个选项有什么样的区别呢?
    在这里插入图片描述
    在这里插入图片描述

  • Mode配置代表更多,当配置了mode之后，内部会自动做很多工作，如下图
    在这里插入图片描述
    在这里插入图片描述

申明：本文章内容主要来自coderwhy老师的讲课内容

猜你喜欢

转载自blog.csdn.net/qq_41880073/article/details/123821661
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022