new webpack 的 DefinePlugin 与 ProvidePlugin

本文主要是介绍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 。

 new webpack.ProvidePlugin({
    $: 'jquery',
     Vue: 'vue',
     Vuex: 'vuex',
     videojs: 'video.js',
     MD5: 'blueimp-md5',
     Cookies: 'js-cookie',
     MutationObserver: 'mutation-observer'
 })

这篇关于new webpack 的 DefinePlugin 与 ProvidePlugin的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！