2023年6月28日发(作者：)

【webpack系列】-----条件编译前端⼯程化开发阶段会遇到哪些场景需要使⽤条件编译？1.不使⽤mock的那部分假数据，总不能放在代码⾥发布⽣产环境吧？⼯具代码，如移动端⽐较流⾏的vconsole插件，我们不希望测试前引⼊这份代码，发布⽣产的时候⼿动关闭这部分代码吧，我们需要⼀个开关的功能去⾃动化引⼊和移除。…遇到以上这些情况，正是需要条件编译这个功能。那么如何在webpack⾥⾯加⼊条件编译？1.利⽤UglifyJsPlugin插件去除死代码（不执⾏的代码块），例如if (false) { }如上⾯场景2，需要⼀个开关⾃动切换debug⼯具代码注⼊和移除。可以在⼯程上注⼊环境变量来作为开关，如下配置："scripts": { "dev": "node build/", "build": "node build/", "build:test": "cross-env BUILD_ENV=test node build/",},在UglifyJsPlugin加上dead_code属性new JsPlugin({ compress: { warnings: false, drop_debugger: true, dead_code: true, }, comments: false, beautify: false, sourceMap: false}),在DefinePlugin注⼊js可使⽤的node变量new Plugin({ DEBUG: ify(_ENV=='test'),}),怎么在前端js代码中使⽤这个开关？if (DEBUG) { const vConsole = require('vconsole') new vConsole();}我们做个实验，证明以上做法能做到条件编译。//测试环境，需要debug⼯具npm run build:test总所周知，node_modules中引⼊的包，webpack默认都会打到⼀个的⽂件⾥，我们搜索⼀下vconsole插件是否注⼊，如下。//⽣产环境，不需要debug⼯具npm run build我们继续看下输出的公共包确实没被引⼊，⾄此证明可以做到条件编译。总结：步骤⼀：根据发布环境（test？production？）在node中通过DefinePlugin定义⼀个可以在前端js中引⽤的变量（DEBUG，随便命名），作为开关。（引⼊条件关键词）步骤⼆：通过if语句使⽤这个开关做⼀些事情。（条件编译）步骤三：使⽤UglifyJsPlugin的_code=true,在打包扫描代码初阶段（未进⼊依赖包构建阶段）去除死代码。 （执⾏代码块的注⼊或移除）2.使⽤js-conditional-compile-loader简单粗暴，步骤⼀：//wepack中设置loader{ test: /.jsx?$/, use: [ { loader: 'js-conditional-compile-loader', options: { isDebug: _ENV=='test' } } ]},步骤⼆：//注释般写⼊代码/*IFDEBUG let vConsole = require('vconsole') new vConsole()FIDEBUG*/