new webpack 的 DefinePlugin 与 ProvidePlugin

一、DefinePlugin
DefinePlugin 允许创建一个在编译时可以配置的全局常量。这可能会对开发模式和生产模式的构建允许不同的行为非常有用。如果在开发构建中,而不在发布构建中执行日志记录,则可以使用全局常量来决定是否记录日志。这就是 DefinePlugin 的用处,设置它,就可以忘记开发环境和生产环境构建的规则。

同时 也可以用来区分环境 变量 , 例如
我在build.js
DefinePlugin中加了
BUILD_EVN: JSON.stringify(true)
那我们对dev-server.js文件中原本不动的把build.js中的代码复制进去然后改成
BUILD_EVN: JSON.stringify(false)

这样代码中 同样是使用BUILD_EVN 这个变量, 但是可以 在不同的环境 有不同的行为。

二、ProvidePlugin

自动加载模块,而不必到处 import 或 require 。

1
2
3
4
5
6
7
8
9
new webpack.ProvidePlugin({
   $: 'jquery',
    Vue: 'vue',
    Vuex: 'vuex',
    videojs: 'video.js',
    MD5: 'blueimp-md5',
    Cookies: 'js-cookie',
    MutationObserver: 'mutation-observer'
})

  

————————————————

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

原文链接:https://blog.csdn.net/Beth__hui/article/details/116997020

posted @   男孩亮亮  阅读(339)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律
点击右上角即可分享
微信分享提示