2020-11-26 Hot Module Replacemen

Hot Module Replacement 热模块更新（1）
简写HMR

      //修改package.json中的scripts
      //"script":{
      //   "start":"webpack-dev-server",
      // }

      //webpack.config.js中增加css loader

      //npm run start打包
      //未生成dist目录

      //实际上webpack-dev-serve还是会帮助我们对src下的目录进行打包，
      //但是打包生成的文件并没有放在dist目录下
      //而是放在放到了我们电脑的内存里面
      //这样可以有效的提升打包速度
      //这是webpack-dev-serve隐藏的一个特性

      //src文件下的index.js写些代码
      //es5的代码

      //import './style.css'

      //var btn = document.createElement('button')
      //btn.innerHTML = '新增'
      //documnet.body.appendChild(btn);

      //btn.onclick = function(){
      //  var btn = document.createElement('div')
      //  div.innerHTML = 'item'
      //  documnet.body.appendChild(div);
      //}

      //源代码改变
      //webpack-dev-server会帮助重新打包，重新刷新界面
      //希望当改变样式代码的时候，不要去刷新页面，把样式代码去替换掉就行了
      //可以借助HMR的功能

      // webpack.config.js中
      //引入webpack

      //  devServe:{
      //   contentBase:'./dist', //服务器起到哪个文件夹下
      //   open:true, 
      //   port:8080, 
      //   hot:true, 
      //   hotOnly:true
      // },

      //  hot:true, //让我们的webpack-dev-server开启Hot Module Replacement这样一个功能
      //  hotOnly:true //即便是HMR的功能没有生效，我也不让浏览器自动的重新刷新

      //new webpack.HotModuleReplacementPlugin()

      //改变webpack配置之后，一定要重启命令

      HMR好处
      当我们写css的时候方便我们调试css
      在js里面，
      两个模块，
      一个模块的数据变更不会影响另一个


      //src的index.js中
      //import counter from './counter';
      //import number from './number';

      //counter不变，number重新来执行

      if(module.hot){ //如果当前的项目你开启了HMR的功能
        module.hot.accept('./number',()=>{ //如果number发生了变化，我就会执行后面的函数
        //假设之前的number发生了变化，我把之前的number元素移除掉，
        //再重新执行一下number元素
          documnet.body.removeChild(documnet.getElementById('number'))
          number()  //让number重新执行一下
        })
      }

      //当你在代码里面去引入其他的模块的时候，
      //如果你希望这个模块的代码发生变化，
      //我只去更新这个模块的这部分的代码，
      //那就要用到HMR这样的技术了
      //要想使用HMR，
      //再webpack.config.js中添加配置项
      //   hot:true, 
      //   hotOnly:true 
      // new webpack.HotModuleReplacementPlugin()

      
      //hotOnly:true 可配可不配
      //如果你不配，如果HMR出了问题，webpack-dev-server会自动的帮你重新刷新一下页面
      //不希望它重新帮你刷新页面，写成true就可以了
      //意思就是HMR失效的时候，就让它失效，不要做其它额外的处理

      //css-loader内置了module.hot.accept这样的功能，所以样式引入不需要写

      //

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');  //引入webpack

module.exports = {
  mode:'development', //开发者模式，默认SourceMap已经被配置进去了
  devtool:'cheap-module-eval-source-map',
  entry:{
    main:'./src/index.js',
  },
  devServe:{
    contentBase:'./dist', //服务器起到哪个文件夹下
    open:true, 
    port:8080, 
    hot:true, //让我们的webpack-dev-server开启Hot Module Replacement这样一个功能
    hotOnly:true  //即便是HMR的功能没有生效，我也不让浏览器自动的重新刷新
  },
  module: {
    rules: [
      {
        test: /\.(jpg|png|gif)$/,
        use:{
          loader:'url-loader',
          options:{
            name:'[name]_[hash].[ext]', 
            outputPath:'images/',
            limit:2048                  
          }
        }
      },
      {
        test: /\.(eot|ttf|svg)$/,
        use:{
          loader: 'file-loader',
        } 
      },
      {
        test: /\.scss$/,
        use:[
          'style-loader',
          {
            loader:'css-loader',
            options:{
              importLoaders:2
            }
          },
          
          'scss-loader',
          'postcss-loader'
          ] 
      },
      {
        test: /\.css$/,
        use:[
          'style-loader',
          'css-loader',
          'postcss-loader'
          ] 
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template:'src/index.html'
    }),
    new HtmlWebpackPlugin(['dist'])],
    new webpack.HotModuleReplacementPlugin(), //添加新的插件
  output:{
        filename:'bundle.js',
        path:path.resolve(_dirname,'dist')
  }
}