webpack 区分开发环境生产环境

一、不同点：

1. 开发环境

模块热更新
sourceMap
接口代理
代码规范检查

2. 生产环境

提取公共代码
压缩混淆
文件压缩 或是base64编码
去除无用的代码

二、共同点：

 同样的入口
 同样的代码处理（loader处理）
 同样的解析配置（开发和打包的一致性）

三、如何做？

 webpack-merge工具进行拼接，公共配置供开发和生产环境两者同时使用，另外，他们各自还有各自的配置。
 webpack.dev.conf.js        开发环境
 webpack.prod.conf.js       生产环境
 webapck.common.conf.js 两者兼具


使用middleware搭建开发环境
不同之处：使用比较灵活，在node上边搭建

第三方的lodet服务
Express or Loa: 
webpack-dev-middleware
webpack-hot-middleware：用来帮助我们做模块热更新
http-proxy-middleware:帮助我们做代理的
connect-history-api-fallback:当请求满足以下条件的时候，该库会把请求地址转到默认
opn：命令行中自动打开浏览器，开发到服务器的根目录的环境，我们可以直接访问需要调试的页面 。基于之前的配置，我们开一搭建这样一个开发环境。

使用：

一、安装依赖

npm install express opn webapck-dev-middleware webapck-hot-middleware http-prozy-middleware connect-history-api-fallback --save-dev

二、编些代码

进入项目根目录文件下，先建一个build文件夹，文件夹下建一个serve.js

server.js

const express = require('express')
const webpack = require('webapck')
const opn = require('opn')

const app = express()
const port = 300

const webpackDevMiddleleware = require('webpack-dev-middleware')
const webpackHotMiddleware = require('webpack-hot-middleware')
const proxyMiddleware = require('http-proxy-middleware'
const historyApiFallback = require('connect-history-api-fallback')

const config = require('./webapck.common.conf ')('development')
const complier = webpack(config)

app.use(webapackDevMiddleware(compiler,{
publicPath:config.output.publicPath
}))

app.use(webpackHotMiddleware(compiler))

app.listen(port,function(){
console.log('success listen to' + port)
opn('http://localhost:' + port)
})