webpack的HMR功能 模块热加载功能

webpack.config.js

/**
 *  所有构建工具都是基于nodejs平台运行的，模块化默认采用commonjs
 *  运行项目指令
 *  webpack 会打包结果输出
 *  npx webpack-dev-server 只会在内存中编译打包，没有输出
 *
 *  HMR: hot module replacement 热模块替换 / 模块热替换
 *   作用： 一个模块发生变化，只会重新打包这一个模块。
 *      极大提升构建速度。
 *
 *      样式文件： 可以使用HMR功能，因为style-loader内部实现了。
 *      js文件： 默认不能使用HMR功能。（需要修改js代码，添加支持HMR功能的代码）
 *        注意： HMR功能对js的处理，只能处理非入口js文件的其它文件。
 *      html文件： 默认不能使用HMR功能。问题：html文件不能热更新了。(不用做 HMR 功能)
 *      解决： 修改 entry入口，将html文件引入
 **/
// resolve 用来拼接绝对路径的方法
const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    // webpack 配置
    // 入口
    // entry: './src/js/index.js',
    // 解决 html文件 的HMR 问题
    entry: ['./src/js/index.js', './src/index.html'],
    // 输出
    output: {
        // 输入文件名
        filename: 'js/build.js',
        // 输出路径
        // __dirname nodejs的变量，代表当前文件的目录绝对路径
        // build 路径
        path: resolve(__dirname, 'build')
    },
    // loader 配置
    module: {
        rules: [
            // 详细loader配置
            {
                // 匹配那些文件
                test: /\.css$/,
                // 使用哪些loader处理
                use: [
                    // 执行顺序，从右到左，从下到上，依次执行
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    // 需要less-loader + less
                    'less-loader'
                ]
            },
            {
                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的es模块化，使用commonjs解析
                    esModule: false,
                    // 给图片重命名
                    // [hash:10] 图片的hash的前10位
                    // [ext] 文件原来扩展名
                    name: '[hash:10].[ext]',
                    outputPath: 'imgs'
                }
            },
            {
                test: /\.html$/,
                // 处理html文件的img图片 负责引入img，从而能被url-loader进行处理
                loader: 'html-loader'
            },
            {
                //处理其它资源
                exclude: /\.(html|js|css|less|jpg|png|gif)/,
                loader: 'file-loader',
                options: {
                    name: '[hash:10].[ext]',
                    outputPath: 'media'
                }
            }
        ]
    },
    // 插件
    plugins: [
        // html-webpack-plugin
        // 默认创建一个空的html， 引入打包输出的所有资源（js/css）
        // 需要有结构的html文件
        new HtmlWebpackPlugin({
            // 复制文件,并自动引入打包输出的所有资源（js/css）
            template: "./src/index.html"
        })
    ],
    // 模式 development 开发， production 生产
    mode: 'development',

    // 开发服务器 devServer，用来自动化
    // 特点：只会在内存中编译打包，不会有任何输出
    // 启动devServer指令为： npx webpack-dev-server
    devServer: {
        contentBase: resolve(__dirname, 'build'),
        // 启动gzip 压缩
        compress: true,
        port: 3000,
        // 自动打开浏览器
        open: true,
        // 开启HMR功能
        // 当修改了webpack配置，新配置要想生效，必须重启webpack服务
        hot: true
    }
}

index.js

import print from './print';

import '../css/a.css';
import '../css/b.css';

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


print();

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

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


// 模块 HMR
if(module.hot){
    // 一旦 module.hot为true，说明开启了HMR功能。 让HMR功能代码生效
    module.hot.accept('./print.js', function () {
        // 方法会监听 print.js文件的变化，一旦发生变化，其它默认不会重新打包构建
        // 会执行后面的回调函数
        print();
    })
}

print.js

console.log('print.js被加载了~');
function print() {
    const content = 'hello print';
    console.log(content);
}

export default print;