webpack热加载等一些常用配置

1、查看webpack打包文件以及对应信息
webpack --display-modules --display-reasons

2、webpack -p ：会对文件进行优化，压缩等

3、webpack -d :对应配置文件的devtool

4、webpack -w :就不需要每次一修改代码就去编译，修改了代码直接
刷新浏览器就行了

5、配置热加载：
    5.1 下载webpack-dev-server依赖
    npm install -g webpack-dev-server --save-dev
    5.2命令行执行命令,启动服务器8080端口
    webpack-dev-server --inline --hot

6、dev、test、prod环境区分：
    debug = process.env.NODE_ENV == 'production'
    //然后webpack中对应debug，就可以针对不同环境配置

    配置文件：
    var debug =  process.env.NODE_ENV == 'production' ? false : true

module.exports = {
    devtool:debug ? "sourcemap" : null,
    entry:"./js/entry.js",
    output:{
        filename:"bundle.js"
    },
    module:{
        loaders:[
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"  //如果后缀是css,就是用style,css的loader来处理
            },
            {   //配置使用es6语法写js
                test:/\.js$/,
                loader:"babel-loader",
                exclude:/node_modules/,   //忽略掉这个文件夹下的
                 options: {
                    presets: ['es2015','stage-0'],
                    plugins: ['transform-runtime']
                }
            },{
                //配置vue
                test:/\.vue$/,
                loader:'vue-loader'
            }
        ]
    },
    plugins:debug ? [] :[
        //插件
        new webpack.optimize.OccurrenceOrderPlugin(),
    ],
    resolve:{
        alias:{
            'vue$':'vue/dist/vue.js'
        }
    }
}


7、两个分析使用工具
    7.1生成项目所有配置分析文件并分析
    webpack --profile --json > stats.json
    打开webpack提供的分析网站，然后选中stats.json
    网址：http://webpack.github.io/analyse/

    7.2选择stats.json
    网站：http://chrisbateman.github.io/webpack-visualizer/