Add Webpack Note

Author: Jacksonlike

sidebar.md

@@ -1,5 +1,4 @@
 - [前言](/)
-- bin
 - Browser
   - [动画](Browser/1.动画)
   - [二进制数据](Browser/2.二进制数据)
@@ -51,3 +50,6 @@
 - shell
   - [npm和yarn](shell/1.npm和yarn)
   - [git](shell/2.git)
+- webpack
+  - [核心概念](webpack/1.核心概念)
+  - [API](webpack/2.API)

webpack/1.核心概念.md

@@ -0,0 +1,117 @@
+# 概念
+
+## 入口(entry)
+
+指示 webpack 应该使用哪个模块，来作为构建其内部 依赖图(dependency graph) 的开始。
+
+描述入口的对象：
+
+- dependOn: 当前入口所依赖的入口。它们必须在该入口被加载前被加载
+- filename: 指定要输出的文件名称
+- import: 启动时需加载的模块
+- library: 指定 library 选项，为当前 entry 构建一个 library
+- runtime: 运行时 chunk 的名字。如果设置了，就会创建一个以这个名字命名的运行时 chunk，否则将使用现有的入口作为运行时
+
+常见场景
+
+```js
+// 分离 app(应用程序) 和 vendor(第三方库) 入口
+module.exports = {
+  entry: {
+    main: './src/app.js',
+    vendor: './src/vendor.js',
+  },
+};
+
+// 多页应用
+module.exports = {
+  entry: {
+    pageOne: './src/pageOne/index.js',
+    pageTwo: './src/pageTwo/index.js',
+    pageThree: './src/pageThree/index.js',
+  },
+};
+```
+
+## 输出(output)
+
+output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件
+
+即使可以存在多个 entry 起点，但只能指定一个 output 配置
+
+## loader
+
+loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中
+
+### 使用 loader：
+
+#### 配置方式（推荐）
+
+在 webpack.config.js 文件中指定 loader，loader 从右到左（或从下到上）地取值(evaluate)/执行(execute)
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          // [style-loader](/loaders/style-loader)
+          { loader: 'style-loader' },
+          // [css-loader](/loaders/css-loader)
+          {
+            loader: 'css-loader',
+            options: {
+              modules: true,
+            },
+          },
+          // [sass-loader](/loaders/sass-loader)
+          { loader: 'sass-loader' },
+        ],
+      },
+    ],
+  },
+};
+内;
+```
+
+#### 内联方式
+
+在每个 import 语句中显式指定 loader
+
+#### CLI 方式
+
+在 shell 命令中指定它们: `webpack --module-bind pug-loader --module-bind 'css=style-loader!css-loader'`
+
+### loader 特性
+
+- 支持链式调用
+- 可以同步或者异步
+- loader 可以通过 `options` 进行对象配置
+- 可以直接通过`npm`模块导出 loader，也可以在 `modules.rules`中使用 loader 字段直接引用一个模块
+- plugin 可以为 loader 带来更多特性
+- loader 能够额外产生任意文件
+
+## 插件(plugin)
+
+插件可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。
+
+webpack 插件是一个具有 apply 方法的 JavaScript 对象。apply 方法会被 webpack compiler 调用，并且在 整个 编译生命周期都可以访问 compiler 对象。
+
+### 使用方法
+
+```js
+const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
+const webpack = require('webpack'); // 访问内置的插件
+
+module.exports = {
+  plugins: [
+    new webpack.ProgressPlugin(),
+    new HtmlWebpackPlugin({ template: './src/index.html' }),
+  ],
+};
+```
+
+## 模块
+
+在模块化编程中，开发者将程序分解为功能离散的 chunk，并称之为 模块。

webpack/2.API.md

@@ -0,0 +1,37 @@
+# Webpack API
+
+## CLI
+
+### build
+
+`build|bundle|b [entries...] [options]`
+默认命令，可省略
+
+### configtest
+
+`configtest|t [config-path]`
+校验 webpack 配置
+
+### info
+
+输出有关系统的信息
+
+### init
+
+初始化一个新的 webpack 配置
+
+### loader
+
+生成一个 loader 仓库
+
+### plugin
+
+生成一个 plugin 仓库
+
+### serve 
+`serve|s [options]`
+运行 webpack-dev-server
+
+### watch
+`watch|w [entries...] [options]`
+运行 webpack 并监听文件变化