上一级使用 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');这样每次构建的时候也不需要手动指定入口文件和输出文件了，直接在项目的目录下执行：
webpackwebpack 会默认从 webpack.config.js 中获取配置信息，并执行构建过程。
