webpack4.29.x成神之路（九） webpack-dev-server上

目錄

上節：使用loader之打包樣式下

首先刪除bundles, 刪完後目錄以下：

以前每次都要 npm run build後才能看打包後的效果，在開發階段是不可能這麼幹地，咱們須要一個能使代碼及時生效的功能。
webpack自帶的webpack-dev-server 爲你提供了一個簡單的 web 服務器，而且可以實時從新加載

基本使用

修改配置：
webpack.config.js:

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: '[name].[contenthash:8].js',
    path: resolve(__dirname, 'bundles')
  },

  // 開啓devServer
  devServer: {},

  module: {
    rules: [{
      test: /\.(gif|jpg|jpeg|png|svg)$/,
      use: ['url-loader']
    }, {
      test: /\.less$/,
      use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html'
    }),
    new CleanWebpackPlugin()
  ]
};

src/index.js:

import './styles/index.less'
window.addEventListener('DOMContentLoaded', function() {
  const root = document.getElementById('root');
  root.innerText = _.join(['hellow', 'webpack'], '~');
});

src/styles/index.less:

#root{
  color: blue;
}

修改package.json的script對象:

// 省略
"scripts": {
    "dev": "webpack-dev-server",
    "build": "webpack"
  },
// 省略

webpack-dev-server和webpack都會默認讀取根目錄下的webpack.config.js

安裝依賴：npm i webpack-dev-server -D

裝完後執行npm run dev，就會開啓一個node服務：

瀏覽器訪問：http:localhost:8080, 應出現以下頁面：

這時每次修改src/index.js，瀏覽器就會自動刷新咯。

熱模塊更新

如今修改代碼後，瀏覽器會有一個刷新的動做，若是想達到無刷新的效果，須要配置寫選項
webpack.config.js:

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: '[name].[hash:8].js',
    path: resolve(__dirname, 'bundles')
  },

  // 開啓devServer
  devServer: {
    hot: true,
    
    // 可選，即便代碼沒生效，也不刷新瀏覽器
    hotOnly: true
  },

  module: {
    rules: [{
      test: /\.(gif|jpg|jpeg|png|svg)$/,
      use: ['url-loader']
    }, {
      test: /\.less$/,
      use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html'
    }),
    new CleanWebpackPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ]
};

這時從新執行 npm run dev, 打開瀏覽器， 字體顏色應該是藍的，這時隨便換個顏色，瀏覽器就能無刷新生效了。

可是有個問題，若是改變src/index.js的代碼，瀏覽器不會有任何反應，緣由是開啓了hotOnly，若是把hotOnly去掉

devServer: {
    hot: true
  }

這時改index.less沒問題，可是改index.js，瀏覽器仍是會刷新一下，這說明改js並未實現熱更新效果。
繼續改代碼，在src下新建js目錄，並新建counter.js和number.js
src/js/counter.js:

let num = 1;
export default function counter() {
  const div = document.createElement('div');
  div.setAttribute('id', 'counter');
  div.innerText = num;
  div.onclick = function () {
    div.innerText = ++num;
  }
  document.body.appendChild(div);
}

src/js/number.js:

export default function number() {
  const div = document.createElement('div');
  div.setAttribute('id', 'number');
  div.innerText = 1000;
  document.body.appendChild(div);
}

src/index.js:

import counter from './js/counter';
import number from './js/number';
counter();
number();

而後瀏覽器運行如圖：

隨機點擊數次數字1後如圖：

此時是13和1000，而後改變number.js裏的1000，在看瀏覽器：

瀏覽器會刷新一下，1000變成了3000，可是13也重置成了1

咱們的想法是，當咱們改變number.js文件時，頁面上只改變number.js那部份內容，其它地方保持原樣，好比保持13，這時就須要再作點事情

src/index.js:

import counter from './js/counter';
import number from './js/number';
counter();
number();
 if (module.hot) {  // 若是開啓了熱更新
     module.hot.accept('./js/number', function() {
      // ./js/number變化時執行
     console.log('number updated!');
     document.body.removeChild(document.getElementById('number'));
     number();
    })
 }

這時在此點擊幾回數字1：
好比頁面上是：6和3000

再來改變number.js,把3000改爲1000，觀察瀏覽器：
此時瀏覽器沒有刷新，單頁面已經發生變化，3000變成了1000，而且上面那個數字仍是6

這裏就有個問題了,爲啥以前改less時hmr能直接生效，改js就要本身手動寫一坨邏輯呢？
那是由於style-loader底層已經幫咱們寫好了這種邏輯。

下節：webpack-dev-server下