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
  },
  ...
};