HMR :hot module replacement 热模块替换
作用：一个模块发生变化，只会重新打包这一个模块（而不是打包所有模块）
极大地提升构建速度

样式文件：可以使用HMR功能：因为style-loader内部实现了<br />    js文件：默认没用HMR功能 -->需要修改js代码，添加支持HMR功能的代码<br />    注意：HMR功能对js的处理，只能处理非入口js文件的其他文件<br />    html文件：默认不能使用HMR功能，同时会导致问题：html文件不能热更新了<br />    解决：修改entry入口，将html文件引入

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')

module.exports = {
    entry:['./src/js/index.js','./src/index.html'],
    output:{
        filename:'js/built.js',
        path:resolve(__dirname,'build')
    },
    module:{
        rules:[
            //loader配置
            {
                //处理less资源
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            },
            {
                //处理css资源
                test:/\.css$/,
                use:['style-loader','css-loader']
            },
            {
                //处理图片资源
                test:/\.(jpg|png|gif)$/,
                loader:'url-loader',
                options:{
                   limit:8*1024,
                   name:'[hash:10].[ext]',
                   //关闭es6模块
                //    esModule:false,
                //输出文件到imgs文件夹
                   outputPath:'imgs'
                }
            },
            {
                //处理html中的img资源
                test:/\.html$/,
                loader:'html-loader'
            },
            {
                //处理其他资源
                exclude:/\.(html|js|css|less|jpg|png|gif)$/,
                loader:'file-loader',
                options:{
                   name:'[hash:10].[ext]',
                   //输出文件到media文件夹
                   outputPath:'media'
                }
            },
        ]
    },
    plugins:[
        //plugins的配置
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        })
    ],
    mode:'development',
    devServer:{
        contentBase:resolve(__dirname,'build'),
        compress:true,
        port:8080,
        open:true,
        //开启HMR功能
        //当修改了webpack配置，想要新配置生效，必须重启webpack服务
        hot:true
    }
}

非入口js文件 print.js

console.log('print文件被加载了')

function print(){
    const content = 'hello print'
    console.log(content)
}

export default print

入口js文件 index.js

import print from './print'

import '../css/iconfont.css'
import '../css/index.less'

console.log('dbauibdasbdu')

function add(a,d){
    return a+d
}
console.log(add(5,8))

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