一：热更新HMR：

概念：Webpack 热更新的机制存在，则是修改了代码，不会导致刷新，而是保留现有的数据状态，只将模块进行更新替换。也就是说，既保留了现有的数据状态，又能看到代码修改后的变化。
比如：路由的更新；页面切换，不会造成原始变量的丢失

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugn = require('clean-webpack-plugin')
module.exports = {
  mode: '',
  entry: {},
  output: {},
  rules: [{
  }],
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'   
    })  ,
    new CleanWabpackPlugin(),    
    new webpack.HotModuleReplacementPlugin();  // 配置热更新插件
  ],
  devServer: {
    contentBase: './dist',
    open: true,
    hot: true,  // 热跟新开启
    proxy: {
      '/api': {
        target: '',
        changeOrigin: true,
        pathRewrite: {}
      }
    }
  }
}

二：js里的热跟新：

// 在index.js 模块中判断引入模块代码的变化  只有引入的模块发生变化才能实现热跟新
// 在其他的地方都将刷新页面
import number from './js/number.js'
number();
// console.log(test)  刷新页面
// 判断是否是热更新
if(module.hot) {
  module.hot.accept('./number', () => {
    // 监听如果’./nuumber‘ 文件发生变化则调用回调
    const oldDiv = documnet.getElementById('number');
    document.body.remove(oldDiv)  // 删除原先旧的div
    number()  // 执行函数在新添加一个节点
  })
}

function number () {
  const oDiv = document.createElement('div');
  oDiv.id = 'number';
  oDiv.innerText = 88;
  document.body.appendChild(oDiv);
}
export default number;

三：babel：打包ES6代码；

1、import ‘@bael/polyfill’; 解决map，promise的新特性等的函数的处理
在当前 的业务代码中处理es6新特性函数


加入useBuiltIns: ‘usage’: 按需处理es6新特性函数；

2、配置处理es6代码：

module.exports = {
  mode: 'development',
  entry: {},
  output: {},
  module: {
    rules: [  // 配置规则
      {
        test: /\.js$/,
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        },
        exclude: /node_modules/,
      }
    ],
  },
  devServer: {}
}

3、、如果想开发一个第三方的类库需配置一个插件：

4、在文件根目录下创建一个.babelrc 文件， 防止都在webpack里配置，显得乱
在webpcak中的babel-loader, 不需要配置options了， 在babelrc文件中配置；

module.exports = {
  mode: 'development',
  entry: {
    main: './index.js'  // 打包入口文件
  },
  output: {
    filename: 'boudle.js',  // 打包后的js文件名、
    path: path.resolve(__dirname, 'dist'),   // 打包后js放入的文件夹
    publicPath: 'http:// csdn.com.cn',   // 在引入的src前面加上src: 'http://csdn.com'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,  // 去除node_modules里面js文件的打包
        // options: []   在.babelrc 文件中进行配置；
      }
    ]
  },
  devServer: {
    open: true,
    contentBase: '/dist',
    proxy: {}
  }
}

.babelrc

A：处理基本的react代码：

1、presets: [[‘@babel/preset-env’] ]// @babel/preset-env: 将es6代码转换为es5代码

// 用"" 这个格式；类似JOSN格式；如下图：

@bebel/preset-react; : 处理react代码变为es6代码；在交由@babel/preset-env:将es6代码转换为es5代码；

B：处理基本的Vue代码：

1、配置vue-loader
2、配置VueLoaderPlugin（）；
3、处理css, 配置： vue-style-loader

module.exports = {
  mode: 'development',
  module: {
    rules: [
      {
        test: /.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /.css$/,
        use: ['vue-loader', 'css-loader', 'postcss-loader'],  // 处理vue中style代码块
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
    }),
    new CleanWebpackPlugin(),
    new VueLoaderPlugin(),
  ]
}

四：打包react和vue文件的配置：