push doc

docs/base/config.md

@@ -0,0 +1,97 @@
+# 基本配置
+
+在开始使用 `Webpack` 之前，我们需要对 `Webpack` 的配置有一定的认识。
+
+## 5 大核心概念
+
+1. entry（入口）
+
+指示 Webpack 从哪个文件开始打包
+
+2. output（输出）
+
+指示 Webpack 打包完的文件输出到哪里去，如何命名等
+
+3. loader（加载器）
+
+webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader，Webpack 才能解析
+
+4. plugins（插件）
+
+扩展 Webpack 的功能
+
+5. mode（模式）
+
+主要由两种模式：
+
+- 开发模式：development
+- 生产模式：production
+
+## 准备 Webpack 配置文件
+
+在项目根目录下新建文件：`webpack.config.js`
+
+```js
+module.exports = {
+  // 入口
+  entry: "",
+  // 输出
+  output: {},
+  // 加载器
+  module: {
+    rules: [],
+  },
+  // 插件
+  plugins: [],
+  // 模式
+  mode: "",
+};
+```
+
+Webpack 是基于 Node.js 运行的，所以采用 Common.js 模块化规范
+
+## 修改配置文件
+
+1. 配置文件
+
+```js
+// Node.js的核心模块，专门用来处理文件路径
+const path = require("path");
+
+module.exports = {
+  // 入口
+  // 相对路径和绝对路径都行
+  entry: "./src/main.js",
+  // 输出
+  output: {
+    // path: 文件输出目录，必须是绝对路径
+    // path.resolve()方法返回一个绝对路径
+    // __dirname 当前文件的文件夹绝对路径
+    path: path.resolve(__dirname, "dist"),
+    // filename: 输出文件名
+    filename: "main.js",
+  },
+  // 加载器
+  module: {
+    rules: [],
+  },
+  // 插件
+  plugins: [],
+  // 模式
+  mode: "development", // 开发模式
+};
+```
+
+2. 运行指令
+
+```:no-line-numbers
+npx webpack
+```
+
+此时功能和之前一样，也不能处理样式资源
+
+## 小结
+
+Webpack 将来都通过 `webpack.config.js` 文件进行配置，来增强 Webpack 的功能
+
+我们后面会以两个模式来分别搭建 Webpack 的配置，先进行开发模式，再完成生产模式