Loader

Loader 可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。
loader的特性

    Loader 可以通过管道方式链式调用，每个 loader 可以把资源转换成任意格式并传递给下一个 loader ，但是最后一个 loader 必须返回 JavaScript。
    Loader 可以同步或异步执行。
    Loader 运行在 node.js 环境中，所以可以做任何可能的事情。
    Loader 可以接受参数，以此来传递配置项给 loader。
    Loader 可以通过文件扩展名（或正则表达式）绑定给不同类型的文件。
    Loader 可以通过 npm 发布和安装。
    除了通过 package.json 的 main 指定，通常的模块也可以导出一个 loader 来使用。
    Loader 可以访问配置。
    插件可以让 loader 拥有更多特性。
    Loader 可以分发出附加的任意文件。

安装loader

npm install css-loader babel-loader

配置文件

执行webpack可以在命令行中传入参数，大部分情况下是通过指定配置文件来执行的。

1. 默认情况下会搜索当前文件夹下的webpack.config.js
2. 还可以通过 --config 选项来指定配置文件

var path = require('path');
var APP_PATH = path.resolve(ROOT_PATH, 'src'); //__dirname 中的src目录，以此类推
var webpack = require('webpack');
module.exports = {
    entry: {
        app:path.join(__dirname, 'src'),
        vendors: ['react','redux']    
    }, 
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].js'    
    },    
    module: {
        loaders: [ //loader
            { //用于翻译ES6语法的babel
                test:/\.js?$/,
                exclude:/node_modules/,
                loader:'babel',
                query:{
                    presets:['react','es2015']
                }
            },
            { //用于加载css
                test: /\.css$/,
                exclude: /^node_modules$/,
                loader: ExtractTextPlugin.extract('style', ['css', 'autoprefixer']), 
                include: [APP_PATH]
            }
        ]
    }, 
    plugins: [ //插件
        // kills the compilation upon an error.
        // this keeps the outputed bundle **always** valid
        new webpack.NoErrorsPlugin(),
        //这个使用uglifyJs压缩你的js代码
        //new webpack.optimize.UglifyJsPlugin({minimize: true}),
        new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js')
    ]
};