10天搞定webpack - webpack-dev-server

Posted littlechen

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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

10天彻底搞定 webpack,前端开发必备技能分享!

忽略 Webpack-dev-server 中的 Typescript 错误

webpack构建项目

webpack常用命令总结

webpack +vue开发