简介

webpack-dev-server 为你提供了一个基本的 web server，并且具有 live reloading(实时重新加载) 功能。

安装

npm install —save-dev webpack-dev-server

使用

修改配置文件，告知 dev server，从什么位置查找文件：webpack.config.js

const path = require("path")
const HtmlWebpackPulgin = require("html-webpack-plugin")
module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist'),
    clean: true,
  },
  devtool: 'inline-source-map',
  plugins: [
    new HtmlWebpackPulgin({
      template: './index.html',
      filename: 'app.html',
      inject: 'body'
    })
  ],
  // webpack-dev-server 不输出任何的物理文件，而是把打包后的dist放到了内存里
  // 把dist删除后，我们源文件改变时，不仅还会继续更新，并且不会生成dist
  devServer: {
    // static配置告知 webpack-dev-server，将 dist 目录下的文件 serve 到 localhost:8080 下。
    static: './dist',
    // 模块热替换
    hot: true,
  },
}

配置好 devServer 后，我们

npx webpack-dev-server

启动后如上图所示，我们点击http://localhost:8080/

会有这样的一个界面出现，这就是我们dist文件夹里面的内容，并且它是被放在了server（我们的电脑内存里）上，不会在我们的物理文件夹内生成。

官方文档的描述：

webpack-dev-server 在编译之后不会写入到任何输出文件。而是将 bundle 文件保留在内存中，然后将它们 serve 到 server 中，就好像它们是挂载在 server 根路径上的真实文件一样。如果你的页面希望在其他不同路径中找到 bundle 文件，则可以通过 dev server 配置中的 devMiddleware.publicPath 选项进行修改。

模块热替换：

这个功能可以让我们在修改代码保存后，不需要重新启动服务，也不需要刷新页面，直接就可以在页面上实现替换，这就和我们使用的 create-reacy-app 以及 vue-cli 一样，都不需要我们手动的刷新页面。

它允许在运行时更新所有类型的模块，而无需完全刷新。本页面重点介绍其实现，而概念页面提供了更多关于它的工作原理以及为什么它有用的细节。此功能可以很大程度提高生产效率。我们要做的就是更新 webpack-dev-server 配置，然后使用 webpack 内置的 HMR 插件。我们还要删除掉 print.js 的入口起点，因为现在已经在 index.js 模块中引用了它。从 webpack-dev-server v4.0.0 开始，热模块替换是默认开启的

总结

（1）devServer 可以让我们打包的文件不输出到我们的电脑上，而是把文件保留在内存里，然后serve到server上。
（2）模块的热更新可以让我们自动监测文件的变化，并且实习浏览器的自动刷新，大大提高了我们的开发效率。

webpack学习

三、devServer

简介

安装

使用

官方文档的描述：

模块热替换：

总结