webpack 2.0

1.全局安装node 
2.安装webpack 
3. 新建package.json  文件 可以使用 npm init命令（为了记录依赖的文件名，和配置一些使用命令等）
4. 新建一个webpack.config.js 配置文件 放在跟package.json 同级
5. 开始编写webpack.config.js 文件
    var webpack = require('webpack'), //获取webpack实例
    path = require('path'), //获取nopde path模块用来后面输入路劲使用
    HtmlWebpackPlugin = require('html-webpack-plugin'), //模板使用插件 就是打包的时候使用哪个html 模板
    OpenBrowserPlugin = require('open-browser-webpack-plugin'),  //打开浏览器插件
    os = require('os'),//获取 电脑IP 插件
    protNum = 8111;//端口号




    var localhost = ''
    //获取 ip 如果没有获取到IP就使用localhost
    try {
      var network = os.networkInterfaces()
      localhost = network[Object.keys(network)[0]][1].address
    } catch (e) {
      localhost = 'localhost';
    }






    module.exports = { //配置文件
      entry: './src/App.js',//代码入口文件 
      output: {
        path:path.resolve(__dirname,'bulid'), //代码打包路劲
        publicPath: 'http://'+localhost+':'+protNum+'/',//文件访问的地址
        filename:'build.[hash].js'//打包后的文件名
      },
      module:{//书写加载器 进行文件的转化
        rules:[
          {
            test:/\.less$/,//less编译配置     需要一下四个加载器 
            use:[//v1的loader 变成了use 不过这样写看的更清楚了
              'style-loader',
              'css-loader',
              {loader:'postcss-loader',
                options: {
                  plugins: function() {
                    return [require('autoprefixer')];
                  } 
                }
              },
              'less-loader'
            ]
          },
          {
            test:/\.js$/,//jsx 转化成js
            exclude:/node_modules/,
            loader:'babel-loader',
            query:{
              presets:['es2015','react','stage-0'],//这个是用的的加载器配置
              plugins: [["import", {"libraryName": "antd-mobile","style": true}]] //用于解析antd 这个可以不看
            }
          },
          {
            test:/\.(png|jpg|gif|svg)/,//图片配置
            use:[
              {
                loader:'url-loader',
                options: {
                  limit:'8000',
                  name: 'image/[name].[hash].[ext]'
                }
              }
            ]
          }
        ]
      },
      plugins:[//插件配置
        new HtmlWebpackPlugin({ //模板插件
          template: './index.html',//插件使用模板
          filename: 'index.html'//打包导出文件名
        }),
        new webpack.HotModuleReplacementPlugin(),//热跟新插件
        // 打开浏览器
        new OpenBrowserPlugin({
          url: 'http://'+localhost+':'+protNum
        }),
      ],
      resolve:{
       
        extensions: ['.less', '.web.js', '.js', '.json'],//使用require 或者 import导入文件时候可以不写配置
      },
      devServer:{//开发环境需要配置
        // contentBase:path.join(__dirname,'./'),
        inline: true, //线跟新
        host:localhost,//ip 
        hot: true,//是否使用热跟新
        port:protNum,//端口号
        proxy: {//代理服务
            "/wx": {
                target: 'http://'+localhost+':8080',
            }
        },
      },
      stats: { //显示颜色
        colors: true
      },
      devtool: 'source-map'
    }