webpack学习笔记

 按需引入打包  配置，使用tree shaking方法
   tree shaking 只支持ES module  (import from 静态引入)

   如果使用tree shaking需要加optimization
   webpack.config.js//production环境下不需要这个配置
 

 optimization:{
         usedExports:true
     }

   
   package.json中添加配置
   

"sideEffects":false，//tree shaking对所有模块都要进行tree shaking
   "sideEffects":[添加css等]

   //在production环境下tree shaking就生效了。

development和Production模式的区分打包
   development:(开发环境)
   代码不被压缩
   

mode:"development"
   devtool:"cheap-module-eval-source-map"

   
   
   production:(生产环境)
   代码会被压缩
 

 mode:"production"  
   devtool:"cheap-module-source-map"

   切换模式来回改动配置麻烦
   新建两个文件
  //开发环境使用的配置文件
   webpack.dev.js
   在package.json
   

"scripts":{
//运行命令
        "dev":"webpack-dev-server --config webpack.dev.js",
        //"build":"webpack --config webpack.prod.js"
     }

   //生产环境使用的配置文件
   webpack.prod.js
   

"scripts":{
        //"dev":"webpack-dev-server --config webpack.dev.js",
//运行命令
        "build":"webpack --config webpack.prod.js"
     }

   
公共配置文件(不管是developement还是production都需要的一些配置)
   webpack.commin.js
   

module.exports={
     //公共配置可以移过来
    }

   
   在webpack.dev.js
   

//引入common.js 
   const commonConfig = require("./webpack.common.js")
   //引入结合配置的方法
   const merge = require("webpack-merge");
   //配置结合之后导出
   module.export=merge(commonConfig,devConfig) 
   //devConfig是配置的常量

   在webpack.prod.js
 

 //引入common.js 
   const commonConfig = require("./webpack.common.js")
   //引入结合配置的方法
   const merge = require("webpack-merge");
   //配置结合之后导出
   module.export=merge(commonConfig,prodConfig) 
   //prodConfig是配置的常量

这样配置好就可以打包使用了