轉載請注明 來源:http://www.eword.name/
Author：eword
Email:eword@eword.name

webpack開發環境優化： HMR 熱加載功能

• HMR:hot module replacement 熱模塊替換/模塊熱替換
• 作用：一個模塊發生變化，只會重新打包這一個模塊（而不是打包所有模塊），極大提升構建速度。
• 樣式文件：可以使用HMR功能：因為style-loader內部實現了~
• js文件：默認不能使用HMR功能?！拘枰薷膉s代碼，添加支持HMR功能的代碼】
  • 注意：HMR功能對js的處理，只能處理非入口js文件的其他文件。
• html文件：默認不能使用HMR功能（不用做HMR功能）。
  • 問題：同時會導致html文件不能熱更新了~
  • 解決：修改entry入口；將html文件引入

一、核心配置

在 devServer 配置中開啟 HMR 功能

/*
    開發環境配置，能讓代碼運行。

    webpack.config.js webpack的配置文件
    作用:指示webpack干哪些活(當你運行webpack指令時,會加載里面的配置)
    所有構建工具都是基于nodejs平臺運行的~模塊化默認采用commonjs.
    loader: 1.下載 2.使用(配置loader)
    plugins: 1.下載2. 引入 3.使用

    路徑： ./webpack.config.js
*/

// resolve用來拼接絕對路徑的方法
const { resolve } = require('path');
// 引入打包 html 文件的插件 html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {
    // webpack配置
    // 入口起點文件
    entry: ['./src/js/index.js','./src/index.html'],
    // 輸出
    output: {
        // 輸出文件名
        filename: 'js/built.js',
        // 輸出路徑
        // __dirname nodejs的變量,代表當前文件的目錄絕對路徑
        path: resolve(__dirname, 'build'),
    },
    // loader的配置
    module: {
        rules: [
            // 詳細loader配置
            //不同文件必須配置不同loader處理

            //打包less 文件的詳細loader配置
            {
                //匹配哪些文件
                test: /\.less$/,
                //使用哪些loader進行處理
                use: [
                    // use數組中loader執行順序:從右到左,從下到上依次執行
                    //創建style標簽,將js中的樣式資源插入進行,添加到head中生效
                    'style-loader',
                    //將css文件變成commonjs模塊加載js中,里面內容是樣式字符串
                    'css-loader',
                    //將less文件編譯成css文件
                    //需要下載less-loader和less
                    'less-loader'
                ]
            },
            // 打包 css 文件的詳細loader配置
            {
                // 匹配哪些文件
                test: /\.css$/,
                // 使用哪些loader進行處理
                use: [
                    // use數組中loader執行順序:從右到左,從下到上依次執行
                    // 創建style標簽,將js中的樣式資源插入進行,添加到head中生效
                    'style-loader',
                    // 將css文件變成commonjs模塊加載js中,里面內容是樣式字符串
                    'css-loader',
                ],
            },
            {
                // 問題：默認處理不了 html 中的 img 圖片
                // 處理圖片資源
                test: /\.(jpg|png|gif)$/,
                // 使用一個loader
                // 下載url-loader file-loader
                loader: 'url-loader',
                options: {
                    // 圖片大小小于8kb,就會被base64處理
                    // 優點:減少請求數量(減輕服務器壓力)
                    // 缺點:圖片體積會更大(文件請求速度更慢)
                    limit: 8 * 1024,
                    // 問題:因為url-loader默認使用es6模塊化解析, 而html-loader默認引入圖片是commonjs
                    // 解析時會出問題: [object Module]
                    // 解決:關閉url-loader的es6模塊化,使用commonjs解析
                    esModule: false,
                    // 給圖片進行重命名
                    // [hash:10]取圖片的hash的前10位
                    // [ext]取文件原來擴展名
                    name: '[hash:10].[ext]',
                    // 設置輸出目錄，將打包的圖片資源放到imgs文件夾
                    outputPath: './imgs',
                },
            },
            {
                test: /\.html$/,
                // 處理html文件的img圖片(負責引入img,從而能被url-loader進行處理)
                loader: 'html-loader',
                options:
                {
                    // 默認情況下,生成使用ES塊語法的Js模塊
                    // 問題:生成的圖片顯示錯誤
                    // 解決: esModule改為false
                    esModule: false,
                },
            },
            {
                // 打包其他資源(除了html/js/css資源以外的資源)
                // 排除css/is/html資源
                exclude: /\.(css|js|html|less|jpg|png|gif)$/,
                loader: 'file-loader',
                options:
                {
                    // 給資源進行重命名
                    // [hash:10]取資源的hash的前10位
                    // [ext]取文件原來擴展名
                    name: '[hash:10]. [ext]',
                    // 設置輸出目錄，將打包的其他資源放到media 文件夾
                    outputPath: './media',
                },
            },
        ],
    },
    // plugins的配置
    plugins: [
        // 詳細的plugins配置
        // html-webpack-plugin
        // 功能:默認會創建一個空的HTML, 自動引入打包輸出的所有資源(JS/CSS)
        // 需求:需要有結構的HTML文件
        new HtmlWebpackPlugin({
            // 復制../src/index.html'文件,并自動引入打包輸出的所有資源(JS/CS5)
            template: './src/index.html',
        }),
    ],
    // 模式  development  開發環境，production 生產環境
    mode: 'development',
    // 生產環境下會自動壓縮js代碼
    // mode: 'production'

    // 開發服務器devServer:用來自動化(自動編譯, 自動打開瀏覽器, 自動刷新瀏覽器)
    // 特點:只會在內存中編譯打包,不會有任何輸出
    // 啟動devServer指令為: npx webpack-dev-server
    devServer: {
        // 項目構建后路徑
        contentBase: resolve(__dirname, 'build'),
        // 啟動gzip壓縮
        compress: true,
        // 端口號
        port: 3000,
        // 自動打開瀏覽器
        open: true,
        // 開啟 HMR 功能
        // 當修改了 webpack 配置，新配置要生效，必須重新啟動 webpack devServer
        hot: true,
    },
};

核心配置

    // 開發服務器devServer:用來自動化(自動編譯, 自動打開瀏覽器, 自動刷新瀏覽器)
    // 特點:只會在內存中編譯打包,不會有任何輸出
    // 啟動devServer指令為: npx webpack-dev-server
    devServer: {
        // 項目構建后路徑
        contentBase: resolve(__dirname, 'build'),
        // 啟動gzip壓縮
        compress: true,
        // 端口號
        port: 3000,
        // 自動打開瀏覽器
        open: true,
        // 開啟 HMR 功能
        // 當修改了 webpack 配置，新配置要生效，必須重新啟動 webpack devServer
        hot: true,
    },

二、解決html不熱更新的問題

• html文件：默認不能使用HMR功能（不用做HMR功能）。
  • 問題：同時會導致html文件不能熱更新了~
  • 解決：修改entry入口；將html文件引入

……
    // 入口起點文件
    // 修改entry入口；將html文件引入，解決開啟 HMR 后，html 不熱更新的問題。
    entry: ['./src/js/index.js','./src/index.html'],
……

三、解決js文件HMR不生效問題

• js文件：默認不能使用HMR功能。【需要修改js代碼，添加支持HMR功能的代碼】
  • 注意：HMR功能對js的處理，只能處理非入口js文件的其他文件。
  • 原因：一旦入口文件被修改，便會加載其導入的其他 js 文件。

## 工程目錄如下
.
├── src
│   ├── css
│   │   ├── iconfont.css
│   │   └── index.less
│   ├── imgs
│   │   ├── img.jpg
│   │   ├── img1.jpg
│   │   ├── img2.jpg
│   │   └── img3.jpg
│   ├── index.html
│   ├── js
│   │   ├── iconfont.js
│   │   ├── index.js             //入口文件，加載了 myprint.js 依賴
│   │   └── myprint.js         //用來做HMR熱加載使用的 js 文件
│   └── media
│       ├── iconfont.json
│       └── iconfont.ttf
└── webpack.config.js

// myprint.js 文件
//  ./src/js/myprint.js
console.log('myprint.js文件被加載了。');

function myprint(){
    const content= 'hello myprint..**';
    console.log(content);
}

export default myprint;

// js主入口文件 index.js 
//  ./src/js/index.js

//入口文件

import myprint from './myprint';

//引入 iconfont 樣式文件
import('../css/iconfont.css');
import('../css/index.less');
import('./myprint');

console.log('index.js 文件被加載了');

myprint();

function add(x, y) {
    return x + y;
}

console.log(add(1, 2));

if (module.hot) {
    // -旦 module.hot 為true，說明開啟了HMR功能。
    // 讓HMR功能代碼生效
    module.hot.accept('./myprint.js'), function () {
        // 方法會監聽 myprint.js 文件的變化，一旦發生變化，其他模塊不會重新打包構建。
        // 會執行后面的回調函數
        myprint();
    }

}

核心配置

// 在 index.js 文件中加入如下 hot 判斷，解決 js開啟 HMR 后不生效的問題。
……
if (module.hot) {
    // -旦 module.hot 為true，說明開啟了HMR功能。
    // 讓HMR功能代碼生效
    module.hot.accept('./myprint.js'), function () {
        // 方法會監聽 myprint.js 文件的變化，一旦發生變化，其他模塊不會重新打包構建。
        // 會執行后面的回調函數
        myprint();
    }
……

四、執行測試

> npx webpack-dev-server