webpack4-04-配置devServer服務器，熱更新、熱替換

配置devServer服務器、熱更新

在實際開發過程當中，咱們但願每次修改文件都會幫咱們自動的刷新修改的頁面或者部分被修改的內容，讓開發更加高效，因此咱們就須要爲咱們的項目提供一個簡單的web服務器（webpack-dev-server），該服務器可以實現時從新加載(live reloading)、熱替換的功能。

安裝

npm i webpack-dev-server -D
複製代碼

修改 webpack.config.js

...
const webpack = require('webpack')  // 新增

const resolve = (dir) =>  path.resolve(__dirname, dir)
module.exports = {
  mode: 'development',
  entry: {
    ...
  },
  output: {
    ...
  },
  devServer: {                  // 新增
    open: true,                 // +
    hot: true,                  // +
    port: 3002,                 // +
    publicPath: '/'             // +
    contentBase: './dist'       // +
  },                            // 新增
  module: {
    ...
  },
  plugins: [
    ...
    new webpack.NamedModulesPlugin(),           // +
    new webpack.HotModuleReplacementPlugin()    // +
  ]
} 
複製代碼

• 在配置中新增devServer選項

1. open：服務器啓動成功後，將自動打開瀏覽器
2. hot：啓用模塊熱替換功能（備註①）
3. port：指定要監聽的端口號
4. publicPath：將用於肯定應該從哪裏提供資源、此路徑下的打包文件可在瀏覽器中訪問，優先級高於contentBase
5. contentBase：告訴服務器從哪裏提供內容。
6. .....更多參數請前往官網

備註①：在配置文件中開啓hot時，須要配合HotModuleReplacementPlugin才能徹底啓用HMR。 若是使用package.json內聯--hot選項啓動webpack或webpack-dev-server，則會自動添加此插件，所以您可能不須要將其添加到webpack.config.js。

內聯以下：

{
    ...
    "scripts": {
        "serve": "npx webpack-dev-server --hot --config ./build/webpack.config.js"
    }
    ...
}
複製代碼

• 新增webpack內置插件

1. NamedModulesPlugin：在熱加載時直接返回更新文件名，而不是文件的id。
2. HotModuleReplacementPlugin：熱替換插件

修改 package.json

在scripts中添加serve選項，以下:

{
  "name": "lesson-04",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "serve": "npx webpack-dev-server --config ./build/webpack.config.js",
    "dev": "npx webpack --config ./build/webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.4.4",
    "@babel/polyfill": "^7.4.4",
    "@babel/preset-env": "^7.4.4",
    "autoprefixer": "^9.5.1",
    "babel-loader": "^8.0.5",
    "clean-webpack-plugin": "^2.0.1",
    "css-loader": "^2.1.1",
    "dart-sass": "^1.19.0",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^3.2.0",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.3.1"
  }
}
複製代碼

運行serve

npm run serve
複製代碼

便可自動打開瀏覽器，啓動咱們的項目。。

項目地址

源碼地址點擊這GitHub