webpack初步学习---如何搭建webpack配置文件

此文参考http://www.jianshu.com/p/42e11515c10f#这篇文章，里面的配置文件有的配置要求已经更改，希望看此文的人能少走弯路。

这是一个常见的webpack配置文件
module.exports = {
    devtool: 'eval-source-map',//配置生成Source Maps，选择合适的选项
    entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
    output: {
        path: __dirname + "/public",//打包后的文件存放的地方
        filename: "bundle.js"//打包后输出文件的文件名
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue'
        }
    },
    resolve: {
        extensions: ['.js', '.vue', '.json'],
    },
    module: {//在配置文件里添加JSON loader
        loaders: [
            {
                test: /\.json$/,
                loader: "json-loader"
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'      //在webpack的module部分的loaders里进行配置即可
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader?modules',
                //exclude: /node_modules/,
            },
            {
                test: /\.vue$/, // vue文件后缀
                loader: 'vue-loader'   //使用vue-loader处理
            },
        ]
    },
    devServer: {
        contentBase: "./public",//本地服务器所加载的页面所在的目录
        colors: true,//终端中输出结果为彩色
        historyApiFallback: true,//不跳转
        inline: true//实时刷新
    }
}