Define global variable with webpack

Question

Is it possible to define a global variable with webpack to result something like this   var myvar         All of the examples I saw were using  external file require  imports   jquery   file js

User · Answer

I was about to ask the very same question. After searching a bit further and decyphering part of webpack's documentation I think that what you want is the output.library and output.libraryTarget in the webpack.config.js file.

For example:

js/index.js:

var foo = 3;
var bar = true;

webpack.config.js

module.exports = {
   ...
   entry: './js/index.js',
   output: {
      path: './www/js/',
      filename: 'index.js',
      library: 'myLibrary',
      libraryTarget: 'var'
   ...
}

Now if you link the generated www/js/index.js file in a html script tag you can access to myLibrary.foo from anywhere in your other scripts.

User · Answer

Use DefinePlugin      The DefinePlugin allows you to create global constants which can be   configured at compile time    new webpack DefinePlugin definitions    Example   plugins      new webpack DefinePlugin       PRODUCTION  JSON stringify true                   Usage   console log  Environment is in production    PRODUCTION

User · Answer

You can use define window myvar       When you want to use it  you can use like window myvar   1

User · Answer

I solved this issue by setting the global variables as a static properties on the classes to which they are most relevant  In ES5 it looks like this   var Foo   function         Foo globalVar

User · Answer

There are several way to approach globals   Put your variables in a module    Webpack evaluates modules only once  so your instance remains global and carries changes through from module to module  So if you create something like a globals js and export an object of all your globals then you can import    globals  and read write to these globals  You can import into one module  make changes to the object from a function and import into another module and read those changes in a function  Also remember the order things happen  Webpack will first take all the imports and load them up in order starting in your entry js  Then it will execute entry js  So where you read write to globals is important  Is it from the root scope of a module or in a function called later  config js export default       FOO   bar     somefile js import CONFIG from    config js  console log  FOO    CONFIG FOO     Note  If you  want the instance to be new each time  then use an ES6 class  Traditionally in JS you would capitalize classes  as opposed to the lowercase for objects  like import FooBar from    foo-bar      lt -- Usage  myFooBar   new FooBar    Webpack s ProvidePlugin   Here s how you can do it using Webpack s ProvidePlugin  which makes a module available as a variable in every module and only those modules where you actually use it   This is useful when you don t want to keep typing import Bar from  foo  again and again  Or you can bring in a package like jQuery or lodash as global here  although you might take a look at Webpack s Externals   Step 1  Create any module  For example  a global set of utilities would be handy  utils js export function sayHello        console log  hello      Step 2  Alias the module and add to ProvidePlugin  webpack config js var webpack   require  quot webpack quot    var path   require  quot path quot             module exports                  resolve        extensions         js        alias           utils   path resolve   dirname     utils        lt -- When you build or restart dev-server  you ll get an error if the path to your utils js file is incorrect                plugins                     new webpack ProvidePlugin          utils    utils                   Now just call utils sayHello   in any js file and it should work  Make sure you restart your dev-server if you are using that with Webpack  Note  Don t forget to tell your linter about the global  so it won t complain  For example  see my answer for ESLint here   Use Webpack s DefinePlugin   If you just want to use const with string values for your globals  then you can add this plugin to your list of Webpack plugins  new webpack DefinePlugin     PRODUCTION  JSON stringify true     VERSION  JSON stringify  quot 5fa3b9 quot      BROWSER SUPPORTS HTML5  true    TWO   quot 1 1 quot      quot typeof window quot   JSON stringify  quot object quot       Use it like  console log  quot Running App version  quot    VERSION   if  BROWSER SUPPORTS HTML5  require  quot html5shiv quot      Use the global window object  or Node s global    window foo    bar      For SPA s  browser environment  global foo    bar      Webpack will automatically convert this to window if your project is targeted for web  default   read more here  https   webpack js org configuration node   You ll see this commonly used for polyfills  for example  window Promise   Bluebird  Use a package like dotenv    For server side projects  The dotenv package will take a local configuration file  which you could add to your  gitignore if there are any keys credentials  and adds your configuration variables to Node s process env object     As early as possible in your application  require and configure dotenv      require  dotenv   config    Create a  env file in the root directory of your project  Add environment-specific variables on new lines in the form of NAME VALUE  For example  DB HOST localhost DB USER root DB PASS s1mpl3  That s it  process env now has the keys and values you defined in your  env file  var db   require  db   db connect     host  process env DB HOST    username  process env DB USER    password  process env DB PASS     Notes  Regarding Webpack s Externals  use it if you want to exclude some modules from being included in your built bundle  Webpack will make the module globally available but won t put it in your bundle  This is handy for big libraries like jQuery  because tree shaking external packages doesn t work in Webpack  where you have these loaded on your page already in separate script tags  perhaps from a CDN

[javascript] Define global variable with webpack

Examples related to javascript

Examples related to webpack

Examples related to webpack-2

Examples related to webpack-3