webpack 3 零基礎入門教程 #7 - webpack-dev-server 就是這麼簡單

如今咱們來學習一個最經常使用的插件 webpack-dev-server，通常來講，這個插件，你們都會用，特別是開發環境下。

咱們以前使用 webpack -d --watch 來在開發環境下編譯靜態文件，可是這個功能，徹底能夠用 webpack-dev-server 來代替。

除此以外， webpack-dev-server 還有其餘的功能，好比在本地上開啓服務，打開瀏覽器等。

這節咱們主要來簡單體驗一下 webpack-dev-server 的功能。

# 先全局安裝
$ npm install -g webpack-dev-server
$ npm install --save-dev webpack-dev-server
複製代碼

而後運行命令：

$ webpack-dev-server
複製代碼

如今咱們用瀏覽器打開 localhost:8080 也能夠看到之前的效果。

下面是編譯後的源碼。

默認是運行在 8080 端口，這個咱們能夠改。

webpack.config.js

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

module.exports = {
  entry: './src/app.js',
  ...
  devServer: {
    port: 9000
  },
  ...
};
複製代碼

咱們還能夠配置一運行 webpack-dev-server 的時候就自動打開瀏覽器。

webpack.config.js

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

module.exports = {
  entry: './src/app.js',
  ...
  devServer: {
    port: 9000,
    open: true
  },
  ...
};
複製代碼

之後都會一直用 webpack-dev-server 的啦。

先這樣吧。