当前位置： 首页 > article >正文

前端面试题-(webpack基础)

article 2025/1/8 3:04:36

1.初识webpack

1.是什么？

一个打包工具

2.为什么需要

开发时，我们会使用框架（React、Vue），ES6 模块化语法，Less/Sass 等 css 预处理器等语法进行开发。

这样的代码要想在浏览器运行必须经过编译成浏览器能识别的 JS、Css 等语法，才能运行。

所以我们需要打包工具帮我们做完这些事。

除此之外，打包工具还能压缩代码、做兼容性处理、提升代码性能等。

3.基本使用

Webpack 是一个静态资源打包工具。

它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。

输出的文件就是编译好的文件，就可以在浏览器端运行了。

我们将 Webpack 输出的文件叫做 bundle。

功能介绍

Webpack 本身功能是有限的:

  • 开发模式：仅能编译 JS 中的 ES Module 语法
  • 生产模式：能编译 JS 中的 ES Module 语法，还能压缩 JS 代码

1.初始化项目+安装依赖

打开终端，来到项目根目录。运行以下指令：

npm init -y

此时会生成一个基础的 package.json 文件。

需要注意的是 package.json 中 name 字段不能叫做 webpack, 否则下一步会报错

npm i webpack webpack-cli -D

2.使用webpack

npx webpack ./src/main.js --mode=development
npx webpack ./src/main.js --mode=production

npx webpack: 是用来运行本地安装 Webpack 包的。

./src/main.js: 指定 Webpack 从 main.js 文件开始打包，不但会打包 main.js，还会将其依赖也一起打包进来。

--mode=xxx：指定模式（环境）。

此时项目已经打包好了

默认 Webpack 会将文件打包输出到 dist 目录下，我们查看 dist 目录下文件情况就好了

Webpack 本身功能比较少，只能处理 js 资源，一旦遇到 css 等其他资源就会报错。

所以我们学习 Webpack，就是主要学习如何处理其他资源。

4.基本配置

五大核心概念

// Node.js的核心模块，专门用来处理文件路径
const path = require("path");

module.exports = {
  // 入口
  // 相对路径和绝对路径都行
  entry: "./src/main.js",
  // 输出
  output: {
    // path: 文件输出目录，必须是绝对路径
    // path.resolve()方法返回一个绝对路径
    // __dirname 当前文件的文件夹绝对路径
    path: path.resolve(__dirname, "dist"),
    // filename: 输出文件名
    filename: "main.js",
  },
  // 加载器,webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader，Webpack 才能解析
  module: {
    rules: [],
  },
  // 插件 扩展 Webpack 的功能
  plugins: [],
  // 模式
  mode: "development", // 开发模式
};

开发者模式介绍

开发模式顾名思义就是我们开发代码时使用的模式。

这个模式下我们主要做两件事：

1.编译代码，使浏览器能识别运行

开发时我们有样式资源、字体图标、图片资源、html 资源等，webpack 默认都不能处理这些资源，所以我们要加载配置来编译这些资源

2.代码质量检查，树立代码规范

提前检查代码的一些隐患，让代码运行时能更加健壮。

提前检查代码规范和格式，统一团队编码风格，让代码更优雅美观。

npx webpack

Webpack 将来都通过 webpack.config.js 文件进行配置，来增强 Webpack 的功能

我们后面会以两个模式来分别搭建 Webpack 的配置，先进行开发模式，再完成生产模式

5.开发模式配置

{
  "name": "webpack_demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "zl",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.26.0",
    "@babel/preset-env": "^7.26.0",
    "babel-loader": "^9.2.1",
    "css-loader": "^7.1.2",
    "eslint": "^9.16.0",
    "eslint-webpack-plugin": "^4.2.0",
    "html-webpack-plugin": "^5.6.3",
    "less": "^4.2.1",
    "less-loader": "^12.2.0",
    "sass": "^1.83.0",
    "sass-loader": "^16.0.4",
    "style-loader": "^4.0.0",
    "stylus": "^0.64.0",
    "stylus-loader": "^8.1.1",
    "webpack": "^5.97.1",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^5.2.0"
  }
}

1.处理样式资源

1.下载对应的loader
npm i css-loader style-loader -D
npm i less-loader -D
npm i sass-loader sass -D
npm i stylus-loader -D
2.配置
// Node.js的路径处理模块
const path = require('path');

module.exports = {
  //1-----------------------------------------------------入口
  // 绝对路径与相对路径都可以
  entry: './src/main.js',
  //2----------------------------------------------------输出
  output: {
    /*  
  path: 文件输出目录，必须是绝对路径
  path.resolve()方法返回一个绝对路径
  __dirname 当前文件的文件夹绝对路径 
*/
    path: path.resolve(__dirname, 'dist'),
    // filename文件输出名
    filename: 'index.js',
  },
  //3-----------------------------------------------------加载器
  module: {
    rules: [
      //-----css配置
      {
        // 用来匹配.css结尾的文件
        test: /\.css$/,
        /*
      use数组中Loader的执行顺序是从右到左
      css-loader将css文件转化成commonjs对象,使得webpack可以打包
      tyle-loader会动态创建一个 Style 标签，里面放置 Webpack 中 Css 模块内容
      loader:xxx(使用loader只能写一个配置项)
    */
        use: ['style-loader', 'css-loader'],
      },
      //----less配置
      {
        test: /\.less$/,
        use: [
          // compiles Less to CSS
          'style-loader',
          'css-loader',
          'less-loader', //将less代码转化成css代码
        ],
      },
      // ----sass配置
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          'css-loader',
          // 将 Sass 编译成 CSS
          'sass-loader',
        ],
      },
      // ----stylus配置
      {
        test: /\.styl$/,
        use: ['style-loader', 'css-loader', 'stylus-loader'],
      },
    ],
  },
  //4----------------------------------------------------------插件
  plugins: [],
  //5-----------------------------------------------------------模式
  mode: 'development', //开发模式
};

2.处理其他资源

  1. 处理图片资源
  2. 修改输出资源的名称和路径
  3. 自动清理上次打包的资源
  4. 处理字体图标资源
  5. 处理其他资源(如视频音频）
  6. 处理js资源
  7. 处理HTML资源
  8. 开发环境服务器及其自动化
// Node.js的路径处理模块
const path = require('path');
const ESLintWebpackPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  //1-----------------------------------------------------入口
  // 绝对路径与相对路径都可以
  entry: './src/main.js',
  //2----------------------------------------------------输出
  output: {
    /*  
  path: 文件输出目录，必须是绝对路径
  path.resolve()方法返回一个绝对路径
  __dirname 当前文件的文件夹绝对路径 
*/
    path: path.resolve(__dirname, 'dist'),
    // js文件输出路径/名称
    filename: 'static/js/index.js',
    // clean: true, //清除上次打包内容(在开发环境下我们会启用开发服务器,它不会打包内容)
  },
  //3-----------------------------------------------------加载器
  module: {
    rules: [
      //-----css配置
      {
        // 用来匹配.css结尾的文件
        test: /\.css$/,
        /*
      use数组中Loader的执行顺序是从右到左
      css-loader将css文件转化成commonjs对象,使得webpack可以打包
      tyle-loader会动态创建一个 Style 标签，里面放置 Webpack 中 Css 模块内容
      loader:xxx(使用loader只能写一个配置项)
    */
        use: ['style-loader', 'css-loader'],
      },
      //----less配置
      {
        test: /\.less$/,
        use: [
          // compiles Less to CSS
          'style-loader',
          'css-loader',
          'less-loader', //将less代码转化成css代码
        ],
      },
      // ----sass配置
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          'css-loader',
          // 将 Sass 编译成 CSS
          'sass-loader',
        ],
      },
      // ----stylus配置
      {
        test: /\.styl$/,
        use: ['style-loader', 'css-loader', 'stylus-loader'],
      },
      // -----图片处理
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
          },
        },
        // 路径处理
        generator: {
          // 将图片文件输出到 static/imgs 目录中
          // 将图片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件扩展名
          // [query]: 添加之前的query参数
          filename: 'static/imgs/[hash:10][ext][query]',
        },
      },
      // -----字体图标处理以及其他资源的处理
      {
        test: /\.(ttf|woff2?|mp3|mp4|avi)$/,
        type: 'asset/resource',
        generator: {
          filename: 'static/media/[hash:8][ext][query]',
        },
      },
      // -----babel对js的处理
      {
        test: /\.js$/,
        exclude: /node_modules/, // 排除node_modules代码不编译
        loader: "babel-loader",
      },
    ],
  },
  //4----------------------------------------------------------插件
  plugins: [
    // -----eslint检查
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, 'src'),
    }),
    // -----自动生成html文件
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, "public/index.html"),
    }),
  ],
  //5-----------------------------------------------------------模式
  mode: 'development', //开发模式
  //-------------------------------------------------------- 开发服务器
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
  },
};

module.exports = {
  presets: ["@babel/preset-env"],
};
module.exports = {
  // 继承 Eslint 规则
  extends: ["eslint:recommended"],
  env: {
    node: true, // 启用node中全局变量
    browser: true, // 启用浏览器中全局变量
  },
  parserOptions: {
    ecmaVersion: 6,
    sourceType: "module",
  },
  rules: {
    "no-var": 2, // 不能使用 var 定义变量
  },
};

6.生产模式配置

生产模式是开发完成代码后，我们需要得到代码将来部署上线。

这个模式下我们主要对代码进行优化，让其运行性能更好。

优化主要从两个角度出发:

  1. 优化代码运行性能
  2. 优化代码打包速度

常见的处理

  1. 提取Css成单独文件
  2. Css兼容性处理
  3. Css压缩
  4. webpack5在生产模式下默认会进行js元HTML压缩

 


http://www.kler.cn/a/470983.html

相关文章：

  • 30分钟学会HTML
  • 科研绘图系列：R语言单细胞数据常见的可视化图形
  • go如何从入门进阶到高级
  • 安卓漏洞学习（十六）：unicorn在逆向中的使用
  • 牛客网刷题 ——C语言初阶（6指针）——字符逆序
  • 现代密码学期末重点（备考ing）
  • 计算机网络常见面试题及解答
  • 在Linux中，zabbix如何监控脑裂？
  • 接口开发完后，个人对于接下来接口优化的一些思考
  • iOS - 自旋锁
  • Unity【Colliders碰撞器】和【Rigibody刚体】的应用——小球反弹效果
  • Read View在MVCC是如何工作的？
  • 解密序列建模：理解 RNN、LSTM 和 Seq2Seq
  • 深度学习GPU服务器推荐：打造高效运算平台
  • js 之图片流式转换及图片处理+createObjectURL+canvas+webgl+buffer
  • LED背光驱动芯片RT9293应用电路
  • 用Python进行RU计算
  • Qt pdf分割成png格式
  • 5.zookeeper可视化工具ZooInspector
  • QT自定义工具条渐变背景颜色一例
  • 基于YOLOV5的车辆跟踪与目标检测
  • 【C++数据结构——内排序】希尔排序（头歌实践教学平台习题）【合集】
  • 【FlutterDart】 listView例子一（13 /100）
  • 高效工作流：用Mermaid绘制你的专属流程图；如何在Vue3中导入mermaid绘制流程图
  • 抖音a_bogus,mstoken全参数爬虫逆向补环境2024-06-15最新版
  • 可缩放大屏布局方式