前端面试题-(webpack基础)

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.初始化项目+安装依赖

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

1. npm init -y

复制代码

此时会天生一个基础的 package.json 文件。
必要注意的是 package.json 中 name 字段不能叫做 webpack, 否则下一步会报错

1. npm i webpack webpack-cli -D

复制代码

2.利用webpack

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

复制代码

1. 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.根本配置

五大核心概念

1. // Node.js的核心模块，专门用来处理文件路径
2. const path = require("path");
4. module.exports = {
5.   // 入口
6.   // 相对路径和绝对路径都行
7.   entry: "./src/main.js",
8.   // 输出
9.   output: {
10.     // path: 文件输出目录，必须是绝对路径
11.     // path.resolve()方法返回一个绝对路径
12.     // __dirname 当前文件的文件夹绝对路径
13.     path: path.resolve(__dirname, "dist"),
14.     // filename: 输出文件名
15.     filename: "main.js",
16.   },
17.   // 加载器,webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader，Webpack 才能解析
18.   module: {
19.     rules: [],
20.   },
21.   // 插件 扩展 Webpack 的功能
22.   plugins: [],
23.   // 模式
24.   mode: "development", // 开发模式
25. };

复制代码

开发者模式先容
开发模式顾名思义就是我们开发代码时利用的模式。
这个模式下我们重要做两件事：
1.编译代码，使浏览器能识别运行
开发时我们有样式资源、字体图标、图片资源、html 资源等，webpack 默认都不能处理这些资源，所以我们要加载配置来编译这些资源
2.代码质量检查，树立代码规范
提前检查代码的一些隐患，让代码运行时能更加健壮。
提前检查代码规范和格式，统一团队编码风格，让代码更优雅美观。

1. npx webpack

复制代码

Webpack 未来都通过 webpack.config.js 文件进行配置，来增强 Webpack 的功能
我们后面会以两个模式来分别搭建 Webpack 的配置，先进行开发模式，再完成生产模式

5.开发模式配置

1. {
2.   "name": "webpack_demo",
3.   "version": "1.0.0",
4.   "description": "",
5.   "main": "index.js",
6.   "scripts": {
7.     "test": "echo "Error: no test specified" && exit 1"
8.   },
9.   "keywords": [],
10.   "author": "zl",
11.   "license": "ISC",
12.   "devDependencies": {
13.     "@babel/core": "^7.26.0",
14.     "@babel/preset-env": "^7.26.0",
15.     "babel-loader": "^9.2.1",
16.     "css-loader": "^7.1.2",
17.     "eslint": "^9.16.0",
18.     "eslint-webpack-plugin": "^4.2.0",
19.     "html-webpack-plugin": "^5.6.3",
20.     "less": "^4.2.1",
21.     "less-loader": "^12.2.0",
22.     "sass": "^1.83.0",
23.     "sass-loader": "^16.0.4",
24.     "style-loader": "^4.0.0",
25.     "stylus": "^0.64.0",
26.     "stylus-loader": "^8.1.1",
27.     "webpack": "^5.97.1",
28.     "webpack-cli": "^5.1.4",
29.     "webpack-dev-server": "^5.2.0"
30.   }
31. }

复制代码

1.处理样式资源

1.下载对应的loader

1. npm i css-loader style-loader -D

复制代码

1. npm i less-loader -D

复制代码

1. npm i sass-loader sass -D

复制代码

1. npm i stylus-loader -D

复制代码

2.配置

1. // Node.js的路径处理模块
2. const path = require('path');
4. module.exports = {
5.   //1-----------------------------------------------------入口
6.   // 绝对路径与相对路径都可以
7.   entry: './src/main.js',
8.   //2----------------------------------------------------输出
9.   output: {
10.     /*  
11.   path: 文件输出目录，必须是绝对路径
12.   path.resolve()方法返回一个绝对路径
13.   __dirname 当前文件的文件夹绝对路径
14. */
15.     path: path.resolve(__dirname, 'dist'),
16.     // filename文件输出名
17.     filename: 'index.js',
18.   },
19.   //3-----------------------------------------------------加载器
20.   module: {
21.     rules: [
22.       //-----css配置
23.       {
24.         // 用来匹配.css结尾的文件
25.         test: /\.css$/,
26.         /*
27.       use数组中Loader的执行顺序是从右到左
28.       css-loader将css文件转化成commonjs对象,使得webpack可以打包
29.       tyle-loader会动态创建一个 Style 标签，里面放置 Webpack 中 Css 模块内容
30.       loader:xxx(使用loader只能写一个配置项)
31.     */
32.         use: ['style-loader', 'css-loader'],
33.       },
34.       //----less配置
35.       {
36.         test: /\.less$/,
37.         use: [
38.           // compiles Less to CSS
39.           'style-loader',
40.           'css-loader',
41.           'less-loader', //将less代码转化成css代码
42.         ],
43.       },
44.       // ----sass配置
45.       {
46.         test: /\.s[ac]ss$/i,
47.         use: [
48.           'style-loader',
49.           'css-loader',
50.           // 将 Sass 编译成 CSS
51.           'sass-loader',
52.         ],
53.       },
54.       // ----stylus配置
55.       {
56.         test: /\.styl$/,
57.         use: ['style-loader', 'css-loader', 'stylus-loader'],
58.       },
59.     ],
60.   },
61.   //4----------------------------------------------------------插件
62.   plugins: [],
63.   //5-----------------------------------------------------------模式
64.   mode: 'development', //开发模式
65. };

复制代码

2.处理其他资源

• 处理图片资源
  
• 修改输出资源的名称和路径
  
• 自动清算前次打包的资源
  
• 处理字体图标资源
  
• 处理其他资源(如视频音频）
  
• 处理js资源
  
• 处理HTML资源
  
• 开发情况服务器及其自动化
  

1. // Node.js的路径处理模块
2. const path = require('path');
3. const ESLintWebpackPlugin = require('eslint-webpack-plugin');
4. const HtmlWebpackPlugin = require("html-webpack-plugin");
6. module.exports = {
7.   //1-----------------------------------------------------入口
8.   // 绝对路径与相对路径都可以
9.   entry: './src/main.js',
10.   //2----------------------------------------------------输出
11.   output: {
12.     /*  
13.   path: 文件输出目录，必须是绝对路径
14.   path.resolve()方法返回一个绝对路径
15.   __dirname 当前文件的文件夹绝对路径
16. */
17.     path: path.resolve(__dirname, 'dist'),
18.     // js文件输出路径/名称
19.     filename: 'static/js/index.js',
20.     // clean: true, //清除上次打包内容(在开发环境下我们会启用开发服务器,它不会打包内容)
21.   },
22.   //3-----------------------------------------------------加载器
23.   module: {
24.     rules: [
25.       //-----css配置
26.       {
27.         // 用来匹配.css结尾的文件
28.         test: /\.css$/,
29.         /*
30.       use数组中Loader的执行顺序是从右到左
31.       css-loader将css文件转化成commonjs对象,使得webpack可以打包
32.       tyle-loader会动态创建一个 Style 标签，里面放置 Webpack 中 Css 模块内容
33.       loader:xxx(使用loader只能写一个配置项)
34.     */
35.         use: ['style-loader', 'css-loader'],
36.       },
37.       //----less配置
38.       {
39.         test: /\.less$/,
40.         use: [
41.           // compiles Less to CSS
42.           'style-loader',
43.           'css-loader',
44.           'less-loader', //将less代码转化成css代码
45.         ],
46.       },
47.       // ----sass配置
48.       {
49.         test: /\.s[ac]ss$/i,
50.         use: [
51.           'style-loader',
52.           'css-loader',
53.           // 将 Sass 编译成 CSS
54.           'sass-loader',
55.         ],
56.       },
57.       // ----stylus配置
58.       {
59.         test: /\.styl$/,
60.         use: ['style-loader', 'css-loader', 'stylus-loader'],
61.       },
62.       // -----图片处理
63.       {
64.         test: /\.(png|jpe?g|gif|webp)$/,
65.         type: 'asset',
66.         parser: {
67.           dataUrlCondition: {
68.             maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
69.           },
70.         },
71.         // 路径处理
72.         generator: {
73.           // 将图片文件输出到 static/imgs 目录中
74.           // 将图片文件命名 [hash:8][ext][query]
75.           // [hash:8]: hash值取8位
76.           // [ext]: 使用之前的文件扩展名
77.           // [query]: 添加之前的query参数
78.           filename: 'static/imgs/[hash:10][ext][query]',
79.         },
80.       },
81.       // -----字体图标处理以及其他资源的处理
82.       {
83.         test: /\.(ttf|woff2?|mp3|mp4|avi)$/,
84.         type: 'asset/resource',
85.         generator: {
86.           filename: 'static/media/[hash:8][ext][query]',
87.         },
88.       },
89.       // -----babel对js的处理
90.       {
91.         test: /\.js$/,
92.         exclude: /node_modules/, // 排除node_modules代码不编译
93.         loader: "babel-loader",
94.       },
95.     ],
96.   },
97.   //4----------------------------------------------------------插件
98.   plugins: [
99.     // -----eslint检查
100.     new ESLintWebpackPlugin({
101.       // 指定检查文件的根目录
102.       context: path.resolve(__dirname, 'src'),
103.     }),
104.     // -----自动生成html文件
105.     new HtmlWebpackPlugin({
106.       // 以 public/index.html 为模板创建文件
107.       // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
108.       template: path.resolve(__dirname, "public/index.html"),
109.     }),
110.   ],
111.   //5-----------------------------------------------------------模式
112.   mode: 'development', //开发模式
113.   //-------------------------------------------------------- 开发服务器
114.   devServer: {
115.     host: "localhost", // 启动服务器域名
116.     port: "3000", // 启动服务器端口号
117.     open: true, // 是否自动打开浏览器
118.   },
119. };

复制代码

1. module.exports = {
2.   presets: ["@babel/preset-env"],
3. };

复制代码

1. module.exports = {
2.   // 继承 Eslint 规则
3.   extends: ["eslint:recommended"],
4.   env: {
5.     node: true, // 启用node中全局变量
6.     browser: true, // 启用浏览器中全局变量
7.   },
8.   parserOptions: {
9.     ecmaVersion: 6,
10.     sourceType: "module",
11.   },
12.   rules: {
13.     "no-var": 2, // 不能使用 var 定义变量
14.   },
15. };

复制代码

6.生产模式配置

生产模式是开发完成代码后，我们必要得到代码未来部署上线。
这个模式下我们重要对代码进行优化，让其运行性能更好。
优化重要从两个角度出发:

• 优化代码运行性能
  
• 优化代码打包速率
  

常见的处理

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

 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。