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是很 ...
随机推荐
- 查看java进程内存简单示例
分析工具 1.jps 显示指定系统内的所有JVM进程 2.jstat 收集JVM各方面的运行数据 3.jinfo 显示JVM配置信息 4.jmap 堆快照 5.jhat 分析headdump文件 ...
- Tensorflow中的图(tf.Graph)和会话(tf.Session)详解
Tensorflow中的图(tf.Graph)和会话(tf.Session) Tensorflow编程系统 Tensorflow工具或者说深度学习本身就是一个连贯紧密的系统.一般的系统是一个自治独立的 ...
- zookeeper问题排查
一.无法启动 zookeeper之前可以很好的运行,由于zk集群不是正常的关闭,比如 强制Linux关闭,直接执行kill 命令zk的进程等原因导致zookeeper启动不了 启动命令后,查看状态,会 ...
- 前端导出excel表格
前言近期项目有个新需求--将折线图表的数据加一个下载成excel表格的功能.以前下载功能都是调后台接口的,但是这个迭代,后台压力比较重,部分就交给了前端自己实现,下面就记录一下前端如何实现excel表 ...
- 【leetcode】662. Maximum Width of Binary Tree
题目如下: Given a binary tree, write a function to get the maximum width of the given tree. The width of ...
- 云数据库POLARDB产品解读之二:如何做到高性价比
现在做任何事情都要看投入产出比,对应到数据库上其实就是性价比.POLARDB作为一款阿里自研数据库,经常被问的问题是:性能怎么样?能不能支撑我的业务?价格贵不贵?很显然,在早期调研阶段,对稳定性.可靠 ...
- Reverse array
数组颠倒算法 #include <iostream> #include <iterator> using namespace std; void reverse(int* A, ...
- Druid数据源配置入门
Druid是什么 Druid首先是一个数据库连接池.Druid是目前最好的数据库连接池,在功能.性能.扩展性方面,都超过其他数据库连接池,包括DBCP.C3P0.BoneCP.Proxool.JBos ...
- 【Flutter学习】事件处理与通知之通知(Notification)
一,概述 Notification是Flutter中一个重要的机制,在Widget树中,每一个节点都可以分发通知,通知会沿着当前节点(context)向上传递,所有父节点都可以通过Notificati ...
- teradata在虚拟机安装客户端sql Assistant
学习链接:https://www.w3cschool.cn/teradata/? 1.安装过程