webpack基础搭建一

版本：v3，配置项参考中文文档，任意webpack相关配置项均可直接输入搜索

一个结合react的简单实例：点此处进入

package.json

npm init生成即可，详见node相关中的几篇小杂记。script内容如下：

package.json

---

webpack.config.js

上图script中，build值为"webpack"，会直接读取命名为webpack.config.js中的配置，若为其他命名则需对应到具体地址。

webpack最简单的配置

1.Entry（入口起点）

@单入口起点

用法：entry: string|Array（示例为单入口起点的对象语法，详见webpack中文文档入口起点）

@多入口起点

见webpack基础搭建二

备注：path的几个简单用法；变量__dirname可获取当前模块文件所在目录的完整绝对路径

2.Output（输出）

filename是用于输出文件的文件名，目标输出目录 path 的绝对路径。

上图的配置结合entry及output的用法，可解释为，将项目入口为app/main.js的内容输出到build下命名为index.js（会自动创建）的文件中

3.resolve（解析）

详见中文文档resolve，此处仅介绍extensions：值为array类型

注意：v3版本中，array中若第一个值展示空数组，需空格：[' ','.js','.jsx']

extensions用法

4. module（模块）

选项决定了如何处理项目中的不同类型的模块，中文文档

此处仅介绍rules：

值为array（一系列规则）

每个规则可以分为三部分 - 条件(condition)，结果(result)和嵌套规则(nested rule)。

条件

结果

5.loaders（加载器）

用于对模块的源代码进行转换，中文文档Loaders。简单介绍如下，V3版本用法如示例中的module。

loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！

Loader有三种使用方式

配置（推荐）：在 webpack.config.js 文件中指定 loader（示例使用的方法）。

内联：在每个 import 语句中显式指定 loader。

内联loader

CLI：在 shell 命令中指定它们。（此处不多介绍）

babel-loader

中文文档参考