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

webpack 学习

news 2026/3/27 3:01:41

一、webpack概念

本质上，webpack是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个bundles，它们均为静态资源，用于展示你的内容。

二、安装

1.使用webpack前我们先安装yarn npm install yarn -g 全局安装

初始化文件 yarn init -y

安装webpack yarn add -D webpack webpack-cli

2.创建src文件夹创建index.js文件

打开index文件方法创建html页面进行js的引入

或者使用在终端使用node命令 node js文件名称直接执行当前的js命令

3.配置 webpack 创建webpack.config.js （因为是个js文件想要全局进行使用所以进行抛出）

webpack 偏node写法所以

webpack抛出使用 node 抛出方法module.exports 加对象方式

4.配置打包入口

entry 是文件入口配置好想要打包的页面在终端进行打包yarn webpack

有三种方式单个文件打包多个文件打包多个文件命名打包

打包命令 yarn webpack

module.exports = { 单个文件打包 // entry: './src/index.js' 多个文件一起打包 // entry: ['./src/index.js', './src/hi.js'] 命名打包 entry: { index: './src/index.js', hi: './src/hi.js' } }

5.output出口文件

出口文件 output: { filename: 指定名称 clean: true 清空打包文件 path: 指定打包位置 }

但是path需要在配置前引入（pathh是自带的文件）

const path = require('path');

output: { filename: '[name]-[id]-[hash].js', //指定名称 生成名字 id 和不同hash值 clean: true, //清空打包文件 path: path.resolve(__dirname, 'dist') //指定打包位置 __dirname默认名字 },

6.模式mode 两种 production生产模式 development开发模式

通过选择development,production或none之中的一个，来设置mode参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为production

module.exports = { // 模式两种 production 生产文件（默认） development mode: 'production' }

7.loader（转换某些类型的模块）

webpack 只理解JS与JSON文件所以配置插件让webpack识别其他语言 html或者react vue等

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

使用前要下载对应的loader

npm install --save-dev css-loader ts-loader

使用在webpack.config.js文件中指定 loader （具体的loader模块在官网就可以查找）

module: { rules: [ { test: /\.css$/i, use: ['style-loader', 'css-loader'], }, { test: /\.(png|svg|jpg|jpeg|gif)$/i, type: 'asset/resource', }, ] }

8.插件plugin （扩充了webpack的功能）

插曲babel 是将老版本的东西转为新版本(装指定版本的东西) 可以安装

命令 npm install -D babel-loader @babel/core @babel/preset-env webpack

下载插件 yarn add -D html-webpack-plugin （D指的是开发环境）

在webpack.config.js内进行配置需要引入才使用插件

const HtmlWebpackPlugin = require('html-webpack-plugin'); plugins:[ new HtmlWebpackPlugin({ template:'./src/index.html' }) ]

9.映射源码

“映射源码”通常指的就是Source Map。它是一个关键的信息文件，里面存储着转换后代码与原始源代码的位置映射关系

Webpack 通过devtool配置项来控制 Source Map 的生成方式和行为

devtool:"inline-source-map"

基本流程

生成：当你设置devtool为特定值（如'source-map'）并进行打包时，Webpack 除了生成bundle.js，还会生成对应的bundle.js.map文件。
关联：在生成的bundle.js文件的最后一行，会自动添加一行注释，告诉浏览器 Source Map 文件的位置。
```
//# sourceMappingURL=bundle.js.map
```
加载与还原：浏览器在默认情况下不会加载这个 map 文件。只有当你打开浏览器的开发者工具（DevTools）时，浏览器才会根据注释去加载对应的.map文件。然后，浏览器利用 map 文件中的映射关系，将正在执行的压缩代码在开发者工具的 "Sources" 面板中还原为你编写的源代码，方便你进行断点调试。