使用webpack3.0配置webpack-dev-server教程

最近正在研究webpack，听说webpack可以自己搭建一个小型的服务器（使用过vue-cli的朋友应该都见识到过），所以迫不及待的想要尝试一下。不过，在实际操作中发现，用webpack搭建服务器仍有不少坑，一方面是由于自己对文档的不熟悉，不了解webpack-dev-server的运作模式；另一方面，在翻阅了不少博客和文章后，发现不少配置实际上都跑不起来（有可能是版本的原因，也有可能是我自己配置的原因）。所以我打算用webpack3.0把dev-server跑起来给大家演示一遍，顺便把一些配置和原理给大家讲清楚，这样就省的绕弯路了。

这里我就默认大家都已经安装了webpack以及自己需要使用的loader和plugins，由于webpack-dev-server是个独立的npm包，所以我们需要在npm下安装它：　

npm install webpack-dev-server --save-dev

之后我们就可以在webpack.config.js中进行配置：

const path = require("path");
module.exports = {
   entyr:{
      ....... //设置入口文件
   },
   output:{
      ....... //设置出口文件
   },
   module:{
      ....... //配置loader，注意使用rules而不是loaders
   },
   plugins:[
      ....... //注意是数组
   ],
   devServer:{
      //我们在这里对webpack-dev-server进行配置
   }
}

devServer中常用的配置对象属性如下：

1. contentBase："./" // 本地服务器在哪个目录搭建页面，一般我们在当前目录即可；

2. historyApiFallback：true // 当我们搭建spa应用时非常有用，它使用的是HTML5 History Api，任意的跳转或404响应可以指向 index.html页面；

3. inline：true // 用来支持dev-server自动刷新的配置，webpack有两种模式支持自动刷新，一种是iframe模式，一种是inline模式；使用iframe模式是不需要在devServer进行配置的，只需使用特定的URL格式访问即可；不过我们一般还是常用inline模式，在devServer中对inline设置为true后，当我们启动webpack-dev-server时仍要需要配置inline才能生效，这一点我们之后再说；

4. hot：true // 启动webpack热模块替换特性，这里也是坑最多的地方，不少博客都将hot设置了true，我们姑且也设置为true，之后再看；

5. port：端口号(默认8080) // 这就不用我多说了吧；

事实上大概常用的配置也就这样，为了方便，我们在packjson中对webpack-dev-server的的启动进行一下设置：

"scripts": {
  ......
  ......
  "start":"webpack-dev-server --inline"
 },

别忘了在devServer中设置inline：true后这里也要设置一下！

这时我们打包后再运行服务器后应该发现index.html页面已经展示了，打包好后的js文件虽然出现在了src上，但并没有显示，打开控制台会发现如下报错：

控制台显示：Hot Module Replacement is disabled；

奇怪？我们之前不是在devServer中设置了hot为true了吗？事实上，虽然不知道为什么，但是目前来说hot这个属性已经没有用了，使用热模块的话我们需要用到一个叫webpack.HotModuleReplacementPlugin的插件。所以我们的webpack.config.js需要加上这些：

const path = require("path");
const webpack = requier ("webpack");

module.exports = {
   entyr:{
      ....... //设置入口文件
   },
   output:{
      ....... //设置出口文件
   },
   module:{
      ....... //配置loader，注意使用rules而不是loaders
   },
   plugins:[
     new webpack.HotModuleReplacementPlugin()
      ....... //注意是数组
   ],
   devServer:{
     contentBase: "./",
   historyApiFallback:true,
   inline:true,
   hot:true
   }
}

这时我们再在bash上运行npm run start后发现服务器就搭建完成了！

另外，还有一点值得注意的就是，webpack-dev-server所使用的bundle.js文件并不是webpack.config.js中output打包生成的bundle.js，而是使用webpack-dev-server自己打包生成的，这个文件不存在与output或其他路径中，而是存到了内存中，事实上webpack-dev-server所使用的那个bundle.js我们是看不到的！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 使用webpack-dev-server处理跨域请求的方法

    在前端调试的时候,跨域一直都是一个比较麻烦的问题,这个在之前的文章 关于跨域问题的一个解决方法中其实已经讨论了一些可以使用的方法. 如果要使用 JSONP,第一是需要修改的地方比较多,而且也不太符合前端发展的大趋势,如果使用 CORS 的话并没有 application/json 类型.而且更重要的是这只是在前端调试时候的需求,并不是在上线以后的需求,所以对后端有太多的入侵也不好. 所以就有一个念想突然在大脑中闪过--加入有一个代理不就可以解决这个问题了?但是又想了一下写起来还挺麻烦,于是就被搁

  • webpack-dev-server自动更新页面方法

    这两天在看webpack,今天卡在webpack-dev-server上了,折腾了一下午,一直无法正常运行,每次服务器也提示正常启动了,但是浏览器一输入localhose:8080/admin就提示Get/...,反正就是无法打开页面.最后找到一个帖子,发现原来是我启动服务器的代码有问题. 先安装webpack相关组件 cnpm i webpack-dev-server --save-dev cnpm i webpack --save-dev 代码如下: 1.项目结构如下: 2.webpack.

  • 详解webpack-dev-server使用http-proxy解决跨域问题

    文档资料 webpack关于webpack-dev-server开启proxy的官方介绍 Vue-cli proxyTable 解决开发环境的跨域问题--虽然这篇是写vue的,不过用在webpack-dev-server上也是一样的 http-proxy-middleware--webpack-dev-server的实现方法其实是对这个的封装 配置http-proxy 在webpack的配置文件(webpack.config.js)中进行配置 module.exports = { ...此处省略

  • 详解webpack-dev-server 设置反向代理解决跨域问题

    一.设置代理的原因 现在对前端开发的要求越来越高,并且随着自动化以及模块化的诞生,前后端开发模式越来越流行.后端只负责接口,前端负责数据展示.逻辑处理.但是前后端开发模式,有一个重要的问题,就是跨域问题.  二.如何配置webpack的代理 webpack代理需要另外一个插件:webpack-dev-server webpack-dev-server配置代理非常的方便,只需要条件一个proxy属性,然后配置相关的参数就可以了: var webpack = require('webpack');

  • 浅谈webpack-dev-server的配置和使用

    本文介绍了浅谈webpack-dev-server的配置和使用,分享给大家,具体如下: 1安装的WebPack-dev-server 在终端输入 npm i webpack-dev-server 安装webpack-dev-server包 2.配置dev-server 在package.json文件中的脚本中添加代码 "dev":"WebPack-dev-server --config webpack.config.js" 在webpack.config.js文件中

  • 关于Webpack dev server热加载失败的解决方法

    利用Webpack dev server作为热加载服务器时,出现以下错误: XMLHttpRequest cannot load http://localhost:8080/dist/06854fc8988da94501a9.hot-update.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not

  • 详解webpack-dev-server的简单使用

    webpack-dev-server webpack-dev-server是一个小型的Node.js Express服务器,它使用webpack-dev-middleware来服务于webpack的包,除此自外,它还有一个通过Sock.js来连接到服务器的微型运行时. 我们来看一下下面的配置文件(webpack.config.js) var path = require("path"); module.exports = { entry:{ app:["./app/main.

  • webpack-dev-server远程访问配置方法

    下面的package.json文件中配置的webpack-dev-server为开发模式,可以使用http://localhost:8080或http://127.0.0.1:8080进行访问 "scripts": { "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", "build": "rimraf dist &

  • 使用webpack3.0配置webpack-dev-server教程

    最近正在研究webpack,听说webpack可以自己搭建一个小型的服务器(使用过vue-cli的朋友应该都见识到过),所以迫不及待的想要尝试一下.不过,在实际操作中发现,用webpack搭建服务器仍有不少坑,一方面是由于自己对文档的不熟悉,不了解webpack-dev-server的运作模式:另一方面,在翻阅了不少博客和文章后,发现不少配置实际上都跑不起来(有可能是版本的原因,也有可能是我自己配置的原因).所以我打算用webpack3.0把dev-server跑起来给大家演示一遍,顺便把一些配

  • MySQL 8.0.20 Window10免安装版配置及Navicat管理教程图文详解

    1.MySQL8.0.20下载及解压 下载链接https://dev.mysql.com/downloads/mysql/ 2.新建配置文件my.ini放在D:\mysql-8.0.20-winx64目录下 [client] # 设置mysql客户端默认字符集 default-character-set=utf8 [mysqld] # 设置3306端口 port = 3306 # 设置mysql的安装目录 basedir=D:\\mysql-8.0.20-winx64 # 设置 mysql数据库

  • Vue + Webpack + Vue-loader学习教程之相关配置篇

    前言 之前已经介绍过了Vue + Webpack + Vue-loader的相关功能介绍,大家可以点击这篇文章了解详情.下面就来看看相关配置篇,感兴趣的可以参考学习. 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue-loader 允许你用其它的 Webpack 加载器去处理 Vue 组件一部分代码.它会根据 lang 属性自动用适当的加载器去处理. CSS 例如,我们编译用 SASS 编译 <style> 标签: npm install sass-l

  • vue cli 3.0 搭建项目的图文教程

    1.3.0版本包括了默认预设配置和用户自定义设置 2.对比2.0来看3.0的目录结构更加精简了 移除了配置文件目录 (config 和 build文件夹) 移除了 static 文件夹,新增 public 文件夹,并且 index.html 移动到 public 中 在 src 文件夹中新增了 views 文件夹,用于分类视图组件和公共组件 vue-cli 3.0 搭建 1. 安装或升级 Node.js vue-cli官网对于node版本有明确要求 Vue CLI 需要 Node.js 8.9

  • 详解如何快速配置webpack多入口脚手架

    背景 当我们基于vue开发单个项目时,我们会init一个vue-cli,但当我们想在其他项目里共用这套模板时,就需要重新init一个,或者clone过来,这非常不方便,而且当多人开发时,我们希望所有的开发代码都在一个git目录下,这时就有了对webpack进行配置的需求,当有些页面需要多入口时,我们又产生了对多入口配置的需求,这里提供一种配置方案,希望能帮助到有需要的人,废话不多说,我们开始吧! 先初始化一个项目 我们通过vue init webpack demo 生成的文件目录是这样的 修改项

  • webpack3.0升级4.0的方法步骤

    1.webpack 3.11升级4.26 为了提升打包效率,在webpack3.11基础之上做了升级,webpack4.0发布以来,零配置的webpack对项目本身提供的"打包"和"压缩"功能已经做了优化,如果在项目开始使用4.0而不用vue-cli的默认配置,遇到的问题或许能少一些. 2. 安装/升级依赖 这些依赖有的是在build过程中发现依赖有新的替换或者报错,逐步替换的,如果想遇到多个坑,可以先把webpack.webpack-cli升级到对应版本 devD

  • SpringBoot 日志的配置及输出应用教程

    SpringBoot 日志的配置及输出应用教程

    目录 默认配置 日志级别 输出格式 修改默认日志配置 自定义日志配置 普通日志配置文件 带有 spring 标识的日志配置文件 默认配置 Spring Boot 默认使用 SLF4J+Logback 记录日志,并提供了默认配置,即使我们不进行任何额外配,也可以使用 SLF4J+Logback 进行日志输出. 常见的日志配置包括日志级别.日志的输入出格式等内容. 日志级别 日志的输出都是分级别的,当一条日志信息的级别大于或等于配置文件的级别时,就对这条日志进行记录. 常见的日志级别如下(优先级依次

  • intellij IDEA配置springboot的图文教程

    intellij IDEA配置springboot的图文教程

    IntelliJ IDEA 简介 IDEA 全称 IntelliJ IDEA,是java语言开发的集成环境,IntelliJ在业界被公认为最好的java开发工具之一,尤其在智能代码助手.代码自动提示.重构.J2EE支持.各类版本工具(git.svn.github等).JUnit.CVS整合.代码分析. 创新的GUI设计等方面的功能可以说是超常的.IDEA是JetBrains公司的产品,这家公司总部位于捷克共和国的首都布拉格,开发人员以严谨著称的东欧程序员为主.它的旗舰版本还支持HTML,CSS,

  • centos 安装python3.6环境并配置虚拟环境的详细教程

    python3.6下载地址: https://www.python.org/ftp/python/3.6.4/Python-3.6.4.tgz linux 下python 环境配置 统一目录: 源码存放位置 $HOME/tools 安装目录: /application 安装python 环境: 1.  下载 # 创建下载目录 mkdir $HOME/tools # 切换到tools统一管理源码目录 cd $HOME/tools wget https://www.python.org/ftp/py

随机推荐