详解webpack与SPA实践之开发环境搭建(3)

文件处理配置

和webpack文件处理相关的几个配置属性主要有三个：目录上下文信息（context）, 处理文件入口信息（entry）, 文件输出信息（output）。

目录上下文信息（context）

设置解析处理文件入口的相对目录，值为一个绝对目录路径，默认为当前执行目录，通常即项目根目录，在Node中其值与process.cwd()相同，如：

context: path.resolve(__dirname, 'src/'),

如上即解析为项目根目录下的src目录。

处理文件入口信息（entry）

处理文件入口，值可以是字符串，或数组，或对象，值为字符串或数组时，即输出单文件，值为对象，可以输出多文件，输出文件名称等信息参考文件输出信息（output）。

文件输出信息（output）

此配置声明webpack编译输出文件的文件名等信息，如:

filename: '[name].js',

声明文件名就是模块(chunk)名，对应在entry中定义的入口，你可能还见过[id],[hash],[chunkhash]这些用法，现做简单介绍：

1. [id]：该值表示webpack编译模块（chunk）的id，通常是一个数字；
2. [name]：该值表示webpack编译模块（chunk）名，对应entry中定义的入口名或文件名；
3. [chunkhash]：该值表示webpack编译模块（chunk）hash值，根据模块内容计算出的一个md5值；
4. [hash]：该值表示webapck编译对象hash值，根据编译对象计算出的md5值；

编译对象，即webpack执行时读取配置后生成的一个编译配置对象，包含模块，待编译文件，相对于上次编译的变更文件等诸多信息，需要注意的是该对象在webpack启动读取配置文件后形成，在此次编译过程保持不变。

1. output.path：定义输出文件所在目录；
2. output.publicPath：定义输出文件在浏览器访问时的基础相对路径，可以与后文webpack-dev-server一起使用。

webpack加载器与模块

在介绍加载器配置之前，先看看加载器是什么：

Loaders are transformations that are applied on a resource file of your app. They are functions (running in node.js) that take the source of a resource file as the parameter and return the new source.

加载器是作用于应用资源文件的转换器，它们是一系列函数，接受资源文件的内容做参数，然后返回新的资源（以一个模块的形式返回）。

webpack

webpack解析文件时使用的加载器都声明在module属性的loaders数组中，可以设置一个或多个加载器。

module.noParse：指定某些文件不需要使用解析，支持传入文件路径或正则表达式；