2.2.4 webpack 配置文件

上一级使用 webpack 及其 loader 对前端代码进行构建的方法还不够简单，缺点如下。

• 每次构建都需要指定项目的入口文件（./index.js）与输出文件（./bundle.js）
• 使用 loader 都需要 xxx! 的形式，意味着每个有 require CSS 资源的地方，都需要写 require('style!css!./index.css');

使用配置文件进行优化：webpack 支持 Node.js 模块格式的配置文件，默认回使用当前目录下的 webpack.config.js，配置文件只需要 export 的一个配置信息对象即可。

module.exports = {
    // configuration

    // 项目入口文件
    entry: ,
    // 构建的输出结果描述，本身是一个对象，包括多个字段，比较重要的如下
    output: {
        // 输出目录
        path:  ,
        // 输出文件名
        filename: ,
        // 输出目录所对应的外部路径（从浏览器中访问）
        publicPath:
    }
}

其中 publicPath 是一个很容易被忽略但是很重要的配置，它表示构建最终结果被访问时的路径

一个常见的前端构建上线的过程是：
配置构建输出目录 dist，构建完成后对 dist 目录进行打包，然后将其内容（结果文件往往会不止一个）发布到 CDN 上。比如 dist/bundle.js，假设它最终发布地址为 http://cdn.example.com/static/bundle.js，则这里的 publicPath 应当取输出目录（dist/）所对应的线上路径，即 http://cdn.example.com/static/。在我们的演示项目中，直接通过相对路径访问静态资源，不涉及打包上线 CDN 的过程，所以不做配置。
对于之前的例子，配置文件（webpack.config.js，__dirname内置变量，指当前工作目录）如下：

var path = require("path");
module.exports = {
  entry: path.join(__dirname, "index"),
  output: {
    filename: "bundle.js",
    path: __dirname
  },
  module: {
    loaders: [
        {test: /\.css$/, loaders: ["style-loader", "css-loader"]}
    ]
  }
};

module.loaders 是对于模块中的 loader 使用的配置，值为一个数组。数组的每一项指定一个规则，规则的 test 字段是正则表达式，若被依赖的模块的 ID 符合正则表达式，则对依赖模块依次使用规则中 loaders 字段所指定的 loader 进行转换。

在这里我们配置了对所有符合/.css$/，即后缀名为 .css 的资源使用 style-loader 与 css-loader，这样在 JavaScritp 代码中 require CSS 模块的时候就不用每次都写一遍 style!css! 了，只需要像依赖 JavaScript 模块写成

require('./index.css');

这样每次构建的时候也不需要手动指定入口文件和输出文件了，直接在项目的目录下执行：

webpack

webpack 会默认从 webpack.config.js 中获取配置信息，并执行构建过程。