webpack
1、什么是webpack，它的作用是什么？
Webpack是一个用于现代JavaScript应用程序的静态模块打包工具。以下是Webpack的主要功能：
（1）模块打包：Webpack将多个JavaScript文件打包成一个或多个输出文件，减少了网络请求次数，提高了网页加载速度。同时，Webpack还支持将其他类型的文件，如CSS、图片、字体等文件，作为模块进行打包。
（2）依赖管理：Webpack可以分析模块之间的依赖关系，根据配置的入口文件找出所有依赖的模块，并将其整合到打包结果中。
（3）文件转换：Webpack本身只能处理JavaScript模块，但通过加载器(Loader)的使用，可以将其他类型的文件（如CSS、LESS、图片等）转换为有效的模块，使其能够被打包到最终的结果中。
（4）代码拆分：Webpack支持将代码拆分成多个模块，按需加载，实现按需加载和提升应用性能。
（5）插件系统：Webpack提供了丰富的插件系统，可以通过插件实现各种功能的扩展，例如压缩代码、自动生成HTML文件等。
总的来说，Webpack是一个强大的工具，可以帮助开发者更好地管理、打包和优化前端资源。
2、创建一个简单得webpack
（1）首先创建一个文件夹 webpack-demo
cd webpack-demo
// 初始化项目
npm init -y
npm i webpack webpack-cli -D
此时 你得项目就变成了：
（2）在项目中创建src文件夹 并创建 index.html， index.js，index.css
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
然后就开始打包吧~
在项目中新建 webpack.config.js
__dirname： 当前文件所在文件夹的绝对路径
<link rel="stylesheet" href="./index.css">
<script src="./index.js"></script>
</head>
<body>
<div>你好：卧龙!</div>
</body>
</html>
// index.js
import "./index.css";
console.log('大聪明，动手敲一敲吧')
// index.css
body{
background: blue;
}
（3）在项目中新建 webpack.config.js
// i 代表 install 的缩写
npm i html-webpack-plugin -D
npm i css-loader -D
npm i style-loader -D
// css-loader只是让webpack去识别css语法，而并不能把样式放在界面上进行使用，这个活css-
loader做不了。所以需要另一个loader，style-loader。
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
module.exports = {
entry: "./src/index.js",
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "./src/index.html"),
}),
],
};
（4）此时需要在package.json 新增一个 build 指令
"scripts": {
"build": "webpack",
...
},
（5）运行
npm run build
此时在项目中就会新增一个dist文件文件内容包括如下
点击查看时这里面的代码是经过压缩的（在文件中右键 选择格式化文档）
你就会发现 我们之前写的代码被打包进来啦
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。