webpack+vite前端构建工具全掌握（上篇）

最近在学前端构建工具知识，记录一下，B站的UP主三十的前端课老师对于前端知识的讲解十分精炼，听起来十分享受，本次笔记就是听的这位老师的课程

为啥要构建

开发和生产的矛盾
构建工具帮助我们做了什么

Webpack基础配置

webpack到底做了什么

Webpack 是一个用 Node.js 写的工具，在 Node.js 里运行，用来把代码打包成能在浏览器（或其他目标）里运行的东西。 --> 所编写的代码要使用commonjs的语法

Webpack 的构建过程（打包过程） 100% 运行在 Node.js 环境。

❌ Webpack 打包生成的代码 （bundle）默认是为了在 浏览器环境 中运行的（除非明确配置 target: 'node' 等）。

webpack的基础配置

webpack实现

webpack5版本全局安装 npm install webpack webpack-cli -g

项目独自的webpack

npm init -y

npm install webpack@4.2.1

使用dev构建时用的项目本地的webpack4,如下图所示

webpack默认运行的是根目录下的webpack.config.js

如果想要去用别的请指定 webpack --config webpack.config1.js :hear_no_evil:

webpack处理js

babel-loader的配置

babel-loader本身不去做编译，只是作为一个接口调用里面的@babel/core包去进行编译

!note
项目安装
bash 复制代码
npm install babel-loader @babel/core --save-dev

常规配置，后续无法进行配置

推荐配置
1. 第一种，使用多个loader

第二种，所有的配置放到options当中
要安装根据哪些规范和环境的插件，否则babel-loader不知道要按照哪些规范去编译
- pnpm install @babel/preset-env --save-dev

第三种，放到.babelrc文件下，文件下应当是JSON对象

eslint的工作

rules的像配置请看配置文件 - ESLint 中文网

安装eslint插件

bash 复制代码

npm install eslint eslint-webpack-plugin --save-dev

配置.eslintrc.js

配置插件--减少手动配置rules

// 直接引入规范

// eslint-config-standard

// eslint-config-airbnb

ba 复制代码

pnpm install eslint-config-standard --save-dev

相当与帮你都写好了，但是你在根目录下的eslintrc.js写的东西会覆盖对应的配置，自己看源码去

配置额外的插件

以vue的规范为例

安装eslint-plugin-vue
ba 复制代码
npm install eslint-plugin-vue --save-dev

csss与资源文件的处理

在打包（如使用 Webpack、Vite 等构建工具）后，浏览器完全能够识别并正确加载 CSS ，但需确保打包配置正确。以下是关键点：解析less或者sass，解析成css就按照css的打包步骤即可

压缩css文件

使用css-minimizer-webpack-plugin npm install css-minimizer-webpack-plugin

导入使用

解析静态资源

webpack3和4推荐使用File-loader 和 url-loader

小图片转成base64 大图片单独拎出来

limit：number 小于number转成base64 大于的根据name的配置去导出为单独的文件

webpack5的基本配置

根据type去设置

type: "asset/inline" // 所有的图片资源文件都会转为Base64

type: "asset/resource" // 所有的图片资源文件都单独拎出来

typpe: "asset" 推荐

loader本质看各种语言的处理

首先第一一个loader文件夹mycss-loader/index.js

js 复制代码

// 注意要使用commonjs语法去写！！！
module.exports = function(cssContent) {
  console.log(cssContent);
  cssContent = cssContent.replace("0","0px")
  return  cssContent
}

在webpack的配置文件中使用

核心理念

为TypeScript编写loader

安装loader包
bash 复制代码
npm install typescript ts-loader --save-dev
使用

Html处理

我们一般需要html做些什么

html用插件实现，因为他只作为一个载体，不需要去识别

把打包的内容放到html当中

html-webpack-plugin*

多入口文件配置

这里引入ejs,可以在html中去编写，然后再插件配置，插件名要使用小驼峰的写法

详细信息可以看EJS -- 嵌入式 JavaScript 模板引擎 | EJS 中文文档

注意： vue本质上还是同一个页面，切换某个页面执行某个页面的js逻辑去顶替上一个页面*

多入口的配置

代码分割

单入口我们如何处理（本质上是异步导入）

只有文件又大又后面使用就使用异步加载

异步请求基础

import(/* webpackChunkName:"a" */ "./a.js").

可以通过webpackChunkName设置js文件名（通过模板注释）

js 复制代码

// import b from './a.js'
import "./test.css"
import "./test.less"


setTimeout(() => {
  // 模板注释
  import(/*webpackChunkName:"a"*/"./a.js").then(res => {
    console.log(res);
    console.log(res.default);
  })
  // 第二种引入方式（不常用）
   require.ensure([],()=>{
       let b = require("./a.js")
       console.log(b.default);
   },"a")
},3000)