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是很 ...
随机推荐
- go语言从例子开始之Example15.闭包
Go 支持通过 闭包来使用 匿名函数.匿名函数在你想定义一个不需要命名的内联函数时是很实用的. 闭包简单理解,函数反回值是一个函数 Example: package main import " ...
- Vue中app实例对象的几种写法
1.传统方法(练习 小DEMO中用的这种) <script type="text/ecmascript"> var app=new Vue({ el:"#ap ...
- easyui记录
var rows = top.$("#queryDetailGrid").datagird("getRows"); //获取datagird所有行 top.$( ...
- vue+cesiumjs环境搭建【import引入】
之前写了一遍博客关于vue+cesium的搭建,后面是在index.html里通过script引入的,但是后面要用到指南针的时候发现指南针没法引入了 之前的链接: https://www.cnblo ...
- get和post 两种基本请求方式的区别
GET和POST是HTTP请求的两种基本方法,要说它们的区别,接触过WEB开发的人都能说出一二. 最直观的区别就是GET把参数包含在URL中,POST通过request body传递参数. 你可能自己 ...
- 编译自己的jdk(使用openJDK源码编译jdk )
找到openjdk网站(http://hg.openjdk.java.net/) 选择需要编译的版本,浏览readme文件,有获取源码及编译步骤 CentOS-7-x86_64-DVD-1804.is ...
- The Second Scrum Meeting!
第七周会议 情况简述 会议概要:汇报已完成的任务,讨论并解决遇到的问题 参与人员:詹晓宇 谢赛金 熊紫仁 徐翠萍 周娟 孙尚煜 会议地点:六区研讨性教室 具体内容 小组成员 已完成任务 计划 ...
- delphi 使电脑睡眠代码
//提升进程令牌函数 function AdjustProcessPrivilege(ProcessHandle:THandle;Token_Name:Pchar):boolean; var Toke ...
- echarts绘制饼图时的一点特殊设置
最后的效果如图,需要在中间展示的部分换行然后字体大小不同. 以下为option的设置,使用rich里面的参数来设置更多的文本样式,使用‘\n’来控制换行 let option = { color: c ...
- SSM框架启动报 org.apache.bval.jsr303.ConfigurationImpl.getDefaultParameterNameProvider
今天在做项目,在启动的时候报了一个错.错误信息是org.apache.bval.jsr303.ConfigurationImpl.getDefaultParameterNameProvider. 原因 ...