本文所用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配置项的坑的更多相关文章

  1. 深入浅出的webpack构建工具---DevServer配置项(二)

    深入浅出的webpack构建工具---DevServer配置项(二) 阅读目录 DevServer配置项 1. contentBase 2. port 3. host 4. headers 5. hi ...

  2. 基于 Laravel 开发 ThinkSNS+ 中前端的抉择(webpack/Vue)踩坑日记【ThinkSNS+研发日记系列】

    在上一篇文章< ThinkSNS+基于Laravel master分支,从1到 0,再到0.1>,简单的介绍了 社群系统ThinkSNS+ ,这里分享在开发过程中,前端选择的心理活动. L ...

  3. 基于 Laravel 开发 ThinkSNS+ 中前端的抉择(webpack/Vue)踩坑日记

    在上一篇文章< ThinkSNS+基于Laravel master分支,从1到 0,再到0.1>,简单的介绍了 ThinkSNS+ ,这里分享在开发过程中,前端选择的心理活动. Larav ...

  4. 跨域解决方案 - webpack devServer

    1. 定义 如果一个项目中配置了webpack, 那么我们使用 webpack devServer 来配置代理转发请求来达到解决跨域问题的目的 webpack devServer 能够解决跨域问题的根 ...

  5. [问题记录] webpack devServer HtmlWebpackPlugin 没有加载 js、css

    webpack devServer 没有加载 js.css HtmlWebpackPlugin runtimeChunks 注入问题. 描述 写了一个极其简单的多页面 demo 启动开发服务器,发现样 ...

  6. express:webpack dev-server中如何将对后端的http请求转到https的后端服务器中?

    在上一篇文章(Webpack系列:在Webpack+Vue开发中如何调用tomcat的后端服务器的接口?)我们介绍了如何将对于webpack-dev-server的数据请求转发到后端服务器上,这在大部 ...

  7. express:webpack dev-server开发中如何调用后端服务器的接口?

    开发环境:     前端:webpack + vue + vue-resource,基于如下模板创建的开发环境: https://github.com/vuejs-templates/webpack  ...

  8. Webpack devServer中的 proxy 实现跨域

    Webpack dev server使用http-proxy解决跨域问题 文档资料 webpack关于webpack-dev-server开启proxy的官方介绍Vue-cli proxyTable ...

  9. webpack常用配置项配置文件介绍

    一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...

随机推荐

  1. Python Socket(未编辑)

    客户端 import socket 导入socket模块 client = socket.socket() 声明socket协议类型,同时生成socket连接对象 client.connect(('l ...

  2. Database基础(七):部署集群基础环境、MySQL-MMM架构部署、MySQL-MMM架构使用

    一.部署集群基础环境 目标: 本案例要求为MySQL集群准备基础环境,完成以下任务操作: 数据库授权 部署MySQL双主多从结构 配置本机hosts解析记录 方案: 使用4台RHEL 6虚拟机,如下图 ...

  3. Python基础(一):程序输入输出、判断合法用户、编写判断成绩的程序

    一.程序输入输出 目标: 编写login.py脚本,实现以下目标: 提示用户输入用户名 将用户名保存在变量中 在屏幕上显示欢迎用户的信息 方案: 编写程序时,很多情况下都需要程序与用户交互.在pyth ...

  4. Delphi直接读取XmL

    有时,只需要用XML作一些小的应用,比如只是简单地保存日志或者一些配置,这时我们只需要直接读写XML就好,效率第一. Delphi盒子有一个直接读写XML文件 (例子和代码),其核心函数为下面两个函数 ...

  5. PyCharm 默认快捷键

    1.编辑(Editing) Ctrl + Space    基本的代码完成(类.方法.属性)Ctrl + Alt + Space  快速导入任意类Ctrl + Shift + Enter    语句完 ...

  6. 探索Redis设计与实现13:Redis集群机制及一个Redis架构演进实例

    本文转自互联网 本系列文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到我的仓库里查看 https://github.com/h2pl/Java-Tutorial ...

  7. TP5.0 where数组高级查询

    多条件模糊查询多条件比较查询使用数组可以方便得将一些比较复杂的查询条件 , 组合到一个数组之内 如以下数据库查询 $subjectList = Db::name('user_apply') -> ...

  8. python sum()函数的用法

    sum() 方法对系列进行求和计算.针对元组,列表.对字符串会报错 >>>sum([0,1,2]) 3 >>> sum((2, 3, 4), 1) # 元组计算总和 ...

  9. 用 Flask 来写个轻博客 (16) — MV(C)_Flask Blueprint 蓝图

    Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录 目录 前文列表 扩展阅读 Blueprint 蓝图 定义一个蓝图 注册一个蓝图 创建蓝 ...

  10. 关于sql中日期操作

    select * from account where  DAYOFWEEK('2019-11-30') =7 limit 10 DAYOFWEEK对应结果: 周日:1 周一:2 周二:3 周三:4 ...