WDS必知必会

在webpack中构建本地服务，最重要的一个插件webpack-dev-server,我们俗称WDS,它承担起了在开发环境模块热加载、本地服务、接口代理等非常重要的功能。

本文是笔者对wds的一些理解和认识，希望在项目中有所帮助。

正文开始...

在阅读本文之前，本文会大概从下几个方面去了解wds

1、了解wds是什么

2、wds在webpack中如何使用

3、项目中使用wds是怎么样的

4、关于配置devServer的一些常用配置，代理等

5、wds如何实现模块热加载原理

了解`webpack-dev-server`

顾名思义，这是一个在开发环境下的使用的本地服务，它承担了一个提供前端静态服务的作用

首先我们快速搭建一个项目,创建一个项目webpack-07-wds执行npm init -y,然后安装基础支持的插件

npm i webpack webpack-cli html-webpack-plugin webpack-dev-server -D

创建一个webpack.config.js

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].js'
  },
  plugins: [new htmlWebpackPlugin({
    template: './public/index.html'
  })]
}

在根目录下创建public,新建html文件



  
    
    
    
    webpack-for-dev-server

我们在入口文件写入一段简单的代码

// index
(() => {
  const appDom = document.getElementById('app');
  appDom.innerHTML = 'hello webpack for wds'
})()

我们已经准备好了内容，现在需要启动wds，因此我们需要在在package.json中启动服务

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack server"
  },

执行npm run start

万事大吉，原来就是一行命令就可以了

但是这行命令的背后实际上有webpack-cli帮我们做了一下事情，实际上在.bin目录下，当你执行该命令时，webpack就会启用告知webpack-dev-server开启服务，通过webpack根据webpack.config.js的配置信息进行compiler,然后再交给webpack-dev-server处理

参考官方文档webpack-dev-server

根目录新建server.js

// server.js
const webpack = require('webpack');
const webpackDevServer = require('webpack-dev-server');
const webpackConfig = require('./webpack.config.js');
// webpack处理入口配置相关文件
const compiler = webpack(webpackConfig);
// devServer的相关配置
const devServerOption = {
  port: 8081,
  static: {
    directory: path.join(__dirname, 'public')
  },
  compress: true // 开启gizps压缩public中的html
};
const server = new webpackDevServer(devServerOption, compiler);
const startServer = async () => {
  console.log('server is start');
  await server.start();
}
startServer();

终端执行node server.js或者在package.json中配置,执行npm run server

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack server",
    "server": "node ./server.js"
  }

打开页面http://localhost:8081地址，发现是ok的

我们注意到可以使用webpack server启动服务，这个主要是webpack-cli的命令server

关于在命令行中设置对应的环境，在以前项目中可能你会看到，process.env.NODE_ENV这样的设置

你可以在cli命令中配置,注意只能在最前面设置，不能像以下这种方式设置~~webpack server NODE_ENV=test NODE_API=api~~，不然会无效

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "NODE_ENV=test NODE_API=api webpack server",
    "server": "node ./server.js"
  },

在webpack.config.js中就可以看到设置的参数

// webpack.config.js
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin')

console.log(process.env.NODE_ENV, process.env.NODE_API) // test api
module.exports = {
  entry: './src/index.js',
  mode: 'development',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].js'
  },
  plugins: [new htmlWebpackPlugin({
    template: './public/index.html'
  })]
}

你可以设置--node-env xxx环境参数来指定环境变量

 "start:test": "webpack server --node-env test",

更多参数设置参考官方cli

wds在webpack中的使用

我们上述是用一个server.js，通过命令行方式，调用webpack-dev-serverAPI方式去启动一个本地的静态服务，但是实际上，在webpack中直接在配置devServer接口中配置就行。

了解几个常用的配置

port 指定端口打开页面
client
- overlay 当程序错误时，浏览器页面全屏警告
- webSocketURL 允许指定websocket服务器

WDS必知必会

了解webpack-dev-server

wds在webpack中的使用

相关推荐

了解`webpack-dev-server`