（二）webpack常用插件的使用和配置

生产环境才需要的插件以及相关代码被注释

var webpack = require("webpack");

//UglifyJsPlugin、CommonsChunkPlugin生产环境才使用的插件，webpack内置
// var UglifyJsPlugin = new webpack.optimize.UglifyJsPlugin({warnings: false});//warnings:删除警告
// var CommonsChunkPlugin = new webpack.optimize.CommonsChunkPlugin({name: 'vendor'})//把boundle中的公共代码抽离出来，name:指定抽离出来的文件名

// var ExtractTextPlugin = require('extract-text-webpack-plugin');//把boundle中的 css 类容抽离出来成文件。

module.exports = {//暴露一个对象出去，webpack去读
        entry: __dirname + "/main.js", //唯一入口文件，__dirname是nodejs的一个全局变量，它指向当前执行脚本所在的目录（全路径，计算机绝对路径）
        /*entry: {
            main: __dirname + "/main.js",
            vendor: ['react','react-dom']//要抽离的公共代码
        },*/
        output: {
            path: __dirname + "/public",//指定打包输出的目录
            filename:'bundle.js'
            /*// 打包输出的文件名 ,name：webpack全局变量，代表入口文件的key，也就是说打包出来的文件为main.bundle.js和vendor.bundle.js
            filename:'[name].bundle.js'*/
        },
        //生成source-map供浏览器去读，映射源文件分离展示方便调试,用'#source-map'也可以
        devtool: "#cheap-module-eval-source-map",
        //配置loader来处理文件
        module: {
            rules: [{//一个loader的具体配置
                test: /\.scss$/,//匹配的文件类型
                use: [{//loader处理的顺序是该数组中从右到左的顺序
                    loader: 'style-loader'//将 JS 字符串生成为 style 节点
                },{
                    loader: 'css-loader'//将 CSS 转化成 CommonJS 模块
                },{
                    loader: 'sass-loader'//将sass编译成css
                }]
                // use:ExtractTextPlugin.extract([ 'css-loader', 'sass-loader' ])
            },{
                test: /\.(png|jpeg)$/,
                use: [{
                    loader: 'url-loader',
                    options: {//配置额外参数
                        limit: 1024, //限制转base64的图片为1k(1024b)，超过1k的以url返回,设置此项需要安装依赖：file-loader，会将图片传到public下
                        outputPath: 'img/' //指定输出路径：放到public下的img文件下，如果没有则会自动新建,并且路片路径自动变成img/***.***
                    }
                }]
            }]
        },
        //插件配置
        plugins:[
            // UglifyJsPlugin,
            // CommonsChunkPlugin,
            new webpack.DefinePlugin({
            	 'process.env':{//为wepack增加一个全局变量 NODE_ENV,它的值为'development'/'production',设置为production的话webpack在打包时会删除开发框架中的警告、注释等在生产环境下用不到的代码
                     NODE_ENV: JSON.stringify('development')
                  }
            }),
            // new ExtractTextPlugin('style.[contentHash:8].css')//利用浏览器缓存，每当文件改动时，哈希码就会变化，取哈希8位改变css文件名，让浏览器读取新文件
        ],
        //杂项
        resolve:{ //配置别名，路径别名，不能通过npm安装的库 指定别名，然后就可以直接require('别名')引用
           extensions:['.js','.json','.jsx'],//自动补全，这些文件就require可以不用使用后缀
           alias:{
           	  //swipe:'static/js/swiper.min.js'（举例而已，并没有用swiper）
           }
        },
        //配置服务器的
        devServer:{
           port:8090,
           contentBase:'./'
           //histroyApiFallback:true, // 开发的时候，返回单页面应用的那个唯一的和html文件
           //inline: false //默认就是true，是否开启文件改动保存自动刷新,要开启热替换这项不能设为false不然失效
       }/*配置好后命令行执行webpack-dev-server即可开启服务，前提要全局、本地都要安装webpack-dev-server，开启服务后，打包生成的文件会存到内存中，不会生成真正文件，
          在html页面中直接在当前目录下引用就可以，不需要加路径，会默认开启自动刷新。还可以执行webpack-dev-server --hot --inline，--hot表示开启热替换，--inline表示把与服务器通讯的js代码注入到entry文件，
          注意的是，如果bundle文件中的css已经被抽离出来了,热替换可能失效。还有一个可选配置--config  ./webpack.config.js 指定配置文件的位置，如果嫌这条命令太长懒得写可以设置npm启动快捷方式，在
          package.json中script项下设置，然后cnpm run '快捷名字' 启动*。*/
}