webpack -v 3.4.1

npm -v 3.10.10

///////////////////////////////////////

webpack的webpack-dev-server可以在本地构建nodejs的express服务器进行本地测试,可以在改动代码后自行刷新页面。昨晚试了下但总是不成功,浏览器打开localhost只显示cannot get xxx。翻了好多帖子和github的issues,英明神武的我竟然花了整整一个晚上才弄明白,羞耻。
1.本地安装了webpack后,安装webpack-dev-server,建立好项目文件树
2.在package.json中配置script项命令:
"build": "webpack --config webpack.config.js --progress --display-reasons --display-error-details --display-modules --color ",
"start":"webpack-dev-server --open"
3.在config.js输出配置对象中设置devServer属性:
{
    contentBase:__dirname, //浏览器cwd
    historyApiFallback: true,//不跳转
    inline: true//实时刷新
  }

4.运行webpack
npm run bulid
npm run start

问题一:Cannot get xxx
为了这个问题翻了好多帖子浪费很多时间,主要是国内的很多webpack-dev-server教程都前篇一律,没有提到这个问题,甚至有的连contentBase 参数都没列出来,更没有给出solution;后来去github参考别人的代码,翻文档案例,最后终于弄清楚npm run start后,页面打开的url是以devServer中的contentBase作为当前查询目录,只要文档不在contentBase所指定的目录中,就只会显示cannot get;所以只要文档放在该目录下就能正常工作了。
问题二:
页面webpack-dev-server命令后,没有展示文档,却展示了一个目录视图
这是webpack-dev-server擅自加的,contentBase参数设置不对的话,会展示一个以该参数指定目录作为根目录的路由窗口,类似文件树,contentBase设置到index.html就好了。另外,如果output设置了publicPath,index中js的src也要以publicPath作为路径,不必使用绝对路径。

补充5.由于版本原因,一些参数的有无和设置不同,建议大家在确定自己webpack版本后直接查阅官方文档就好啦。

我的webpack是3.4.1,webpack-dev-server参考文档:https://webpack.js.org/guides/development/#using-webpack-dev-server.

另外推荐简书上一篇很赞的webpack教程:http://www.jianshu.com/p/42e11515c10f

webpack-dev-server简记的更多相关文章

  1. 笔记:配置 webpack dev server

    笔记:配置 webpack dev server 安装 webpack-dev-server 组件 配置 webpack.config.js 配置 增加 html-webpack-plugin 组件 ...

  2. [Webpack] Access Webpack Dev Server from Mobile Safari on an iPhone

    Testing your sites on mobile devices is a critical part of the development process. Webpack dev serv ...

  3. 配置Webpack Dev Server 实战操作方法步骤

    本文摘要:配置 Webpack Dev Server 可以解决本地开发前端应用时,手动执行 webpack 命令或 yarn build 命令,再去浏览器中访问 dist/index.html 的麻烦 ...

  4. webpack dev server 和 sublime text 配合时需要注意的地方

    参考:https://webpack.js.org/guides/development/ Adjusting Your Text Editor Some text editors have a &q ...

  5. webpack dev server 配置 启动项目报错Error: listen EADDRINUSE

    Error: listen EADDRINUSE 0.0.0.0:5601 它的意思是,端口5601被其他进程占用. 切换端口即可解决问题

  6. 解决新版本webpack vue-cli生成文件没有dev.server.js问题

    新版本webpack生成的dev.server.js 在webpack.dev.conf.js中 webpack.dev.conf.js const axios = require('axios') ...

  7. webpack 4 & dev server

    webpack 4 & dev server proxy https://webpack.js.org/configuration/dev-server/#devserverproxy htt ...

  8. vue-cli脚手架之webpack.dev.conf.js

    webpack.dev.conf.js  开发环境模式配置文件: 'use strict'//js按照严格模式执行 const utils = require('./utils')//导入utils. ...

  9. Vue.js如何搭建本地dev server和json-server 模拟请求服务器

    前言:vue-cli(版本更新),由原来的2.8.1升级为2.9.1.主要改变是原来在build文件夹下的dev-server.js删掉了,增加了webpack.dev.conf.js. 所以这次讲的 ...

  10. npm ERR! mathine_call@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js` npm ERR! Exit status 1

    internal/modules/cjs/loader.js:583 throw err; ^ Error: Cannot find module 'webpack' at Function.Modu ...

随机推荐

  1. 2019-2020-1 20199328《Linux内核原理与分析》第二周作业

    冯诺依曼体系结构的核心是: 冯诺依曼体系结构五大部分:控制器,运算器,存储器,输入输出设备. 常用的寄存器 AX.BX.CX.DX一般存放一些一般的数据,被称为通用寄存器,分别拥有高8位和低8位. 段 ...

  2. 【Linux网络基础】TCP/IP 协议簇(各个常见协议介绍)

    一.应用层协议 1. FTP   协议所在层次:应用层协议 名称:FTP协议 协议端口:20,21 协议说明: FTP(File Transfer Protocol,文件传输协议)是TCP/IP协议组 ...

  3. 【Linux常见命令】netstat命令

    netstat - Print network connections, routing tables, interface statistics, masquerade connections, a ...

  4. TCP连接过程及报文解析

    可能大家都听过TCP建立连接时需要经历三次握手和四次挥手的. 那么具体的握手挥手的过程是怎么样的呢? 这篇文章就通过WireShark抓包来了解TCP连接建立和断开的过程. 实验方法: 写一段简单的代 ...

  5. golang 线上项目部署折腾之一

    最近自己使用golang折腾了一点东西,可是需要部署到线上才好玩,那么服务器使用了aws,然后使用了docker和没有使用docker部署了一次.简单记录一下过程 aws服务器 为什么使用aws呢,说 ...

  6. Radix_Sort

    public class Radix_sort { public static void sort(int[] arrays,int radix){ int n = 1; int length = a ...

  7. 数学--数论--HDU - 6322 打表找规律

    In number theory, Euler's totient function φ(n) counts the positive integers up to a given integer n ...

  8. ACM卡常处理办法(虽然我到现在没遇到)

    今天做预流推送,一样的代码.别人500MS(OI选手)而我5S,百思不得其解,然后我知道了还有卡常这一说. 我们今天就来看一看吧: 1.循环展开: 在缓存和寄存器允许的情况下一条语句内大量的展开运算会 ...

  9. P3842 [TJOI2007]线段

    最近多刷些dp,觉得这个算不上蓝题   在一个\(n\times n\)的平面上,在每一行中有一条线段,第\(i\)行的线段的左端点是\((i, L_i)\),右端点是\((i, R_i)\),其中\ ...

  10. 在html中使用vue组件

    最近在维护公司的项目,当我拿到项目时,发现他用了vue. 但是~~仅仅是引用vue.js文件,整体的架构还是html那种,没有用webpack! 当时觉得~哇~原来还可以这样! 然后了解了业务逻辑和代 ...