使用webpack-dev-server来监听项目变化

webpack的出现方便了前端开发者，使开发和部署分成了两部分，开发者可以正常根据工程化的要求进行开发，部署时通过webpack实现代码的裁剪和优化。

本次就介绍一个webpack的功能 webpack-dev-server

将webpack与提供实时重载的开发服务器一起使用。这仅应用于开发。
它在后台使用了webpack-dev-middleware，它提供了对Webpack资产的快速内存访问。

webpack-dev-server提供了一个小型的express的http服务器，这个http服务器和client使用了websocket通讯协议，原始文件作出改动后，webpack-dev-server会实时的编译，但是最后的编译的文件并没有输出到目标文件夹。

注意：启动webpack-dev-server后，在目标文件夹中是看不到编译后的文件的,编译后的文件都保存到了内存当中来加速访问。

启用webpack-dev-server

npm install -D webpack-dev-server

在webpack.config.js中添加devServer对象：

var path = require('path');

module.exports = {
  //...
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true, // 开启压缩
    port: 9000 // 指定运行的端口
  }
};

然后通过npx webpack-dev-server启动，终端上会输出一些信息，一般我们会增加一些参数来使输出更加好看:

webpack-dev-server --devtool eval-source-map --progress --colors --hot --inline

上面的命令增加一个开发工具 eval-source-map，开启了progress进度显示，开启了colors颜色，hot热更新和inline更新模式。上面的参数也可以添加到devServer的属性中。

终端输出的内容如下:

10% building 1/1 modules 0 activeℹ ｢wds｣: Project is running at http://localhost:9000/
ℹ ｢wds｣: webpack output is served from /dist/
ℹ ｢wds｣: Content not from webpack is served from /home/justforlxz/Projects/VueBlog/dist
ℹ ｢wdm｣: Hash: ff9005d9f6ffafd11cd4
Version: webpack 4.41.0
Time: 2938ms
Built at: 11/25/2019 6:03:50 PM
  Asset      Size  Chunks             Chunk Names
main.js  2.09 MiB    main  [emitted]  main
Entrypoint main = main.js
[0] multi (webpack)-dev-server/client?http://localhost:9000 (webpack)/hot/dev-server.js ./src/main.ts 52 bytes {main} [built]

我们就可以通过localhost:9000来访问我们的应用了。

需要注意的是，由于我们经常把内容输出到dist目录，但是webpack运行是在项目目录的，访问webpack生成在dist目录的main.js时，需要写上相对于webpack的目录，例如dist/main.js。否则会找不到文件。

如果遇到问题，导航到 /webpack-dev-server 路径，可以显示出文件的服务位置。 例如，http://localhost:9000/webpack-dev-server。

配置webpack

webpack-dev-server支持在服务内部调用中间件对数据进行处理。

devServer.before

function (app, server)

在服务内部的所有其他中间件之前， 提供执行自定义中间件的功能。 这可以用来配置自定义处理程序，例如：

module.exports = {
  //...
  devServer: {
    before: function(app, server) {
      app.get('/some/path', function(req, res) {
        res.json({ custom: 'response' });
      });
    }
  }
};

devServer.after

同devServer.before，在服务内部的所有中间件之后，提供执行自定义中间件的功能。

devServer.allowedHosts

允许添加白名单服务，允许一些开发服务器访问。

module.exports = {
  //...
  devServer: {
    allowedHosts: [
      'host.com',
      'subdomain.host.com',
      'subdomain2.host.com',
      'host2.com'
    ]
  }
};

模仿 django 的 ALLOWED_HOSTS，以 . 开头的值可以用作子域通配符。.host.com 将会匹配 host.com, www.host.com 和 host.com 的任何其他子域名。

module.exports = {
  //...
  devServer: {
    // 这实现了与第一个示例相同的效果，
    // 如果新的子域名需要访问 dev server，
    // 则无需更新您的配置
    allowedHosts: [
      '.host.com',
      'host2.com'
    ]
  }
};

devServer.clientLogLevel

string: 'none' | 'info' | 'error' | 'warning'

当使用内联模式(inline mode)时，会在开发工具(DevTools)的控制台(console)显示消息，例如：在重新加载之前，在一个错误之前，或者 模块热替换(Hot Module Replacement) 启用时。默认值是 info。

devServer.clientLogLevel 可能会显得很繁琐，你可以通过将其设置为 ‘none’ 来关闭 log。

module.exports = {
  //...
  devServer: {
    clientLogLevel: 'none'
  }
};

devServer.color - 只用于命令行工具(CLI)

只在终端下启用，启用/禁用控制台的彩色输出。

webpack-dev-server --color

devServer.compress

boolean

一切服务都开启gzip压缩。

module.exports = {
  //...
  devServer: {
    compress: true
  }
};

devServer.contentBase

boolean: false string [string] number

告诉服务器从哪个目录中提供内容。只有在你想要提供静态文件时才需要。devServer.publicPath 将用于确定应该从哪里提供 bundle，并且此选项优先。

默认情况下，将使用当前工作目录作为提供内容的目录。将其设置为 false 以禁用 contentBase。

module.exports = {
  //...
  devServer: {
    contentBase: path.join(__dirname, 'public')
  }
};

也可以从多个目录提供内容：

module.exports = {
  //...
  devServer: {
    contentBase: [path.join(__dirname, 'public'), path.join(__dirname, 'assets')]
  }
};

devServer.disableHostCheck

boolean

设置为 true 时，此选项绕过主机检查。不建议这样做，因为不检查主机的应用程序容易受到 DNS 重新连接攻击。

module.exports = {
  //...
  devServer: {
    disableHostCheck: true
  }
};

devServer.filename

string

在 lazy mode(惰性模式) 中，此选项可减少编译。 默认在 lazy mode(惰性模式)，每个请求结果都会产生全新的编译。使用 filename，可以只在某个文件被请求时编译。

如果 output.filename 设置为 ‘bundle.js’ ，devServer.filename 用法如下：

module.exports = {
  //...
  output: {
    filename: 'bundle.js'
  },
  devServer: {
    lazy: true,
    filename: 'bundle.js'
  }
};

现在只有在请求了bundle.js时，才会去编译bundle。

总结

webpack的功能确实很强大，可以针对代码进行各种操作，最终生成出可以适应各种场景的代码，使开发和部署彻底分离开来，开发者可以更加专注项目。