feat：webpack5

docs/.vitepress/config.mjs

@@ -37,10 +37,10 @@ export default defineConfig({
             text: "TypeScript",
             link: "/view/blogs/typescript/1.TypeScript.md"
           },
-          // {
-          //   text: "uniapp",
-          //   link: "/view/blogs/vue/1.Ref.md"
-          // },
+          {
+            text: "webpack",
+            link: "/view/blogs/webpack/1.搭建最简单的webpack"
+          },
         ]
       },
       {

docs/index.md

@@ -16,6 +16,10 @@ hero:
     - theme: alt
       text: 学习笔记
       link: /view/blogs/vue/1.Ref
+
+    - theme: alt
+      text: webpack
+      link: /view/blogs/webpack/1.搭建最简单的webpack
 features:
   - title: <svg class="home-features-title" viewBox="0 0 128 128" width="24" height="24" ><path fill="#42b883" d="M78.8,10L64,35.4L49.2,10H0l64,110l64-110C128,10,78.8,10,78.8,10z" ></path><path fill="#35495e" d="M78.8,10L64,35.4L49.2,10H25.6L64,76l38.4-66H78.8z" ></path></svg>Vue3
     details: 易学易用、性能出色、灵活多变

docs/view/blogs/webpack/1.搭建最简单的webpack.md

@@ -0,0 +1,119 @@
+# 搭建 <a class="cursor-pointer" href="https://www.webpackjs.com/concepts/#entry">webpack</a> 步骤
+
+## 初始化 <a class="cursor-pointer" href="https://www.webpackjs.com/concepts/#entry">webpack</a>
+
+新建一个文件夹，通过 `cmd` 到终端进行初始化 `npm init -y` 或者 `npm init ` 一直按回车直到完成，完成之后会出现一个 `package.json` 文件
+
+<img src="/public/image-webpack/01.png" />
+
+## 安装 <a class="cursor-pointer" href="https://www.webpackjs.com/concepts/#entry">webpack</a> 和 <a class="cursor-pointer" href="https://webpack.docschina.org/api/cli/">webpack-cli</a>
+
+`npm install webpack webpack-cli -D` 安装完成后,会出现一个`node_model` 的文件夹，我们就能在里面找到安装的 `webpack 和 webpack-cli`
+
+<img src="/public/image-webpack/02.png" />
+
+我们需要建立一个`src`文件夹来存放 `index.js` 文件和一个`index.html`文件、一个`css文件`,这完成后我们还需要建一个我们在和src同级建立`webpack.config.js`的文件，这个文件是我们需要搭建一些`webpack`配置的文件
+
+<img src="/public/image-webpack/03.png" />
+
+## 配置 webpack.config.js
+
+`webpack.config.js` 需要暴露出一个配置对象
+
+`entry` 是文件的主入口，这个 `index.js` 就是我们项目的入口文件
+
+`output` 是输出文件的配置，他告诉你 你输出的文件在哪里，主要输出文件的默认是 `./dist/main.js` , 其他生成文件默认放置在 `./dist ` 文件夹中。
+
+<span class="font-700">代码如下</span>
+
+```javascript
+const path = require('path');
+module.exports = {
+  entry:"./index.js",
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'my-first-webpack.bundle.js',
+  },
+}
+```
+
+::: tip
+`output ` 属性还有 <a class="cursor-pointer" href="https://www.webpackjs.com/configuration/output/">更多可配置的特性</a> 如果你想要了解更多关于 `output` 属性的概念，可以通过阅读 输出章节 来了解更多。
+:::
+
+## 添加 <a class="cursor-pointer" href="https://www.webpackjs.com/concepts/loaders/">loader</a>
+
+这个时候我们已经配置了一个简单的 `webpack` 项目了，但我们还需要添加一些 `loader` 来处理 `JavaScript` 文件。
+`loader` 让 `webpack` 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。
+
+<span class="font-700">代码如下</span>
+
+```javascript
+const path = require('path');
+
+module.exports = {
+  entry:"./index.js",
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'my-first-webpack.bundle.js',
+  },
+  module:{
+   rules: [{ test: /\.css$/, use: ['style-loader', 'css-loader'] }],
+  }
+}
+```
+
+在上面代码中我们新增了一个 `module` ，通过 `module` 对象定义了 rules 属性，里面包含两个必须属性：test 和 use，
+
+##  插件 <a class="cursor-pointer" href="https://www.webpackjs.com/concepts/#plugins">plugin</a>
+
+我们此时需要配置一个 `HTML` 的插件，`html-webpack-plugin` 为应用程序生成一个 HTML 文件，并自动将生成的所有 bundle 注入到此文件中。
+
+```javascript
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+  entry:"./index.js",
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'my-first-webpack.bundle.js',
+  },
+  module:{
+   rules: [{ test: /\.css$/, use: ['style-loader', 'css-loader'] }],
+  },
+  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
+}
+```
+
+在上面代码中我们新增了 `HTML`  文件的插件，来帮我们把编译的入口文件引入 `index.html` 中。
+
+## 模式 <a class="cursor-pointer" href="https://www.webpackjs.com/concepts/#mode">mode</a>
+
+在此次中我们新增了模式`mode`，用来区分是线上环境还是本地环境，
+
+本地环境：`development`
+
+线上环境：`production`
+
+没有的时候是：`none`
+
+```javascript
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+  mode:"development",
+  entry:"./index.js",
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'my-first-webpack.bundle.js',
+  },
+  module:{
+   rules: [{ test: /\.css$/, use: ['style-loader', 'css-loader'] }],
+  },
+  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
+}
+```
+
+到此我们初步搭建一个简单的的`webpack`配置就基本完成了