webpack第二篇.webpack-dev-server

webpack第⼆篇.webpack-dev-server
前⾯我们每次运⾏总是双击打开dist下的index.html⽂件，然⽽在我们做项⽬的时候这样是不⾏的，我们需要启动⼀个本地服务。

这⾥我们使⽤webpack提供的webpack-dev-server。

安装 npm install wekpack-dev-server -D
wekpack-dev-server内部通过express实现, 运⾏时并不真正的⽣成打包⽂件，只是⽣成内存中的打包。

下⾯是webpack-dev-server的⼀些配置
　const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
devServer: { //开发服务器的配置
host: 0.0.0.0, //主机号
port: 3000, //端⼝号
hot: true, //启动热替换
hotOnly: true, //编译失败时不刷新页⾯，只适⽤于cli
progress: true, //进度条
contentBase: './dist', //静态服务根路径
compress: true, //对静态资源使⽤gzip压缩
headers: { //向所有请求添加header
'token': '3M46VI52N35MPZN409'
},
historyApiFallBack: { //⽤来应对返回404页⾯时定向到特定页⾯⽤的
rewrites: [{
form: /./, to: '/404.html'
　}]
},
proxy: { //代理
"/api": "http://localhost:8080", //例如：对/api/users的请求将会通过代理请求到http://localhost:8080/api/users
"/m": {
target: "http://localhost:9090", //如果不想将/m传递过去，需要重写path
pathRewrite: {"^/m" : ""}
},
"/info": {
target: "http://localhost:5555",
bypass: function(req, res, proxyOptions) { //对于浏览器的请求，只希望提供html⽹页的访问，⽽对于api请求，则将请求代理到指定服务。

if (req.headers.accept.indexOf("html") !== -1) {
console.log("Skipping proxy for browser request.");
return "/index.html";
}
}
}
},
https: { //⽀持HTTPS 开发环境应该很少⽤到吧
},
overlay: true, //编译出错的信息会展⽰在浏览器上
stats: "errors-only", //控制编译的时候shell上的输出内容 errors-only-产⽣error⽇志 minimal-只打印errors或⽂件第⼀次被编译时 none-禁⽌打印⽇志 normal-标准打印⽇志 verbose-打印所有⽇志 quiet: true, //当它被设置为true的时候，控制台只输出第⼀次编译的信息，当你保存后再次编译的时候不会输出任何内容，包括错误和警告默认false
lazy: true, //只有在请求时才进⾏编译，webpack不会监控⽂件的变化。

当在lazy模式下，watchOptions将不会被启⽤。

如果在CLI下使⽤，需要确保inline mode被禁⽤
},
　plugins: [
new HtmlWebpackPlugin({
template: './index.html'
})
// 热更新插件
new webpack.HotModuleReplacementPlugin() //结合devServer的hot:true启动HMR
]
配置 npm script :
"scripts": {
"dev": "webpack-dev-server --config webpack.config.dev.js"
}
执⾏npm run dev 启动开发环境。