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

不懂程式設計發表於2017-12-07
WebdevServer

現在我們來學習一個最常用的外掛 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
複製程式碼

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

現在我們用瀏覽器開啟 localhost:8080 也可以看到以前的效果。

下面是編譯後的原始碼。

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

預設是執行在 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 的啦。

先這樣吧。

相關文章