Webpack配置

使用Babel处理ES6语法

Babel可以将es6的语法转化为es5

安装：npm i babael -loader @babel/core -D

​ npm i @babel/preset-env -D 把js代码进行语法转换

​ npm i @babel/polyfill -D 变量和函数在低版本内的填充特性

在js文件 import "@babel/polyfill"
//config.js
module:{
  rules:[{
    test:/\.js$/,
    exclude:/node_modules/, 
    //js文件在node_modules中不需要打包，第三方文件
    loader:"bable-loader",
    options:{
      presets:["@babel/preset-env"],{
      hseBuiltIns:"usage" 
      //根据业务代码填充特性，减少打包代码体积
    }
    }
  }]
}

webpack中的Hot Module Replacement -- 热模块更新

代码改变，页面不刷新，改变css文件，不会更改js的文件，方便调试css样式，需要配置Hot Module Replacement

//config.js
const webpack = require("webpack")
devServe:{
  contentBase:"./diat",
  open:true,
  port:8080,
  hot:true, //开启功能
  hotOnly:""//即使不生效也不自动刷新
},
modules:{
  "scripts":{
    "start":"webpack-dev-sever" 
    //打包生成的文件不会放到dist目录，会放在内存中，提高打包速度
  }
},
plugins:[
  new webpack.HotModuleReplacementPlusin() 
  //配置webpack自带插件，需先引入webpack
]

SourcsMap的配置

打包文件报错，dist中main.js中的报错映射对应的src相对应的文件的位置

//config.js
devtool:"sourcs-map" 
//SourcsMap配置，会生成map文件，产生映射文件，影响打包速度，
//使用inline-sourcs-map,不生成单独的map文件，转化为base64格式在写入打包的js文件内，报错比较详细，
//使用cheap-inline-sourcs-map，代码量较大时，简化报错显示，
//使用cheap-module-inline-sourcs-map，自身第三方模块报错，eval，打包速度最快的，性能最后，复杂代码显示报错并不全面，
//cheap-module-eval-sourcs-map，提示全，打包速度快，建议使用

WebpackDevSever 提高开发效率

dist目录自动打包，更新数据

//package.json
//第一种方式
"scripts":{
  "watch":"webpack --watch" 
  //监听打包的文件，改变自动打包
}

//第二种方式
npm i webpack-dev-serve -D
"scripts":{
  "start":"webpack-dev-serve" 
  //监听打包的文件，改变自动打包
}
//config.js
"devServe":{ //配置devServe
  port:8080, //端口号配置
  contentBase:"./dist" 
  open:true, //自动重新打开浏览器且重新更新
  proxy:{ //接口代理，实现跨域
    "api":"http://locahost:3000",
  }
}

Webpack中Tree Shaking 摇树

只支持ES Module 模块的引入方式

//package.json
"sideEffects":false,  
//config.js
optimization:{ //开发环境使用
  usedExpots:true,
}