什么是Webpack
本质： 一种前端资源编译、打包工具。
- 多份资源文件打包成一个 Bundle
- 支持 Babel、Eslint、TS、CoffeScript、Less、Sass
- 支持模块化处理 css、图片等资源
- 支持 HMR + 开发服务器
- 支持持续监听、持续构建
- 支持代码分离
- 支持 Tree-shaking
- 支持 Sourcemap 等
为什么要学Webpack
前端工程化工具出现之前靠手动管理资源文件，比如通过<link >标签引入样式文件，通过<script> </script>标签引入 JS 文件等，但这种做法会出现很多问题：
- 操作过程繁琐
- 存在依赖关系时要严格按照顺序书写
- 开发与生产环境一致导致难以接入 TS 或者 JS 的新特性
- 比较难接入 Less、Sass 等工具
- JS、CSS、图片资源管理模型不一致等
为了解决这些问题出现了许多前端工程化工具：Webpack、Vite、browserifyjs 等，某种程度上正是这些工具的出现，才有了前端工程这一概念
Webpack 的用法
- 安装 Webpack：
npm i -D webpack webpack-cli - 编辑配置文件 webpack.config.js （这一步是关键，使用过程中这里往往最耗时）
//在 webpack.config.js 中写这些内容
module.exports = {
entry: 'main.js',
output: {
filename: "[name].js",
path: path.join(__dirname,"./dist"),
},
module: {
rules: [{
test: /.less$/i,
use: ['style-loader','css-loader','less-loader']
}],
}
}
这段代码有什么作用下面是我提问AI的回答： 这段代码是在webpack配置文件webpack.config.js中的，它用来配置webpack的入口和出口文件路径，以及定义规则来处理.less文件。
让我们逐行解释每一行的作用：
-
module.exports = {: 这将导出一个对象，它包含了webpack的配置信息。 -
entry: 'main.js',: 这指定了webpack的入口文件为'main.js'。这是你的应用程序的主要入口点，webpack将从这个文件开始构建你的应用程序。 -
output: {: 设置webpack的输出配置。 -
filename: "[name].js",: 这指定了输出文件的名称，"[name]"将会被替换成入口文件的名称。在这个例子中，输出文件将会被命名为'main.js'。 -
path: path.join(__dirname,"./dist"),: 这指定了输出文件的路径。在这个例子中，输出文件将会被保存在当前目录下的'dist'文件夹中。 -
module: {: 这是webpack模块配置的开始。 -
rules: [{: 这定义了用于处理不同类型文件的规则。 -
test: /.less$/i,: 这是一个正则表达式，它将被用来匹配文件名以.less结尾的文件。即用来找到.less文件。 -
use: ['style-loader','css-loader','less-loader']: 当某个文件匹配到了前面的规则时，webpack将使用这些加载器来处理该文件。在这个例子中，依次使用了'style-loader'、'css-loader'和'less-loader'来处理.less文件。这些加载器用于将.less文件转换为浏览器可识别的CSS，并将其注入到HTML中。
总而言之，这段代码中的每一行都有特定的作用，用于设置webpack的入口、出口和处理.less文件的规则。
- 执行编译命令：
npx webpack然后会在根目录的 dist 文件夹下得到编译出的打包文件 main.js（默认为main.js，可以修改）
Webpack的核心流程
- Webpack 本质上完成的事情：模块化 + 一致性
- 多个文件资源合并成一个，减少 HTTP 请求数
- 支持模块化开发
- 支持 typescript、CoffeeScript 语言
- 统一图片、CSS、字体等其他资源的处理模型
