webpack 之开发环境优化 HMR

webpack 之开发环境优化 HMR

// webpack.config.js
/**
 * HMR hot module replacement 热模块替换 / 模块热替换
 *  作用：一个模块发生变化，只会重新打包这一个模块（而不是打包所有模块）
 *      极大提升构建速度
 *      
 * 
 *      样式文件：可以使用 HMR 功能：因为 style-loader 内部实现了
 *      js 文件：默认不能使用 HMR 功能  --> 需要修改js代码，添加支持HMR功能的代码
 *          注意：HMR 功能对js的处理，只能处理菲入口js文件的其他文件
 *      html文件：默认不能使用 HMR 功能，同时会导致问题：html 文件不能热更新了
 *          解决：修改entry入口，将html文件引入
 */


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

// 代码复用loader
const commonCssLoader = [
    // 创建 style 标签，将js中的样式资源插入进行，添加到 head 中生效
    'style-loader', 
    // 将css文件变成commonjs 模块加载js中， 里面内容是样式字符串
    'css-loader'
]

module.exports = {
    // webpack 配置
    // 入口起点
    entry : ['./src/index.js', './src/index.html'],
    // 输出
    output : {
        // 输出文件名
        filename : 'js/built.js',
        // 输出路径
        path : resolve(__dirname, 'dist')
    },
    // loader 配置
    module : {
        rules : [
            {
                test : /\.css$/, // 匹配哪些文件
                //使用哪些 loader 进行处理
                use: [ 
                    // use 数组中的 loader 执行顺序：从右到左，从下到上依次执行
                    ...commonCssLoader
                ]
            },
            {
                test : /\.less$/, 
                use: [ 
                    ...commonCssLoader,
                    'less-loader'
                ]
            },
            {
                test : /\.html$/,
                loader : 'html-loader'
            }
        ]
    },
    // plugins 的配置
    plugins : [
        // 详细 plugins 的配置
        // html-webpack-plugin
        // 功能：默认会创建一个空的html文件，自动引入打包输出的所有资源（js/css）
        new HtmlWebpackPlugin({
            // 增加一个配置
            // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（js/css）
            template : './src/index.html',
        }),
    ],
    //模式
    mode : 'development', // 开发模式
    // mode : 'production' // 生产模式
    devServer: {
        // 项目构建后的路径
        contentBase : resolve(__dirname, 'dist'),
        // 启动 gzip 压缩
        compress : true,
        // 端口号
        port : 3000,
        // 自动打开本地默认浏览器
        open : true,
        // 开启 HMR 功能
        hot: true
    }
}

// index.js
import print from './print.js'
import './index.css'

const add = (x, y) => x + y;

console.log('add(1, 2)', add(1, 2));
console.log('"object"', "object")

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