配置文件webpack.config.js

前面使用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