Webpack系列——关于Webpack-dev-server配置的点点滴滴

melody_lql 发布于2019-08-21 16:51 / 3274人阅读

文章首发于我的github及个人博客，github请看https://github.com/huruji/blo...，转载请注明出处。

我们都知道webpack-dev-server为我们在开发的时候提供了一个服务器以便于我们的开发，我们在使用之前当然需要安装：

npm i webpack webpack-dev-server -D

安装完成之后我们只需要在webpack配置中配置devServer选项即可，以下是一个简单的配置：

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

const config = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.join(__dirname, "dist")
  },
  devtool: "inline-source-map",
  devServer: {
    contentBase: "./dist",
    hot: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
}

module.exports = config;

这里指定webpack-dev-server所做的事情就是以dist文件夹为开启服务器的文件夹位置，并使用热更新。这篇文章中所有演示内容也将以这个配置为基础。
上面的webpack-dev-server中指定了contentBase和hot为我们做了我们的任务，那么除了这两个配置选项，webpac-dev-server还有那些配置选项呢？
我将webpack-dev-server中的配置选项进行简单分类，总结如下：

和访问地址有关

port：指定服务器的端口号，webpack-dev-server默认的端口号是8080
host：指定host，默认为losthost，当然指定此项大多数情况下是为了这个服务可以被外部服务访问，这种情况之下，你最好应该确保你的服务运行在DNS解析的域名IP一致
https：webpack-dev-server默认以http形式开启服务，如果需要指定允许https，应该在这个选项中指定相应的HTTPS证书

https:{
    key: fs.readFileSync("/path/to/server.key"),
    cert: fs.readFileSync("/path/to/server.crt"),
    ca: fs.readFileSync("/path/to/ca.pem"),
}

proxy：设置代理，如果我们在开发的时候需要使用到一个后端开发服务器，而却希望能够在同一个域名下访问，这通常会使用在前后端同时开发时，前端需要使用后端API时，这点类似于Nginx的proxy选项。
webpack-dev-server使用的是http-proxy-middleware这个包，配置的选项与其一致。

和服务器对外输出有关

compress：对所有服务启用gzip压缩
contentBase：静态文件的文件夹地址，默认为当前文件夹
headers：在所有的响应中提供首部内容

headers: {
  "X-Custom-Foo": "bar"
}

historyApiFallback：指定相应的请求应该被指定的页面替代，如果404页面需要全部替代为index.html，则声明为true即可，其他情况则需要使用rewrites来重写
404：

historyApiFallback:true

rewrites:

historyApiFallback: {
  rewrites: [
    { from: /^/$/, to: "/views/landing.html" },
    { from: /^/subpage/, to: "/views/subpage.html" },
    { from: /./, to: "/views/404.html" }
  ]
}

openPage：指定打开浏览器时跳转到的页面

和开发体验相关

color：使用颜色，有利于找出关键信息，只能在控制台中使用
hot：启用热替换属性
info：在控制台输出信息，默认输出
open：运行命令之后自动打开浏览器
progress：将运行进度输出到控制台，只可以使用控制台

最佳编写实践

以上的命令大部分在大部分情况下只会用到很少一部分，并且以上的很多命令都是可以在配置中声明或者在控制台声明的，推荐和开发体验相关的，如hot、open、progress、color等通过命令行来写，并且写在package.json中
如：

"scripts": {
    "dev": "webpack-dev-server --open --hot --colors --progress --inline --config webpack.dev.js"
  },

参考：webpack中文文档

海外云主机服务器托管 webpack-dev-server 关于韩国云服务器的配置诀窍 webpack cdn配置 webpack配置cdn

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88830.html

webpack配合vue.js实现完整的单页面demo

摘要：本篇文章主要是我在开发前研究了的单页面应用，因为需要用到的，所以确保安装了，建议官网安装最新的稳定版本。本文章只是和大家探讨怎么利用配合做一个单页面应用，具体关于里面的内容怎么写并不在本篇文章的介绍范围。本篇文章主要是我在开发前研究了webpack+vue.js的单页面应用，因为需要用到node的npm，所以确保安装了node，建议官网安装最新的稳定版本。并且在项目中需要加载一些np...

2450184176 2019-08-19 18:35 评论0 收藏0
js-工具尝试篇-webpack-dev-server

摘要：以前看或者做开发的时候，常常看到。看介绍是一个基于框架的小服务，通过来处理这个打包机小查了一下，的作用是把打包成中间件。原理大致清楚了，还可以根据需求选不同的模式事不宜迟，赶紧试试吧。那么是如何引进来的呢所以说，是生成在内存中的。以前看demo或者做开发的时候，常常看到webpack-dev-server。这边敲代码，同时刷新浏览器，真是nice!但是自己却没有了解学习过它是怎一回事...

waltr 2019-08-20 14:12 评论0 收藏0
Vue2学习之旅一：初始化项目搭建（不带路由）

摘要：除此之外，你还可以运行打包命令此时之前说的打包生成的文件应该就生成了，或者选择用浏览器打开应该也可以看见和刚刚一样的结果。而如何创建一个对象是知道，因此开头引入了，并使用它常见了一个对象，然后这个对象就管理了这一块区域。作者：心叶时间：2018-04-25 16:33 本篇最终项目文件Github地址：github.com/paper520/vue.quick/tree/V1 Vue...

lijy91 2019-08-22 16:43 评论0 收藏0
webpack -> vue Component 从入门到放弃（四）

摘要：先展示一下文件目录结构先把相关的依赖给装好注意一下注释只是为了解释，在中不能写注释插件加载器预编译语法跨平台环境用来设置命令行安装预编译语法的配置中的对象，用于处理目录的对象，提高开发效率。 Foreword 之前三篇大致介绍了webpack的用法，正如这个系列标题而言从webpack 到 vue Component,所以最后一篇文章当然是要讲 component, 不对应该说是结合...

z2xy 2019-08-20 15:07 评论0 收藏0
webpack -> vue Component 从入门到放弃（四）

摘要：先展示一下文件目录结构先把相关的依赖给装好注意一下注释只是为了解释，在中不能写注释插件加载器预编译语法跨平台环境用来设置命令行安装预编译语法的配置中的对象，用于处理目录的对象，提高开发效率。 Foreword 之前三篇大致介绍了webpack的用法，正如这个系列标题而言从webpack 到 vue Component,所以最后一篇文章当然是要讲 component, 不对应该说是结合...

MycLambert 2019-08-01 16:32 评论0 收藏0