Webpack 入门七：本地开发服务器

在之前的所有篇幅里，我们每次更改一个文件，都要自己去启动 http-server, 再刷新浏览器，我们希望每次保存代码后自动刷新，这样可以节约点击刷新浏览器的时间 --- 呵呵，懒到极致了。

恰好 Webpack 给我们提供了一个可选的本地开发服务器插件 webpack-dev-server，它是一个小型的 Node.js Express服务器,它使用 webpack-dev-middleware 来服务于 webpack 的包,除此之外，它还有一个通过 Sock.js 来连接到服务器的微型运行时.

一、安装

接上一篇的代码, 先来安装一下 webpack-dev-server, 本篇指定了版本为2.11.1

$ npm i webpack-dev-server@2.11.1 -D

安装好以后，执行命令：

$ webpack-dev-server

不带参数运行 webpack-dev-server 命令，默认会读取 webpack.config.js 进行打包，也可以通过 -config 来指定配置文件。

二、参数

所有的 Webpack 命令接受的参数，webpack-dev-server 都可以接受，除此之外，我们还可以向 webpack-dev-server 传递额外的参数，webpack-dev-server 命令行相关配置项如下：

content-base：指定请求的根路径；
host：指定服务器鉴定的地址可以是IP地址或者域名，当值为 0.0.0.0时，可以监听一台机器的所有IP地址，如 127.0.0.1 或机器在局域网中的IP地址；
port：指定服务器监听的端口号。
compress：启用 gzip 压缩； -inline：自动将 Socket.IO 代码注入到打包后的文件中，启用该选项，当文件内容改变时可以自动刷新浏览器。

三、应用

我们将 module.js 中的改为： module.exports = '这里是更改后的模块内容' 不用刷新浏览器，更改后的内容就显示在浏览器了。

现在 webpack-dev-server 的配置放到 webpack.config.js 中。

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: './main.js',
  output: {
    path: __dirname + '/dist', // 将输出放到dist文件夹
    filename: 'app-[hash].js'
  },
  devServer: {
    contentBase: './dist',
    host: '127.0.0.1',
    port: 8080,
    inline: true,
    compress: false
  },
  module: {
    rules: [
      { test: /\.css$/, 
        use: ExtractTextPlugin.extract({
          use: ['css-loader'], // 转换 .css 文件需要使用的 Loader
        }),
      }
    ]
  },
  plugins: [
    new webpack.BannerPlugin('版权所有，翻版必究'),
    new HtmlWebpackPlugin({
            template: __dirname + "/index.html" //new 一个这个插件的实例，并传入相关的参数
        }),
    new ExtractTextPlugin({
      filename: `[name]_[contenthash:8].css` // 从 .js 文件中提取出来的 .css 文件的名称
    }),
  ],
}

启动 webpack-dev-server 后，打开浏览器输入127.0.0.1:8080, 观察一下效果。

最后把 webpack-dev-server 命令加入到 package.json 的 script 脚本中，如下：

{
  "name": "config-demo",
  "version": "1.0.0",
  "description": "A simple webpack example for config",
  "main": "main.js",
  "scripts": {
    "start": "webpack-dev-server --open", // 自动打开浏览器
    "test": "echo \\\"Error: no test specified\\\" && exit 1"
  },
  "keywords": [
    "webpack"
  ],
  "author": "Felix",
  "license": "MIT",
  "devDependencies": {
    "css-loader": "^0.28.10",
    "extract-text-webpack-plugin": "^3.0.2",
    "html-webpack-plugin": "^3.0.4",
    "style-loader": "^0.20.2",
    "webpack": "^3.11.0",
    "webpack-dev-server": "^2.11.1"
  }
}

执行 npm start 命令，即可开启 webpack-dev-server 服务。

本实例源码

felix-cao / Blog