10天搞定webpack - webpack-dev-server

2019-08-05

10天搞定webpack - webpack-dev-server

前面我们每次运行总是双击打开dist下的index.html文件,然而在我们做项目的时候这样是不行的,我们需要启动一个本地服务。这里我们使用webpack提供的webpack-dev-server。

安装  npm install wekpack-dev-server -D  

   wekpack-dev-server内部通过express实现, 运行时并不真正的生成打包文件,只是生成内存中的打包。

  下面是webpack-dev-server的一些配置  

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被禁用
}

 配置 npm script :

"scripts": {
"dev": "webpack-dev-server --config webpack.config.dev.js"
}

开发环境服务跑起来~~~    npm run dev 

 

10天搞定webpack - webpack-dev-server

10天搞定webpack - webpack-dev-server

原文地址:https://www.cnblogs.com/littlechen/p/11282310.html