webpack学习第八步——Hot Module Replace

修改css样式

• 修改index.js

import './style.css'

var btn = document.createElement('button')
btn.innerHTML = '新增'
document.body.appendChild(btn)
btn.onclick = function() {
    var div = document.createElement('div')
    div.innerHTML = 'item'
    document.body.appendChild(div)
}

• 增加style.css

div:nth-of-type(odd) {
    background: yellow;
}

• 修改webpack.congfig.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
    mode: "development",
    entry: "./src/index.js",
    devtool: "source-map",
    devServer: {
        contentBase: './build',
        open: true,
        port: 1314
    },
    module: {
        rules: [{
            test: /\.(jpg|png|gif)$/,
            use: {
                loader: "url-loader",
                options: {
                    name: '[name]_[hash].[ext]',
                    outputPath: 'images/',
                    limit: 2048
                }
            }
        },{
            // 增加对css文件的处理
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader',
                'postcss-loader'
            ]
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
        template: 'src/index.html'
        }),
        new CleanWebpackPlugin()
    ],
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: '[name].js'
    }
}

• 启动服务器npm run start

• 此时修改css样式，浏览器会刷新重新请求localhost

css样式应用hmr

• 修改webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
// 引入webpack
const webpack = require('webpack')
module.exports = {
    mode: "development",
    entry: "./src/index.js",
    devtool: "source-map",
    devServer: {
        contentBase: './build',
        open: true,
        port: 1314,
        // 设置hot
        hot: true,
        hotOnly: true //这个表示hmr失效时也不去刷新浏览器
    },
    module: {
        rules: [{
            test: /\.(jpg|png|gif)$/,
            use: {
                loader: "url-loader",
                options: {
                    name: '[name]_[hash].[ext]',
                    outputPath: 'images/',
                    limit: 2048
                }
            }
        },{
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader',
                'postcss-loader'
            ]
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
        template: 'src/index.html'
        }),
        new CleanWebpackPlugin(),
        // 使用hmr插件
        new webpack.HotModuleReplacementPlugin()
    ],
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: '[name].js'
    }
}

• 修改css样式,浏览器不会刷新，也不会请求localhost,样式会直接刷新

js代码变更

• webpack.config.js中不使用HotModuleReplace

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const webpack = require('webpack')
module.exports = {
    mode: "development",
    entry: "./src/index.js",
    devtool: "source-map",
    devServer: {
        contentBase: './build',
        open: true,
        port: 1314,
        // hot: true,
        // hotOnly: true
    },
    module: {
        rules: [{
            test: /\.(jpg|png|gif)$/,
            use: {
                loader: "url-loader",
                options: {
                    name: '[name]_[hash].[ext]',
                    outputPath: 'images/',
                    limit: 2048
                }
            }
        },{
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader',
                'postcss-loader'
            ]
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
        template: 'src/index.html'
        }),
        new CleanWebpackPlugin(),
        // new webpack.HotModuleReplacementPlugin()
    ],
    output: {
        publicPath: "/",
        path: path.resolve(__dirname, 'build'),
        filename: '[name].js'
    }
}

• 修改index.js

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

• 创建counter.js

function counter() {
    var div = document.createElement('button')
    div.setAttribute('id','counter')
    div.innerHTML = 1
    div.onclick = function () {
        div.innerHTML = parseInt(div.innerHTML,10) + 1
    }
    document.body.appendChild(div)
}

export default counter

• 创建number.js

function number() {
    var div = document.createElement('div')
    div.setAttribute('id','number')
    div.innerHTML = 12000
    document.body.appendChild(div)
}

export default number

• 运行npm run start

• 修改number.js,浏览器自动刷新,button里的数字也被重置了

js HMR

• 修改webpack.config.js

devServer: {
    contentBase: './build',
    open: true,
    port: 1314,
    // 打开hot设置
    hot: true,
    hotOnly: true
},

plugins: [
    new HtmlWebpackPlugin({
    template: 'src/index.html'
    }),
    new CleanWebpackPlugin(),
    // 使用HMR插件
    new webpack.HotModuleReplacementPlugin()
],

• 但这个时候修改js文件并不会有变化，还需要对index.js做修改

import counter from './counter'
import number from './number'
counter()
number()
// 监听hot，如果number文件发生变化则重新执行
if(module.hot) {
    module.hot.accept('./number',() => {
        document.body.removeChild(document.getElementById('number'))
        number()
    })
}

• 修改number.js不会影响 button 上的数字,只有 number 发生变化

  
  

为什么css的HMR不需要写module.hot之类的，但是js需要呢

• 因为css-loader里内置了刷新