init blog

docs/notes/webpack.md

@@ -0,0 +1,119 @@
+# 1. Webpack
+
+## 1.1 基础概念
+### 1.1.1 入口（Entry）
+入口起点指示 Webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。示例配置如下：
+```javascript
+// webpack.config.js
+module.exports = {
+  entry: './src/index.js'
+};
+```
+
+### 1.1.2 输出（Output）
+输出配置告诉 Webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件。示例配置如下：
+```javascript
+const path = require('path');
+
+module.exports = {
+  entry: './src/index.js',
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'bundle.js'
+  }
+};
+```
+
+## 1.2 加载器（Loaders）
+### 1.2.1 Babel Loader
+用于将 ES6+ 代码转换为浏览器可兼容的 JavaScript 代码。安装和配置示例如下：
+```bash
+npm install --save-dev babel-loader @babel/core @babel/preset-env
+```
+```javascript
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.js$/, 
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env']
+          }
+        }
+      }
+    ]
+  }
+};
+```
+
+### 1.2.2 CSS Loader 和 Style Loader
+用于处理 CSS 文件。安装和配置示例如下：
+```bash
+npm install --save-dev css-loader style-loader
+```
+```javascript
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.css$/, 
+        use: ['style-loader', 'css-loader']
+      }
+    ]
+  }
+};
+```
+
+## 1.3 插件（Plugins）
+### 1.3.1 HtmlWebpackPlugin
+用于生成 HTML 文件，并自动注入打包后的 JavaScript 文件。安装和配置示例如下：
+```bash
+npm install --save-dev html-webpack-plugin
+```
+```javascript
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: './src/index.html'
+    })
+  ]
+};
+```
+
+### 1.3.2 CleanWebpackPlugin
+用于在每次构建前清理 `dist` 目录。安装和配置示例如下：
+```bash
+npm install --save-dev clean-webpack-plugin
+```
+```javascript
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+
+module.exports = {
+  plugins: [
+    new CleanWebpackPlugin()
+  ]
+};
+```
+
+## 1.4 开发服务器（Dev Server）
+Webpack Dev Server 提供了一个简单的 Web 服务器，并且能够实时重新加载（Live Reloading）。安装和配置示例如下：
+```bash
+npm install --save-dev webpack-dev-server
+```
+```javascript
+module.exports = {
+  devServer: {
+    contentBase: './dist',
+    open: true
+  }
+};
+```
+运行开发服务器的命令：
+```bash
+npx webpack-dev-server --open
+```