第一:
webpack只是构建
webpack-dev-server除了构建,还提供web服务
 
第二:webpack.config.json的路径参数
显然,entry都一样,因为都要知道需要构建的文件在哪里
那么区别就在于 output了
 
path和webpack一起,指明构建 之后 输出文件的位置,这是真实的物理地址
 
publickPath和webpack-dev-server一起,当执行webpack-dev-server时,第一步首先跟webpack一样,先构建输出,然后提供web访问,该输出文件是在内存中
默认情况下,不设置publicPath则输出文件默认在运行webpack-dev-server的目录,也就是根目录,,那么html中引用直接是src="输出的文件",,如果设置了publicPath那么html中引用也要相对改变
 
 
总的来说,webpack只是构建,而webpack-dev-server相当于webpack+apache(或者其它web服务器)
区别在于
使用webpack+apache(或者其它服务器),每次构建之后,首先1 根据path引用构建后的输出文件;2 每次修改都要重新运行webpack
 
使用webpack-dev-server,运行之后首先1 先构建,输出文件在内存中,引用构建后的输出文件根据publicPath(默认是根目录);2 每次修改,自动刷新

webpack和webpack-dev-server的区别的更多相关文章

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

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

  2. 笔记:配置 webpack dev server

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

  3. [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 ...

  4. webpack 4 & dev server

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

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

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

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

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

  7. Webpack学习-Webpack初识

    一.前言 webpack 到底是个什么东西呢,看了一大堆的文档,没一个能看懂的,因为上来就是给个module.exports 然后列一大堆配置,这个干啥,那个干啥,没一点用.但凡要用一个东西,一个东西 ...

  8. 从零开始配置webpack(基于webpack 4 和 babel 7版本)

    webpack 核心概念: Entry: 入口 Module:模块,webpack中一切皆是模块 Chunk:代码库,一个chunk由十多个模块组合而成,用于代码合并与分割 Loader:模块转换器, ...

  9. webpack入门——webpack的安装与使用

    一.简介 1.什么是webpack webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. ...

  10. webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server

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

随机推荐

  1. (转) iOS深入学习(Block全面分析)

    本文翻译自苹果的文档,有删减,也有添加自己的理解部分. 如果有Block语法不懂的,可以参考fuckingblocksyntax,里面对于Block 为了方便对比,下面的代码我假设是写在ViewCon ...

  2. Clojure 学习入门(19)—— 数组

    1.创建数组 1.1 从集合创建数组 into-array into-array (into-array aseq) (into-array type aseq) 演示样例: user=> (i ...

  3. struts2 模型驱动的action赋值优先顺序

    struts2 模型驱动的action赋值优先顺序: 1.优先设置model的属性. 2.如果model属性中没有对应的成员变量,则向上冒泡,寻找action中的属性进行set. 如果action中的 ...

  4. CentOS 修改默认语言

    查看所有的locale语言 [root@centos6 ~]# locale -a ... ... ... ... xh_ZA xh_ZA.iso88591 xh_ZA.utf8 yi_US yi_U ...

  5. Ubuntu安装Mysql及使用

    (1)在线安装:sudo apt-get install mysql-server(2)管理mysql: sudo /etc/init.d/mysql start===========>开启my ...

  6. selenium_python学习

    虫师selenium_python 学习:原文档 下载:http://download.csdn.net/detail/fnngj/6041329 具体参看selenium_python API : ...

  7. [转]前端CSS规范整理

    一.文件规范 1.文件均归档至约定的目录中. 具体要求通过豆瓣的CSS规范进行讲解: 所有的CSS分为两大类:通用类和业务类.通用的CSS文件,放在如下目录中: 基本样式库 /css/core  通用 ...

  8. ENVI5.1批量镶嵌工具界面按钮显示不全的解决方案

    打开批量镶嵌工具,在导出文件界面,部分按钮显示不全.具体见下图: 图 1 界面按钮显示不全 解决方案: 以win7.8系统为例: 显示桌面 – > 右键“个性化” – >显示 – > ...

  9. WampServer PHP服务配置方法(允许外部访问、phpmyadmin设置为输入用户名密码才可登录等)

    WampSever 指的是apache + mySQL + PHP 三合一套装,第一字母W,是指用于windows系统,我用的是2.0f版.用于Linux系统的,是LampSever,第一字母是L.请 ...

  10. Nginx+PostgreSQL+Django+UWSGI搭建

    最近因为项目上的需要开始大量使用nginx,因此也想趁机将以前常用的django+apache的架构换成django+nginx.常见的 django webapp 部署方式采用FCGI 或 WSGI ...