webpack热更新

热更新

只有更新某个模块的时候，只更新该部分，不刷新页面，是一种增量的更新
webpack.config.js

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let webpack = require('webpack');
// 模块happypack

module.exports = {
    entry: {
        index: './src/index.js',
    },
    mode:'production',
    devServer: {
        port: 3000,
        hot: true,
        open: true,
        contentBase: './dist',
    },
    module: {
        // noParse: /jquery/,  // 不去解析jquery中的依赖关系，
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                include: path.resolve('./src/'),
                use: [{
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            '@babel/preset-env',
                            '@babel/preset-react'
                        ],
                        plugins: [
                            '@babel/plugin-syntax-dynamic-import'
                        ]
                    }
                }]

            }
        ]
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new webpack.IgnorePlugin(/\.\/locale/, /moment/),
        new HtmlWebpackPlugin({
            template: './public/index.html',
            filename: 'index.html',
        }),
        new webpack.NamedModulesPlugin(),   // 打印更新的模块路径
        new webpack.HotModuleReplacementPlugin(), //热更新插件
    ]
};

index.js

import str from './other';
console.log(str);
console.log(module.hot);
if (module.hot) {
    module.hot.accept('./other',  () => {
        console.log('文件更新了');
    })
}