webpack 入门指南
ＶＳＣｏｄｅ 是继 Ｓｕｂｌｉｍｅ Ｔｅｘｔ３、Ａｔｏｍ 后另一个让我爱不释手的编辑器，其颜值和插件生态圈与 Ａｔｏｍ 不相上下，但比后者用起来更加丝滑流畅（Ａｔｏｍ 需要４Ｇ＋内存和ＳＳＤ 才能逆天），所以自然成了我目前首选的编辑器。
前端项目自然少不了和 Ｓａｓｓ 打交道，ＶＳＣｏｄｅ 提供了丰富的相关插件来帮助我们处理 Ｓａｓｓ 相关任务。我用的是 Ｅａｓｙ Ｓａｓｓ 这款插件，目前最新版本是 ０．０．６。
由于 Ｓａｓｓ 的编译依赖 Ｒｕｂｙ 环境，因此我们在开始之前首先得安装 Ｒｕｂｙ，别担心，装 Ｒｕｂｙ 只是为了提供运行环境，不懂 Ｒｕｂｙ 没任何关系。官网下载传送门
安装 Ｒｕｂｙ 时一定要勾选 Ａｄｄ Ｒｕｂｙ ｅｘｅｃｕｔａｂｌｅｓ ｔｏ ｙｏｕｒ ＰＡＴＨ，用来将 Ｒｕｂｙ 添加到系统变量，这样后续可以省却很多不必要的麻烦。装好后在命令行输入 ｇｅｍ ｓａｓｓ 来安装 Ｓａｓｓ，安装完成后启动 ＶＳＣｏｄｅ，在拓展商店里搜索“ｅａｓｙ ｓａｓｓ”，并安装，安装成功后重启 ＶＳＣｏｄｅ。
接下来进行配置。在 ＶＳＣｏｄｅ 菜单栏依次点击“文件 首选项 设置”，打开 ｓｅｔｔｉｎｇｓ．ｊｓｏｎ 全局配置文件。搜索“ｅａｓｙｓａｓｓ”，然后把 ｅａｓｙｓａｓｓ 相关的设置项复制到右侧的用户设置编辑窗口中，再根据实际情况修改配置项。
注意这里的配置项是全局的，不是只针对当前 ＶＳＣｏｄｅ 中打开的项目。换句话说，如果你在 ＶＳＣｏｄｅ 中切换了项目，应按实际情况再次调整 ｅａｓｙｓａｓｓ 的配置项。
所有的默认配置项如下：
＂ｅａｓｙｓａｓｓ．ｃｏｍｐｉｌｅＡｆｔｅｒＳａｖｅ＂： ｔｒｕｅ，＂ｅａｓｙｓａｓｓ．ｅｘｃｌｕｄｅＲｅｇｅｘ＂： ＂＂，＂ｅａｓｙｓａｓｓ．ｆｏｒｍａｔｓ＂： ［
｛
＂ｆｏｒｍａｔ＂： ＂ｅｘｐａｎｄｅｄ＂，
＂ｅｘｔｅｎｓｉｏｎ＂： ＂．ｃｓｓ＂
｝，
｛
＂ｆｏｒｍａｔ＂： ＂ｃｏｍｐｒｅｓｓｅｄ＂，
＂ｅｘｔｅｎｓｉｏｎ＂： ＂．ｍｉｎ．ｃｓｓ＂
｝］，＂ｅａｓｙｓａｓｓ．ｔａｒｇｅｔＤｉｒ＂： ＂＂
ｅａｓｙｓａｓｓ．ｃｏｍｐｉｌｅＡｆｔｅｒＳａｖｅ 保存 ｓｃｓｓ 或 ｓａｓｓ 文件后自动进行编译。默认为 ｔｒｕｅ。一般设为 ｔｒｕｅ，可提高工作效率，如果项目中有不直接编译的文件，例如 ｖａｒｉａｂｌｅ．ｓｃｓｓ、ｔｈｅｍｅ．ｓｃｓｓ、ｍｉｘｉｎ．ｓｃｓｓ 等，建议设为 ｆａｌｓｅ，避免这类文件编辑保存后被编译为无效 ｃｓｓ 需要手动删除的尴尬。
ｅａｓｙｓａｓｓ．ｅｘｃｌｕｄｅＲｅｇｅｘ 提供一个文件名的正则表达式，匹配的文件会被排除，不会被编译成 ｃｓｓ。默认为空，即该功能关闭。个人建议将一些不直接编译的文件以下划线开头命名，例如：ｍｉｘｉｎ．ｓｃｓｓ，然后设置：｀＂ｅａｓｙｓａｓｓ．ｅｘｃｌｕｄｅＲｅｇｅｘ＂： ＂＾＋＂｀，即可排除所有以下划线开头的 ｓｃｓｓ／ｓａｓｓ 文件。
ｅａｓｙｓａｓｓ．ｆｏｒｍａｔｓ 定义输出 ｃｓｓ 文件的排版风格和文件名，是一个数组，可以同时编译输出多个不同风格、文件名的 ｃｓｓ 文件。每个数组对象中有两个参数：
ｅａｓｙｓａｓｓ．ｆｏｒｍａｔｓ［ｉ］．ｆｏｒｍａｔ 用以编译生成对应风格的 ｃｓｓ，参数值如下：
ｎｅｓｔｅｄ：嵌套缩进的 ｃｓｓ 代码。
ｅｘｐａｎｄｅｄ：没有缩进的、扩展的ｃｓｓ代码。
ｃｏｍｐａｃｔ：简洁格式的 ｃｓｓ 代码。
ｃｏｍｐｒｅｓｓｅｄ：压缩后的 ｃｓｓ 代码。
ｅａｓｙｓａｓｓ．ｆｏｒｍａｔｓ［ｉ］．ｅｘｔｅｎｓｉｏｎ 顾名思义就是设置编译输出的文件拓展名了，此处可以自定义文件名，输出的 ｃｓｓ 文件名会按照“当前 Ｓａｓｓ 文件名（不含拓展名）＋此处自定义文件名”的格式来生成。
例如：设置 ＂ｅａｓｙｓａｓｓ．ｆｏｒｍａｔｓ［ｉ］．ｅｘｔｅｎｓｉｏｎ＂： ＂．ｍｉｎ．ｃｓｓ＂，假设当前的 Ｓａｓｓ 文件名为
ｓｔｙｌｅ．ｓｃｓｓ，则编译输出的 ｃｓｓ 文件名为 ｓｔｙｌｅ．ｍｉｎ．ｃｓｓ。
ｅａｓｙｓａｓｓ．ｔａｒｇｅｔＤｉｒ 我们在生产环境中很多情况下 ｓｃｓｓ／ｓａｓｓ 文件和 ｃｓｓ 文件是不在同一个目录下的，而 Ｅａｓｙ Ｓａｓｓ 默认输出的 ｃｓｓ 是和当前 Ｓａｓｓ 文件处于相同目录的，为此我们需要通过该参数来配置输出路径。
参数值可以是绝对路径或相对路径。如果是相对路径，则以 ＶＳＣｏｄｅ 当前打开的项目的根目录为基准。
例如：设置 ｅａｓｙｓａｓｓ．ｔａｒｇｅｔＤｉｒ 为 ＂．／ｃｓｓ／＂，此时保存修改完毕的 Ｓａｓｓ 文件，ＶＳＣｏｄｅ 会自动编译并在当前 Ｓａｓｓ 文件的上级文件夹 ｃｓｓ 目录下输出生成 ｃｓｓ 文件（见下图）。
例如下图的文件结构，项目根目录是 ＴＥＳＴ 文件夹，ｓｃｓｓ 文件存放于 ｓａｓｓ 文件夹，编译输出目录是 ｃｓｓ 文件，则配置为：＂ｅａｓｙｓａｓｓ．ｔａｒｇｅｔＤｉｒ＂： ＂ｃｓｓ／＂（＂ｃｓｓ＂ 后面的斜线也可省略）。
本文所述的只是采用 ＶＳＣｏｄｅ 编辑器编译生成 ＣＳＳ 的一种方式，可能比较原始，实际生产环境中大多采用自动化构建方案，比如 ｇｒｕｎｔ、ｇｕｌｐ、ｆｉｓ 等。
nbsp;webpack --watch //监听变动并自动打包
ＶＳＣｏｄｅ 是继 Ｓｕｂｌｉｍｅ Ｔｅｘｔ３、Ａｔｏｍ 后另一个让我爱不释手的编辑器，其颜值和插件生态圈与 Ａｔｏｍ 不相上下，但比后者用起来更加丝滑流畅（Ａｔｏｍ 需要４Ｇ＋内存和ＳＳＤ 才能逆天），所以自然成了我目前首选的编辑器。
前端项目自然少不了和 Ｓａｓｓ 打交道，ＶＳＣｏｄｅ 提供了丰富的相关插件来帮助我们处理 Ｓａｓｓ 相关任务。我用的是 Ｅａｓｙ Ｓａｓｓ 这款插件，目前最新版本是 ０．０．６。
由于 Ｓａｓｓ 的编译依赖 Ｒｕｂｙ 环境，因此我们在开始之前首先得安装 Ｒｕｂｙ，别担心，装 Ｒｕｂｙ 只是为了提供运行环境，不懂 Ｒｕｂｙ 没任何关系。官网下载传送门
安装 Ｒｕｂｙ 时一定要勾选 Ａｄｄ Ｒｕｂｙ ｅｘｅｃｕｔａｂｌｅｓ ｔｏ ｙｏｕｒ ＰＡＴＨ，用来将 Ｒｕｂｙ 添加到系统变量，这样后续可以省却很多不必要的麻烦。装好后在命令行输入 ｇｅｍ ｓａｓｓ 来安装 Ｓａｓｓ，安装完成后启动 ＶＳＣｏｄｅ，在拓展商店里搜索“ｅａｓｙ ｓａｓｓ”，并安装，安装成功后重启 ＶＳＣｏｄｅ。
接下来进行配置。在 ＶＳＣｏｄｅ 菜单栏依次点击“文件 首选项 设置”，打开 ｓｅｔｔｉｎｇｓ．ｊｓｏｎ 全局配置文件。搜索“ｅａｓｙｓａｓｓ”，然后把 ｅａｓｙｓａｓｓ 相关的设置项复制到右侧的用户设置编辑窗口中，再根据实际情况修改配置项。
注意这里的配置项是全局的，不是只针对当前 ＶＳＣｏｄｅ 中打开的项目。换句话说，如果你在 ＶＳＣｏｄｅ 中切换了项目，应按实际情况再次调整 ｅａｓｙｓａｓｓ 的配置项。
所有的默认配置项如下：
＂ｅａｓｙｓａｓｓ．ｃｏｍｐｉｌｅＡｆｔｅｒＳａｖｅ＂： ｔｒｕｅ，＂ｅａｓｙｓａｓｓ．ｅｘｃｌｕｄｅＲｅｇｅｘ＂： ＂＂，＂ｅａｓｙｓａｓｓ．ｆｏｒｍａｔｓ＂： ［
｛
＂ｆｏｒｍａｔ＂： ＂ｅｘｐａｎｄｅｄ＂，
＂ｅｘｔｅｎｓｉｏｎ＂： ＂．ｃｓｓ＂
｝，
｛
＂ｆｏｒｍａｔ＂： ＂ｃｏｍｐｒｅｓｓｅｄ＂，
＂ｅｘｔｅｎｓｉｏｎ＂： ＂．ｍｉｎ．ｃｓｓ＂
｝］，＂ｅａｓｙｓａｓｓ．ｔａｒｇｅｔＤｉｒ＂： ＂＂
ｅａｓｙｓａｓｓ．ｃｏｍｐｉｌｅＡｆｔｅｒＳａｖｅ 保存 ｓｃｓｓ 或 ｓａｓｓ 文件后自动进行编译。默认为 ｔｒｕｅ。一般设为 ｔｒｕｅ，可提高工作效率，如果项目中有不直接编译的文件，例如 ｖａｒｉａｂｌｅ．ｓｃｓｓ、ｔｈｅｍｅ．ｓｃｓｓ、ｍｉｘｉｎ．ｓｃｓｓ 等，建议设为 ｆａｌｓｅ，避免这类文件编辑保存后被编译为无效 ｃｓｓ 需要手动删除的尴尬。
ｅａｓｙｓａｓｓ．ｅｘｃｌｕｄｅＲｅｇｅｘ 提供一个文件名的正则表达式，匹配的文件会被排除，不会被编译成 ｃｓｓ。默认为空，即该功能关闭。个人建议将一些不直接编译的文件以下划线开头命名，例如：ｍｉｘｉｎ．ｓｃｓｓ，然后设置：｀＂ｅａｓｙｓａｓｓ．ｅｘｃｌｕｄｅＲｅｇｅｘ＂： ＂＾＋＂｀，即可排除所有以下划线开头的 ｓｃｓｓ／ｓａｓｓ 文件。
ｅａｓｙｓａｓｓ．ｆｏｒｍａｔｓ 定义输出 ｃｓｓ 文件的排版风格和文件名，是一个数组，可以同时编译输出多个不同风格、文件名的 ｃｓｓ 文件。每个数组对象中有两个参数：
ｅａｓｙｓａｓｓ．ｆｏｒｍａｔｓ［ｉ］．ｆｏｒｍａｔ 用以编译生成对应风格的 ｃｓｓ，参数值如下：
ｎｅｓｔｅｄ：嵌套缩进的 ｃｓｓ 代码。
ｅｘｐａｎｄｅｄ：没有缩进的、扩展的ｃｓｓ代码。
ｃｏｍｐａｃｔ：简洁格式的 ｃｓｓ 代码。
ｃｏｍｐｒｅｓｓｅｄ：压缩后的 ｃｓｓ 代码。
ｅａｓｙｓａｓｓ．ｆｏｒｍａｔｓ［ｉ］．ｅｘｔｅｎｓｉｏｎ 顾名思义就是设置编译输出的文件拓展名了，此处可以自定义文件名，输出的 ｃｓｓ 文件名会按照“当前 Ｓａｓｓ 文件名（不含拓展名）＋此处自定义文件名”的格式来生成。
例如：设置 ＂ｅａｓｙｓａｓｓ．ｆｏｒｍａｔｓ［ｉ］．ｅｘｔｅｎｓｉｏｎ＂： ＂．ｍｉｎ．ｃｓｓ＂，假设当前的 Ｓａｓｓ 文件名为
ｓｔｙｌｅ．ｓｃｓｓ，则编译输出的 ｃｓｓ 文件名为 ｓｔｙｌｅ．ｍｉｎ．ｃｓｓ。
ｅａｓｙｓａｓｓ．ｔａｒｇｅｔＤｉｒ 我们在生产环境中很多情况下 ｓｃｓｓ／ｓａｓｓ 文件和 ｃｓｓ 文件是不在同一个目录下的，而 Ｅａｓｙ Ｓａｓｓ 默认输出的 ｃｓｓ 是和当前 Ｓａｓｓ 文件处于相同目录的，为此我们需要通过该参数来配置输出路径。
参数值可以是绝对路径或相对路径。如果是相对路径，则以 ＶＳＣｏｄｅ 当前打开的项目的根目录为基准。
例如：设置 ｅａｓｙｓａｓｓ．ｔａｒｇｅｔＤｉｒ 为 ＂．／ｃｓｓ／＂，此时保存修改完毕的 Ｓａｓｓ 文件，ＶＳＣｏｄｅ 会自动编译并在当前 Ｓａｓｓ 文件的上级文件夹 ｃｓｓ 目录下输出生成 ｃｓｓ 文件（见下图）。
例如下图的文件结构，项目根目录是 ＴＥＳＴ 文件夹，ｓｃｓｓ 文件存放于 ｓａｓｓ 文件夹，编译输出目录是 ｃｓｓ 文件，则配置为：＂ｅａｓｙｓａｓｓ．ｔａｒｇｅｔＤｉｒ＂： ＂ｃｓｓ／＂（＂ｃｓｓ＂ 后面的斜线也可省略）。
本文所述的只是采用 ＶＳＣｏｄｅ 编辑器编译生成 ＣＳＳ 的一种方式，可能比较原始，实际生产环境中大多采用自动化构建方案，比如 ｇｒｕｎｔ、ｇｕｌｐ、ｆｉｓ 等。
nbsp;webpack -p //压缩混淆脚本，这个非常非常重要！
ＶＳＣｏｄｅ 是继 Ｓｕｂｌｉｍｅ Ｔｅｘｔ３、Ａｔｏｍ 后另一个让我爱不释手的编辑器，其颜值和插件生态圈与 Ａｔｏｍ 不相上下，但比后者用起来更加丝滑流畅（Ａｔｏｍ 需要４Ｇ＋内存和ＳＳＤ 才能逆天），所以自然成了我目前首选的编辑器。
前端项目自然少不了和 Ｓａｓｓ 打交道，ＶＳＣｏｄｅ 提供了丰富的相关插件来帮助我们处理 Ｓａｓｓ 相关任务。我用的是 Ｅａｓｙ Ｓａｓｓ 这款插件，目前最新版本是 ０．０．６。
由于 Ｓａｓｓ 的编译依赖 Ｒｕｂｙ 环境，因此我们在开始之前首先得安装 Ｒｕｂｙ，别担心，装 Ｒｕｂｙ 只是为了提供运行环境，不懂 Ｒｕｂｙ 没任何关系。官网下载传送门
安装 Ｒｕｂｙ 时一定要勾选 Ａｄｄ Ｒｕｂｙ ｅｘｅｃｕｔａｂｌｅｓ ｔｏ ｙｏｕｒ ＰＡＴＨ，用来将 Ｒｕｂｙ 添加到系统变量，这样后续可以省却很多不必要的麻烦。装好后在命令行输入 ｇｅｍ ｓａｓｓ 来安装 Ｓａｓｓ，安装完成后启动 ＶＳＣｏｄｅ，在拓展商店里搜索“ｅａｓｙ ｓａｓｓ”，并安装，安装成功后重启 ＶＳＣｏｄｅ。
接下来进行配置。在 ＶＳＣｏｄｅ 菜单栏依次点击“文件 首选项 设置”，打开 ｓｅｔｔｉｎｇｓ．ｊｓｏｎ 全局配置文件。搜索“ｅａｓｙｓａｓｓ”，然后把 ｅａｓｙｓａｓｓ 相关的设置项复制到右侧的用户设置编辑窗口中，再根据实际情况修改配置项。
注意这里的配置项是全局的，不是只针对当前 ＶＳＣｏｄｅ 中打开的项目。换句话说，如果你在 ＶＳＣｏｄｅ 中切换了项目，应按实际情况再次调整 ｅａｓｙｓａｓｓ 的配置项。
所有的默认配置项如下：
＂ｅａｓｙｓａｓｓ．ｃｏｍｐｉｌｅＡｆｔｅｒＳａｖｅ＂： ｔｒｕｅ，＂ｅａｓｙｓａｓｓ．ｅｘｃｌｕｄｅＲｅｇｅｘ＂： ＂＂，＂ｅａｓｙｓａｓｓ．ｆｏｒｍａｔｓ＂： ［
｛
＂ｆｏｒｍａｔ＂： ＂ｅｘｐａｎｄｅｄ＂，
＂ｅｘｔｅｎｓｉｏｎ＂： ＂．ｃｓｓ＂
｝，
｛
＂ｆｏｒｍａｔ＂： ＂ｃｏｍｐｒｅｓｓｅｄ＂，
＂ｅｘｔｅｎｓｉｏｎ＂： ＂．ｍｉｎ．ｃｓｓ＂
｝］，＂ｅａｓｙｓａｓｓ．ｔａｒｇｅｔＤｉｒ＂： ＂＂
ｅａｓｙｓａｓｓ．ｃｏｍｐｉｌｅＡｆｔｅｒＳａｖｅ 保存 ｓｃｓｓ 或 ｓａｓｓ 文件后自动进行编译。默认为 ｔｒｕｅ。一般设为 ｔｒｕｅ，可提高工作效率，如果项目中有不直接编译的文件，例如 ｖａｒｉａｂｌｅ．ｓｃｓｓ、ｔｈｅｍｅ．ｓｃｓｓ、ｍｉｘｉｎ．ｓｃｓｓ 等，建议设为 ｆａｌｓｅ，避免这类文件编辑保存后被编译为无效 ｃｓｓ 需要手动删除的尴尬。
ｅａｓｙｓａｓｓ．ｅｘｃｌｕｄｅＲｅｇｅｘ 提供一个文件名的正则表达式，匹配的文件会被排除，不会被编译成 ｃｓｓ。默认为空，即该功能关闭。个人建议将一些不直接编译的文件以下划线开头命名，例如：ｍｉｘｉｎ．ｓｃｓｓ，然后设置：｀＂ｅａｓｙｓａｓｓ．ｅｘｃｌｕｄｅＲｅｇｅｘ＂： ＂＾＋＂｀，即可排除所有以下划线开头的 ｓｃｓｓ／ｓａｓｓ 文件。
ｅａｓｙｓａｓｓ．ｆｏｒｍａｔｓ 定义输出 ｃｓｓ 文件的排版风格和文件名，是一个数组，可以同时编译输出多个不同风格、文件名的 ｃｓｓ 文件。每个数组对象中有两个参数：
ｅａｓｙｓａｓｓ．ｆｏｒｍａｔｓ［ｉ］．ｆｏｒｍａｔ 用以编译生成对应风格的 ｃｓｓ，参数值如下：
ｎｅｓｔｅｄ：嵌套缩进的 ｃｓｓ 代码。
ｅｘｐａｎｄｅｄ：没有缩进的、扩展的ｃｓｓ代码。
ｃｏｍｐａｃｔ：简洁格式的 ｃｓｓ 代码。
ｃｏｍｐｒｅｓｓｅｄ：压缩后的 ｃｓｓ 代码。
ｅａｓｙｓａｓｓ．ｆｏｒｍａｔｓ［ｉ］．ｅｘｔｅｎｓｉｏｎ 顾名思义就是设置编译输出的文件拓展名了，此处可以自定义文件名，输出的 ｃｓｓ 文件名会按照“当前 Ｓａｓｓ 文件名（不含拓展名）＋此处自定义文件名”的格式来生成。
例如：设置 ＂ｅａｓｙｓａｓｓ．ｆｏｒｍａｔｓ［ｉ］．ｅｘｔｅｎｓｉｏｎ＂： ＂．ｍｉｎ．ｃｓｓ＂，假设当前的 Ｓａｓｓ 文件名为
ｓｔｙｌｅ．ｓｃｓｓ，则编译输出的 ｃｓｓ 文件名为 ｓｔｙｌｅ．ｍｉｎ．ｃｓｓ。
ｅａｓｙｓａｓｓ．ｔａｒｇｅｔＤｉｒ 我们在生产环境中很多情况下 ｓｃｓｓ／ｓａｓｓ 文件和 ｃｓｓ 文件是不在同一个目录下的，而 Ｅａｓｙ Ｓａｓｓ 默认输出的 ｃｓｓ 是和当前 Ｓａｓｓ 文件处于相同目录的，为此我们需要通过该参数来配置输出路径。
参数值可以是绝对路径或相对路径。如果是相对路径，则以 ＶＳＣｏｄｅ 当前打开的项目的根目录为基准。
例如：设置 ｅａｓｙｓａｓｓ．ｔａｒｇｅｔＤｉｒ 为 ＂．／ｃｓｓ／＂，此时保存修改完毕的 Ｓａｓｓ 文件，ＶＳＣｏｄｅ 会自动编译并在当前 Ｓａｓｓ 文件的上级文件夹 ｃｓｓ 目录下输出生成 ｃｓｓ 文件（见下图）。
例如下图的文件结构，项目根目录是 ＴＥＳＴ 文件夹，ｓｃｓｓ 文件存放于 ｓａｓｓ 文件夹，编译输出目录是 ｃｓｓ 文件，则配置为：＂ｅａｓｙｓａｓｓ．ｔａｒｇｅｔＤｉｒ＂： ＂ｃｓｓ／＂（＂ｃｓｓ＂ 后面的斜线也可省略）。
本文所述的只是采用 ＶＳＣｏｄｅ 编辑器编译生成 ＣＳＳ 的一种方式，可能比较原始，实际生产环境中大多采用自动化构建方案，比如 ｇｒｕｎｔ、ｇｕｌｐ、ｆｉｓ 等。
nbsp;webpack -d //生成map映射文件，告知哪些模块被最终打包到哪里了
其中的 -p 是很重要的参数，曾经一个未压缩的 700kb 的文件，压缩后直接降到 180kb（主要是样式这块一句就独占一行脚本，导致未压缩脚本变得很大）。
模块引入
上面唠嗑了那么多配置和执行方法，下面开始说说寻常页面和脚本怎么使用呗。
一. HTML
直接在页面引入 webpack 最终生成的页面脚本即可，不用再写什么 data-main 或 seajs.use 了：
<!DOCTYPE html><html><head lang="en">
<meta charset="UTF-8">
<title>demo</title></head><body>
<script src="dist/js/page/common.js"></script>
<script src="dist/js/page/index.js"></script></body></html>
可以看到我们连样式都不用引入，毕竟脚本执行时会动态生成<style>并标签打到head里。
二. JS
各脚本模块可以直接使用 commonJS 来书写，并可以直接引入未经编译的模块，比如 JSX、sass、coffee等（只要你在 webpack.config.js 里配置好了对应的加载器）。
我们再看看编译前的页面入口文件（index.js）：
require('../../css/reset.scss'); //加载初始化样式require('../../css/allComponent.scss'); //加载组件样式var React = require('react');var AppWrap = require('../component/AppWrap'); //加载组件var createRedux = require('redux').createRedux;var Provider = require('redux/react').Provider;var stores = require('AppStore');var redux = createRedux(stores);var App = React.createClass({
render: function() { return ( <Provider redux={redux}>
{function() { return <AppWrap />; }}
</Provider> );
}
});
React.render( <App />, document.body
);
一切就是这么简单么么哒~ 后续各种有的没的，webpack 都会帮你进行处理。
其他
至此我们已经基本上手了 webpack 的使用，下面是补充一些有用的技巧。
一. shimming
在 AMD/CMD 中，我们需要对不符合规范的模块（比如一些直接返回全局变量的插件）进行 shim 处理，这时候我们需要使用 exports-loader 来帮忙：
{ test: require.resolve("./src/js/tool/swipe.js"), loader: "exports?swipe"}之后在脚本中需要引用该模块的时候，这么简单地来使用就可以了：
require('./tool/swipe.js');
swipe();
二. 自定义公共模块提取
在文章开始我们使用了 CommonsChunkPlugin 插件来提取多个页面之间的公共模块，并将该模块打包为 common.js 。
但有时候我们希望能更加个性化一些，我们可以这样配置：
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
entry: {
p1: "./page1",
p2: "./page2",
p3: "./page3",
ap1: "./admin/page1",
ap2: "./admin/page2"
},
output: {
filename: "[name].js"
},
plugins: [ new CommonsChunkPlugin("admin-commons.js", ["ap1", "ap2"]), new CommonsChunkPlugin("commons.js", ["p1", "p2", "admin-commons.js"])
]
};// <script>s required:// page1.html: commons.js, p1.js// page2.html: commons.js, p2.js// page3.html: p3.js// admin-page1.html: commons.js, admin-commons.js, ap1.js// admin-page2.html: commons.js, admin-commons.js, ap2.js
三. 独立打包样式文件
有时候可能希望项目的样式能不要被打包到脚本中，而是独立出来作为.css，然后在页面中以<link>标签引入。这时候我们需要 extract-text-webpack-plugin 来帮忙：
var webpack = require('webpack'); var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js'); var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
plugins: [commonsPlugin, new ExtractTextPlugin("[name].css")],
entry: { //...省略其它配置
最终 webpack 执行后会乖乖地把样式文件提取出来：
四. 使用CDN/远程文件
有时候我们希望某些模块走CDN并以<script>的形式挂载到页面上来加载，但又希望能在 webpack 的模块中使用上。
这时候我们可以在配置文件里使用 externals 属性来帮忙：
{
externals: { // require("jquery") 是引用自外部模块的
// 对应全局变量 jQuery
"jquery": "jQuery"
}
}
需要留意的是，得确保 CDN 文件必须在 webpack 打包文件引入之前先引入。
我们倒也可以使用 script.js 在脚本中来加载我们的模块：
var $script = require("scriptjs");
$script("//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js", function() {
$('body').html('It works!')
});
五. 与 grunt/gulp 配合
以 gulp 为示例，我们可以这样混搭：
gulp.task("webpack", function(callback) { // run webpack webpack({ // configuration
}, function(err, stats) { if(err) throw new gutil.PluginError("webpack", err);
gutil.log("[webpack]", stats.toString({ // output options }));
callback();
});
});
当然我们只需要把配置写到 webpack({ ... }) 中去即可，无须再写 webpack.config.js 了。
更多参照信息请参阅：grunt配置 / gulp配置 。
六. React 相关
⑴ 推荐使用 npm install react 的形式来安装并引用 React 模块，而不是直接使用编译后的 react.js，这样最终编译出来的 React 部分的脚本会减少 10-20 kb左右的大小。
⑵ react-hot-loader 是一款非常好用的 React 热插拔的加载插件，通过它可以实现修改-运行同步的效果，配合 webpack-dev-server 使用更佳！
基于 webpack 的入门指引就到这里，希望本文能对你有所帮助，你也可以参考下述的文章来入门：
webpack入门指谜
webpack-howto
共勉~
,220)/}
入门,指南,