为什么用webpack（webpack基础使用）以及与vite的区别总结（1）

这可不简单
244 阅读9分钟

大家好，最近也是在面试的过程中，与面试官聊到了一个咱们前端绕不过的话题，webpack和vite。仔细一想，自己对这方面的总结学习不太全面，只是停留在建立项目和npm run build的过程中。那么今天自己也对打包工具进行了一些学习，总结一下分享给大家，希望能有所帮助。（内容比较多持续更新中）

image.png

为什么要使用打包工具

这里我们以vue框架为例，当我们去开发项目，除了框架还有包括less/Sass等预处理内容，而其中有些是浏览器不能识别的，需要编译成浏览器可以识别的语言。

（简单来说，咱们使用的框架之类的浏览器不懂，浏览器只接受部分语言，需要有个工具把项目的内容变成浏览器可以接受的。webpack/vite就是这样的工具）

webpack

概念：一个静态资源打包工具。

特点：

  1. 以一个或者多个文件作为打包入口。将整个项目所有文件编译组合成一个或多个文件输出出去。（输出的文件bundle）
  2. 两种模式：开发模式（仅编译js中的es module语法）、生产模式（能编译js中es module语法，还能压缩js代码）

了解基本配置项 webpack.config.js

基本配置项（五个核心概念）
entry（入口）打包的入口（简单来说：从哪个文件开始打包）
output(出口)打包后文件到哪里去
loader(加载器)webpack本身只能处理js,json文件，其他的资源需要借助loader
plugins(插件)扩展功能
mode(模式)开发者模式 和 生成者模式
const path = require("path") // nodejs核心模块，处理路径问题
module.exports ={
    entry:"",
    output:{
        path: path.resolve(__dirname,'dist'),
        filename:''
    },
    module:{
        rules:[
        ]
    },
    plugins:[
    ],
    mode:'development' // 开发模式
}

两个模式

开发模式：简单来说就是开发代码的时候使用的模式。 1.编译代码，让浏览器认识 2.提前对代码进行检查

如何处理资源 css less sass等资源（webpack不能识别所以要处理）

webpack不能识别样式资源，需要借助loader解析。这里我们用css，less来做一个示范。（可在官方文档找对应的loader或github）

css（less，sass，stylus等解决方法相同）

  • 如果不使用任何的loader，就会报错，并提示你没有loader去处理，报错信息还给了官方的文档地址，通过文档我们可以去找相对应的loader下载解决相关问题。

  • 当前这个测试的案例是css出现问题，那么我们就去找一个css的loader解决（如果下载多个loader，不要忘记要添加相关配置项）

  • 保持 loader 的顺序：'style-loader' 在前，然后是 'css-loader'。如果不遵循此约定，webpack 可能会引发错误。
image.png image.png

image.png

image.png image.png

注意：这里我们下载配置完后运行是会报错的。因为此时我们只下载的了css-loader，但是配置里面有style-loader。

image.png image.png image.png image.png

处理图片资源（gif、jpeg、png、webp等）（属于一个图片资源的优化）

对于图片资源处理，一般小图片会转base64,因为是转成了字符串（可以减轻服务器发送请求的情况），大图片会因为转换后体积变大，所以不建议转变。

先去loader官网去找相对应的 loader库（资产管理 |webpack），根据文档进行配置

根据我们的需求，要找到可以配置大小的配置项（选择了文档中 General asset type） 不需要下载额外的loader，本身webpack就可以处理

image.png image.png

处理输出文件分类问题（运行后的文件混乱问题）

根据前面的配置，我们打包后的dist文件里面会将所有文件放在一起，而我们需要将数据分开。比如js文件放js文件夹等

js文件

image.png

图片资源文件如何配置（generator）

image.png image.png

重新打包文件需要去删除文件的问题（重新打包问题）

原理：在打包之前把path都清理掉，再进行打包 image.png

eslint（plugin，语法检测工具）

用于检测js和jsx（react）语法的工具，可以配置各种功能（配置rules规则）

  1. 下载
  2. webpack.config.js配置eslint插件
  3. 新建eslintrc文件（不建会报错）

当然大家也可以下载一个ESlint的插件，它会在打包之前就报出相关错误，但是功能并没有日志的好。具体还是要看打包的日志

配置文件书写方式：eslintrc. eslintrc.js eslintrc.json

官网文档：EslintWebpack插件 |webpack

// 1. 下载(下载后需要引入)
npm install eslint-webpack-plugin --save-dev

// 2. webpack.config.js配置文件引入
const ESLintPlugin = require('eslint-webpack-plugin');
 //  插件用构造函数，所有用new建立实例
module.exports = {
  // ...
  plugins: [new ESLintPlugin(options)],  // option有很多的选项，可以在官方文档具体查看
  // ...
};

// 简单举个例子
module.exports = {
  // ...
  plugins: [new ESLintPlugin({
  context：path.resolve(_dirname,"src") //去检测 src文件夹下的文件
  })], 
  // ...
};

// 3.配置.eslintrc.js文件（不配置会报错：此配置是一个比较常用的基础配置可复制使用）
module.exports = {
    extends:["eslint:recommended"], // 继承：eslint的官网规则（与class继承有点类似）
    env:{
        node:true, // 启动node中全局变量
        browser:true //启动浏览器中全局变量
    },
    parserOptions:{
        ecmaVersion:6,   // es6版本
        sourceType:"module"  // es module
    },
    rules:{
        "no-var":2,       // 不能使用var定义变量
    }
}
image.png

babel（js编译器，将高级语法编译成先后兼容的js语法，就可以在一些比较旧的版本运行，属于loader）

与eslint相同，要写配置文件 （babel.config.js / babel.config.json /.babelrc.js / .babelrc.json / .babelrc 或者 在package.json中babel ）

具体配置项：presets:[ ],(写babel的插件，扩展babel的能力) （@babel/preset-env：一个智能预设，允许你使用最新的js / @babel/preset-react：react-jsx语法的预设 / @babel/preset-typescript：编译ts语法的预设 等）

使用：

  1. 下载（npm install -D babel-loader @babel/core @babel/preset-env）
  2. 配置（可在官网查找 ）

官方文档：babel-loader | webpack

// 写法一：webpack.config.js文件直接写
 {
                test: /\.(?:js|mjs|cjs)$/,
                exclude: /node_modules/,  // 排除node_modules下的文件
                  loader: 'babel-loader',
                  options: {
                    presets: [       // 预设
                      ['@babel/preset-env']
                    ]
                  }
              }

// 写法二：建立一个babel的配置文件
module.exports = {
    presets: [
        [
            '@babel/preset-env',
        ]
    ]
}
image.png

处理html资源（自动映入，不用手动引入，属于plugin）

在我们的index的html文件中，一般我们会进行引入main.js文件，现在相关的处理html资源处理plugin来处理引入

使用： 下载（npm install html-minimizer-webpack-plugin --save-dev） 引入（const HtmlMinimizerPlugin = require("html-minimizer-webpack-plugin")） 配置（new HtmlMinimizerPlugin()）

image.png 
 plugins:[
      new HtmlMinimizerPlugin({
        // 找那个文件：以index.html文件为模板创建新的html文件
        // 新文件：结构会一致同时会自动引入打包的资源
        template:path.resolve(__dirname,"public/index.html")
      })
    ],

每次需要重新编译才能看到效果的问题（自动化配置）

dev-server建立开发服务器，主要原理是会监视src里面的变化自动重新编译

image.png

使用：

  1. 下载（npm webpack-dev-server -d）
  2. 配置
  3. 启动（npx webpack server）

注意：开发服务器中不会输出资源，它是在内存中编译打包。简单来说就是假如我们的输出文件是dist文件夹，npx webpack server是不会输出资源到dist文件下的

    // 开发服务器
    devServer:{
      host:'localhost',// 启动服务器域名
      port:'3000',// 启动服务器端口号
      open:true,// 是否自动打开浏览器
    },

总结

标题webpack解决相关问题的总结
webpack不认识css文件问题借助loader，npm install --save-dev css-loader style-loader,配置上相关属性
图片的一种优化base64借助loader，官网找到加载图片的文章配置相关需求（小的图片用base64可以减少网络请求）
打包后文件都挤在一起，没有分类配置filename等属性，可以配置打包后文件的结构
每次重新打包需要自己删除之前打包的文件问题输出配置中，添加clear属性解决
eslint插件：语法检测模块npm install eslint-webpack-plugin --save-dev，webpack插件配置好，建立相关配置文件eslintrc. eslintrc.js eslintrc.json（可以直接在vscode下载eslint的插件进行检测）
babel：将高级语法编译成向后兼容的语法npm install -D babel-loader @babel/core @babel/preset-env,需要单独新建配置文件，webpack文件配置
解决在html文件中要映入main.js文件问题npm install html-minimizer-webpack-plugin --save-dev,webpack配置
运行后修改文件，让它自动更新npm webpack-dev-server -d,启动方式发生变化npx webpack server

webpack与vite的区别

构造原理角度

webpack：又被称为模块打包工具。从入口文件开始，递归地构建一个依赖关系图（一个包含所有模块依赖关系的图），它会遍历整个项目的文件系统来查找所有相关的模块。

vite：利用浏览器原生的 ES 模块导入功能来支持。不需要像 Webpack 那样提前打包所有模块。当浏览器请求一个模块时，Vite 会根据请求的模块路径，即时地将对应的文件发送给浏览器。

热更新角度

webpack：热更新相对较慢。即使是项目中一个小模块修改了，也会重新构建整个模块图。

vite：热更新相对较快。当一个模块发生变化时，它会重新发送这个变化的模块给浏览器。

启动速度

webpack：启动相对比较慢，开始的时候需要一系列初始化工作，比如上面说的构建模块图。

vite：启动速度很快。它会启动一个简单的服务器，等待浏览器请求模块即可。

启动方式

webpack：先加载编译，后启动。

vite：先启动，再加载编译，启动快，首屏渲染速度相对较慢。

底层语言

webpack：js语言，毫秒级操作

vite：go语言，纳秒级操作，相比webpack会快很多

适用的场景

webpack:大型的、复杂的项目。webpack存在时间更长，有强大的配置和插件系统能够很好地处理这些复杂的情况，通过精细的配置来优化构建过程和输出结果

vite：适合于现代的前端项目，尤其是基于 Vue、React 等框架的项目。快速启动和热更新速度便于提高开发效率

avatar
文章
阅读
粉丝