webpack学习记录

entry和output基本配置：
        entry是打包的入口文件：
                后边是字符串路径,要打包的文件。
         默认打包的文件叫main.js 
         如果想打包两次同样的代码，可以在entry中加一个
         

 entry：{
                   main:'./src/index.js',
                   sub:'./src/index.js'
                  }

          output输出中要配置，
           

 output:{
                    filename:'[name].js'，//就是打包entry里配置的key值,name是一个占位符。
                    path:path.resolve(__dirname,"dist")//放置文件的目录名
                  }

         打包好之后想带有域名，
             

output：{
                    publicPath:"http://cdn.com.cn"//添加前缀地址，放到cdn
                 }

          当我们引入两个模块，当第二个模块改变，webpack会发送请求，第一个模块会回到初始化状态，但是我们不想影响到第一个模块，就可以在webpack.config.js中进行配置
           

devServer:{
                    contentBase:"./dist"，
                    open:true,
                    port:8080,
                    hot:true,//配置让hot等true
                    hotOnly:true//配置让hotOnly等true（可配置可不配置）当html失效是会重新渲染，这是我们想让它保持现在状态就可以使用hotOnly：true就可以了
                 }

               然后使用。
                 

 plugins:{
                         new webpack.HotModuleReplacementPlugin()//同时要使用的插件，只有配置好这个，html才能生效
                        }

                配置好就不会刷新页面，想让我们改变的数据发生变化就需要添加点代码
            //判断如果我们开启了hot模式，
           

if(module.hot){
                //当我们的number模块发生变化调用第二个参数，也就是回调函数
               module.hot.accept('./number',()=>{
                           //当number文件中发生变化，就重新调用number
                           number()
                     })
              }

              //结果就是有一个之前的结果，和最新的结果，如果我们想把之前的结果清除掉，我们找到之前渲染number的元素节点，然后删除这个节点。这样我们就是拿到最新数据之前的结果也不会再有了。
            如果我们使用的文件比较偏的话就需要这段判断代码，但是vue,react等框加人家是配置好了，所以才不用我们写。
         
    @babel/preset-env配置
     

 module:{
            rules:[{
                     test:/\.js$/,
                     exclude:/node_modules/,
                     loader:'babel-loader',
                     options:{
                            //可以配置一些额外的参数 在babel的官网上有相关配置
                            presets:[[
                                  '@babel/preset-env',
                                   {useBuiltIns:'usege'}
                                ]]
                       }
                   }]
          }

借助babel把ES6代码转成ES5代码
@babel/preset-env配置额外属性
         

  module:{
            rules:[{
                     test:/\.js$/,
                     exclude:/node_modules/,
                     loader:'babel-loader',
                     options:{
                            //可以配置一些额外的参数 在babel的官网上有相关配置
                            presets:[[
                                  '@babel/preset-env',
                                    //根据业务需求，来注入@babel/polyfill,不是适用所有场景，会污染全局环境，如果打包组件库，就换一种配置。
                                     
                                   {useBuiltIns:'usege'，//按需引入babel/prolyfill配置
                                    targets:{
                                       chrome:'67',//配置的意思是把ES6的语法变成ES5,是否有必要做这些，如果版本>67就不需要这样的操作，因为都支持ES6语法，所以不用转ES5。
                                      }
                                    }
                                ]]
                       }
                   }]
          }

还需要按需引入@babel/polyfill

如果打包组件库，可以用以下配置,不去污染全局环境
//安装npm i  --save-dev @babel/plugin-transfrom-runtime
//安装npm i --save @babel/runtime
         

 options: {
               plugins:[[
                          "@babel/plugin-transfrom-runtime",
                          {
                             "corejs":2,//如果是2那我们还需要再安装一个包
                             "helpers":true,
                              "regenerator":true,
                              "useESModules":false
                            }
                         ]]
               }

   //安装 npm i --save @babel/runtime-corejs2

  当我们options文件配置过长，可以新建一个 .babelrc文件
         把options里的配置拿过来。就可以了。//不能写注释
  

使用webpack-dev-server打包没有dist目录，而是放到了电脑中的内存里边，提高打包速度，效率更快。

当我们改变样式结果就会刷新页面，我们内容就会被刷没。而我们想要的结果是只替换改变的东西，其他的保留。

devServer:{
      hot:true,//开启HMR
       hotOnly:true//不让浏览器自动刷新
    }

使用babel解析ES6语法，如果没有的话先使用ES5语法。

plugins:{
    //添加这个插件
     new webpack.HotModuleReplacementPlugin()//简称HMR
    }

配置好之后重启服务器 npm run serve,改变有变化的部分，其大部分保留。

如何结合webpack与babel处理ES6语法
      现在的chrome（谷歌浏览器）浏览器支持es6语法。
 babel官方网站：https://www.babeljs.io  ；
 安装 npm i --save-dev  babel-loader @babel/core
   
配置 
 

module:{
         rules:[
               {
                 test:/\.js$/,//js代码只有在src目录下才进行转义。
                 exclude:/node_modules/,//意思是第三方代码，人家已经做好的转换。我们没必要再来转换一次。
                  loader:"babel-loader"
                }
          ]
  }

再安装一个npm i @babel/person-env --save-dev
包含了所有es6转义es5的规则。

module:{
      rules:[{
          test:/\.js$/,
          exclude:/node_modules/,
          loader:"babel-loader",
          options:{
                  presets:["@babel/preset-env"]
            }
        }]
  }

另外要配置
安装 npm i @babel/polyfill
在我们写代码的文件最顶部引入
import "@babel/polyfull";
//如果我们只想让它帮我们解析部分es6语法代码，只需要引入某一部分就可以了，不然会导致我们的打包出来的包过大。可以进行以下优化。

module:{
      rules:[{
          test:/\.js$/,
          exclude:/node_modules/,
          loader:'babel-loader',
          options:{
                //需要改动的部分
                //presets:["@babel/preset-env"]
                   presets:[[
                        '@babel/preset-env',
                        {useBuiltIns:'useage'}
                     ]]
            }
        }]
  }

//配置好之后就是按需引入了，优化我们打包速度和大小
到这一步就配置好了，重启服务。运行就可以了，

SourceMap配置
关掉sourceMap，在开发者模式的时候SourceMap就已经配置好了，默认打开了。

module.exports={
       //添加这行代码，就可以关闭SourceMap
       devtool:'none'
}

这样我们代码报错的话，会提示打包代码里哪里错了，我们想要它提示在源代码里哪里错了。
sourceMap本质上是一个映射关系，打包里错误代码，知道实际源代码中是哪一行错了。
//修改代码

module.exports={
       //配置成source-map就可以使用映射关系了
       devtool:'source-map'
}

//devtool就是配置的SourceMap
//打包过程会变慢，并多出来一个文件，main.js.map文件。
在webpack中的SourceMap配置有很多种配置项。
如果添加一个cheap就会只报哪一行错了，如果不添加cheap就会精确到行和列。

eval是打包速度是最快的。性能最好的打包方式，只能打包简单的，如果项目复杂的话我们，我们还用之前的SourceMap配置。

/*如果是生产环境的话我们不需要提示错误就不用配置SourceMap配置*/

//开发环境下配置 development
devtool:'cheap-module-eval-source-map';
//生产环境下配置 production
devtool:'cheap-module-source-map'

配置好，就可以报错直接显示在源代码的哪一行报错了。

使用webpackDevServer 提升开发效率
  //热更新
    在package.json中scripts
   

"scripts":{
          //"bundle":"webpack"改成
              "watch":"webpack -watch"
      }

     //为了实现炫酷的效果
     在webpack.config.js
      添加一个devServer
     

 devServer:{
              //服务器要起在哪个文件夹下
               contentBase:"./dist"
            }

       在package.json
       

"scripts":{
          //"bundle":"webpack"改成
              "watch":"webpack -watch",
            //新添加start,自动热刷新
              "start":"webpack-dev-server"
      }

     在webpack.config.js中再配置
     

devServer:{
             contentBase:"./dist",
             //添加open
              open:true//自动打开浏览器
            }

        //同时要开启web服务器
       在package.json中
     

"scripts":{
             //新添加一条
               "start":"webpack-dev-server"
            }