前面使用webpack及其loader进行前端代码构建的方法，还不够简单：
- 每次构建都要指定入口文件（./jindex.js）与构建输出文件（bundle.js）。
- 使用loader需要以×××!的形式指定，意味着每个有require CSS资源的地方，都需要写成如下形式：
require('style-loader!css-loader!./index.css')
通过配置文件对webpack的构建行为进行配置，可以更加优雅。
webpack支持Node.js模块格式的配置文件，默认使用当前目录下的webpack.config.js，export一个配置信息对象即可：
var path = require('path');
module.exports = {
entry: path.join(_dirname, 'index'),
output: {
path: 'dist/',
filename: 'bundle.js',
publicPath: 'http://cdu.example.com/static/' //=> dist/对应的线上环境
},
module: {
loaders: [
{
test: /\.css$/,
loaders: ['style', 'css']
}
]
}
};
- entry 项目的入口文件
- output 构建的输出描述。是个对象，包括许多字段，比如：
- path 输出目录
- filename 输出文件名
- publicPath 输出目录所对应的外部路径
这么一来在JavaScript代码中require CSS模块时就不用每次写一遍style-loader!css-loader!了：
require('./index.css');
每次构建时也不需要手动指定入口文件和输出文件了，直接在项目目录下执行：
webpack
