webpack devServer配置项的坑
本文所用webpack版本为4+,阅读本章的同学请注意区分。
webpack默认不需要配置文件 但是你仍可在项目的node_module目录同级目录建立一个webpack.config.js文件进行配置
本人的苦逼经历觉得这句话还是挺重要的,所以开局先一句话,
本章主要介绍webpack 的devserver配置项,请根据自身判断是否需要继续阅读
上代码
module.exports = {
entry: {
// ...
},
output: {
// ...
publicPath: "./",//为什么把这个字段列出来呢,下面会有解释
},
devServer: {
contentBase: '/index.html',//设置 publicPath: "",//设置访问地址,在开启服务之后会出现一个访问地址,一般都是 http://localhost:8080/,如果你把这个值设置成/index,这里是需要加/符号的。那么你开启的服务的访问打地址就是 http://localhost:8080/index //...
//本项中上面两项配置是有坑的,特别是对新手来说,而且他的配置,大体上通过翻阅webpack配置文旦就可里顺利的调用,所以就不再叙述
//devserver中还有很多配置选项,想要详细了解可以访问https://www.webpackjs.com/configuration/dev-server/#devserver-host
}
}
webpack devServer配置项的坑的更多相关文章
- 深入浅出的webpack构建工具---DevServer配置项(二)
深入浅出的webpack构建工具---DevServer配置项(二) 阅读目录 DevServer配置项 1. contentBase 2. port 3. host 4. headers 5. hi ...
- 基于 Laravel 开发 ThinkSNS+ 中前端的抉择(webpack/Vue)踩坑日记【ThinkSNS+研发日记系列】
在上一篇文章< ThinkSNS+基于Laravel master分支,从1到 0,再到0.1>,简单的介绍了 社群系统ThinkSNS+ ,这里分享在开发过程中,前端选择的心理活动. L ...
- 基于 Laravel 开发 ThinkSNS+ 中前端的抉择(webpack/Vue)踩坑日记
在上一篇文章< ThinkSNS+基于Laravel master分支,从1到 0,再到0.1>,简单的介绍了 ThinkSNS+ ,这里分享在开发过程中,前端选择的心理活动. Larav ...
- 跨域解决方案 - webpack devServer
1. 定义 如果一个项目中配置了webpack, 那么我们使用 webpack devServer 来配置代理转发请求来达到解决跨域问题的目的 webpack devServer 能够解决跨域问题的根 ...
- [问题记录] webpack devServer HtmlWebpackPlugin 没有加载 js、css
webpack devServer 没有加载 js.css HtmlWebpackPlugin runtimeChunks 注入问题. 描述 写了一个极其简单的多页面 demo 启动开发服务器,发现样 ...
- express:webpack dev-server中如何将对后端的http请求转到https的后端服务器中?
在上一篇文章(Webpack系列:在Webpack+Vue开发中如何调用tomcat的后端服务器的接口?)我们介绍了如何将对于webpack-dev-server的数据请求转发到后端服务器上,这在大部 ...
- express:webpack dev-server开发中如何调用后端服务器的接口?
开发环境: 前端:webpack + vue + vue-resource,基于如下模板创建的开发环境: https://github.com/vuejs-templates/webpack ...
- Webpack devServer中的 proxy 实现跨域
Webpack dev server使用http-proxy解决跨域问题 文档资料 webpack关于webpack-dev-server开启proxy的官方介绍Vue-cli proxyTable ...
- webpack常用配置项配置文件介绍
一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...
随机推荐
- css3--文字效果
text-shadow <!DOCTYPE html> <html> <head> <meta charset="utf-8"> & ...
- Linux下的Jenkins作为hub,Windows作为node节点,在Android手机上执行自动化脚本
1.在Linux上放selenium-server-standalone-2.53.0.jar,在jar包目录下执行命令java -jar selenium-server-standalone-2.5 ...
- SSD算法的实现
本文目的:介绍一个超赞的项目--用Keras来实现SSD算法. 本文目录: 0 前言 1 如何训练SSD模型 2 如何评估SSD模型 3 如何微调SSD模型 4 其他注意点 0 前言 我在学习完SSD ...
- oracle死锁查询
select sess.sid ||','|| sess.serial#, lo.oracle_username, lo.os_user_name, ao.object_name, lo.locked ...
- 【leetcode】921. Minimum Add to Make Parentheses Valid
题目如下: 解题思路:上周都在忙着参加CTF,没时间做题,今天来更新一下博客吧.括号问题在leetcode中出现了很多,本题的解题思路和以前的括号问题一样,使用栈.遍历Input,如果是'('直接入栈 ...
- ContextLoaderListener vs DispatcherServlet
In XML based Spring MVC configuration, you must have seen two declarations in web.xml file i.e. Cont ...
- Java 基础 - 自动装箱,valueOf装箱,new -->使用 == 和 equals比较
总结 关于equals 比较 记住:equals方法比较的是真正的值 两个包装类比较,比较的是包装的基本数据类型的值 基本数据类型和包装类型比较时,会先把基本数据类型包装后再比较 (但是因为equa ...
- 使用Ueditor点击上传图片时显示延迟的问题
最近在做一个项目,需要用到Ueditor,但是在点击上传图片的时候,总是隔了4-5秒才显示文件框 查了一些资料,最后发现,只需在 修改:(1) dialog/images/image.js 把imag ...
- 07-图5 Saving James Bond - Hard Version(30 分)
This time let us consider the situation in the movie "Live and Let Die" in which James Bon ...
- 楼房重建 (rebuild)
楼房重建 (rebuild) 题目描述 小A的楼房外有一大片施工工地,工地上有N栋待建的楼房.每天,这片工地上的房子拆了又建.建了又拆.他经常无聊地看着窗外发呆,数自己能够看到多少栋房子.为了简化问题 ...