深入学习如何配置自己的Webpack-dev-server

大部分项目中都会用的webpack，但是很多人并不知道如何配置属于自己的webpack-devsever，深入了解webpack自动化对我们优化项目，提升自己的水平有很大帮助，下面是我自己总结的一点关于webpack的基本配置，与大家分享。

第一部分-----首先看一下webpack中一些简单的配置

devtool:'cheap-source-map',//配置Source-map
devServer:{
    port:9002,//端口
    overlay:true,//是否在代码错误时使用遮罩
    hot:true,//热更新
    hotOnly:true//全局热更新
    proxy:{//接口代理
        "/":{//碰到"/"开始转发
            target:'https://mooc.study.163.com',//转发的主域名
            changeOrigin:true,//改变源
            pathRewrite：{//简写用api代替后面的内容
                "^/api":"/smartSpec/detal/1202816603.htm"
            }
        }
    }
},
plugins:[
    //在加入hot的时候，要在plugins中加入如下内容
    new webpack.HotModuleReplacementPlugin()
]

hot:true,
在使用：hotOnly：true的时候，js的热更新需要加入module.hot.accept()才能使其生效，不加的话无法热更新。

document.getElementById('mydiv).innerHTML = '123'
module.hot.accept()

proxy：原理是转发请求到node，载让node进行服务器请求，在开发环境可以使用，实际运行环境时，可以让后台设置响应头，cors或者ngex代理即可
2.Source-map
可以方便查看代码压缩/打包前所在的位置，源码的位置，在js，css要分别开启才能使用，共有7种模式

第二部分----自己搭建devsever
1。创建dev.js文件
2。需要安装的启动器和中间件

3。代码

const express = require('express');
const webpackDevMid = require('webpack-dev-middleware');
const webpackHotMid = require('webpack-hot-middleware');
const webpack = require('webpack');
const config= require('./webpack.config.js');
const app = express();
Object.keys(config.entry).forRach(function(){
    config.enrty[name] = ['webpack-hot-middleware/client?noInfo=true&reload=true'].concat(config.entry[name])
    //['webpack-hot-middleware/client?noInfo=true&reload=true','./app.js']
})
var compiler = webpack(config);

app.use(
    webpackHotMid(compiler,{
        overlayStyles:true,
    })
)
app.listen(2007);//端口号

这样一个简单的Webpack-dev-server就完成啦，希望对大家有用~