前言

webpack-dev-server就是一个基于Node.js和webpack的一个简易服务器。它在服务器端使用webpack-dev-middleware进行webpack构建打包；并在客户端注入一份runtime，用于接受服务器端的构建打包后信息。只需要提供一份简单的webpack配置文件，在命令行中运行wbepack-dev-server即可运行起来。

安装

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

什么是 webpack-dev-server

webpack-dev-server就是一个基于Node.js和webpack的一个简易服务器。它在服务器端使用webpack-dev-middleware进行webpack构建打包；并在客户端注入一份runtime，用于接受服务器端的构建打包后信息。只需要提供一份简单的webpack配置文件，在命令行中运行wbepack-dev-server即可运行起来。

var path = require("path");module.exports = {    entry: {        // 以./app/main.js作为入口文件，构建输出app.js        app: ["./app/main.js"]    },    output: {        // 将构建打包输出的app.js放到build目录下        path: path.resolve(__dirname, "build"),        // webpack构建输出的临时文件存放到内存中，而且是以publicPath作为相对路径。        // publicPath并不会影响输出目录        // 此外，如果指定路径下已经存在了相同文件，webpack会优先使用内存的临时文件        publicPath: "/assets/",        // 可以对构建输出的app.js进行二次定制化命名，比如加时间戳等        filename: "[name].js"    }};

上面这份配置告诉webpack如何进行模块化管理，如何打包输出，我们就可以通过localhost:[port]/assets/bundle.js访问到构建后的打包文件。也就是说，webpack-dev-server底层一方面使用webpack在服务器端进行构建打包，一方面在客户端注入runtime以便和服务器端建立联系。显然，我们提供的webpack.config.js文件是提供给webpack的，也就是说想要做更多的构建任务，对webpack配置文件进行修改即可。

webpack-dev-server支持两种模式的自动刷新。

1.iframe模式

使用iframe模式并不需要多余的配置，直接访问http://[host]:[port]/webpack-dev-server/[path]即可，iframe模式的特征如下：

✦ 无需额外的配置✦ 顶部条可以显示编译信息✦ 浏览器的地址不会跟着页面URL变动

2.inline模式

简单配置可以开启，然后直接访问http://[host]:[port]/[path]即可，inline模式的特征如下：

✦ 需要额外的配置✦ 编译信息只能在命令行和浏览器console中查看✦ 浏览器的地址和页面URL同步

实际操作

1. 新建项目,在项目中，
2. 安装 webpack
3. 在项目中添加webpack.config.js配置文件，app文件夹，app文件夹下建一个index.js 和 sub.js
4. 执行 npm init 初始化项目
5. 安装 html-webpack-plugin、webpack-dev-server 插件

以下是文件的内容：

index.js

var sub = require('./sub');var app = document.createElement('div');app.innerHTML = '
Hello World h1
';app.appendChild(sub());document.body.appendChild(app);

sub.js

function generateText() {　　var element = document.createElement('h2');　　element.innerHTML = "Hello h2 world h2";　　return element;}module.exports = generateText;

webpack.config.js

const path = require('path');const HtmlwebpackPlugin = require('html-webpack-plugin');const webpack = require('webpack');//定义了一些文件夹的路径const ROOT_PATH = path.resolve(__dirname);const APP_PATH = path.resolve(ROOT_PATH, 'app');const BUILD_PATH = path.resolve(ROOT_PATH, 'build');module.exports = {    //项目的文件夹 可以直接用文件夹名称 默认会找index.js 也可以确定是哪个文件名字    entry: APP_PATH,    //输出的文件名 合并以后的js会命名为bundle.js    output: {        path: BUILD_PATH,        filename: 'bundle.js'//将app文件夹中的两个js文件合并成build目录下的bundle.js文件    },    //添加我们的插件 会自动生成一个html文件    plugins: [        new HtmlwebpackPlugin({            title: 'Hello World app'        }),//在build目录下自动生成index.html，指定其title        new webpack.HotModuleReplacementPlugin(),    ],    devServer: {      historyApiFallback: true,      inline: true, //注意：不要写colors:true，progress:true等，webpack2.x已不支持这些    },};

我们可以在 package.json 文件中自定义命令

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

我们文件写好后，我们直接执行 npm run start,成功之后我们就可以访问我们的8080端口了。另外，我们还可以用一些其他插件或loader来处理一下我们的文件。

结束

• webpack-dev-server是一个模块化开发的解决方案，他封装了webpack，并作为一个简易的Node.js服务器供静态开发使用。虽然起步稍微复杂一些，但是环境搭好之后，无论对于新手还是老手，开发体验提升很大，对于工程化开发有很大的帮助。
• webpack-dev-server就是一个基于Node.js和webpack的一个简易服务器，它在服务器端进行构建打包。
• webpack-dev-server代码中注入了一份runtime，来建立webpack-dev-server和客户端的联系。
• webpack-dev-server和客户端建立联系之后，可以做很多厉害的事情，比如自动刷新、热替换等。
• webpack-dev-server还提供了代理功能，代理有很多应用场景，举几个简单的例子：本地数据接口模拟、远端接口调试、分拆接口到不同的远端服务器等。
• 实际项目中，我们可以使用代理来整合前端项目和后台项目，也可以使用两个项目并行的方式来整合，也就是直接建立前端项目和后段项目的联系。这个方案对于多页应用更具有通用性。
• webpack-dev-server还有一些自己的配置项。

参考文章：