How can I include a global JS file to my React project using webpack?

Question

I'm using React for he first time and I discover that there are some JS functions I need to use accross multiple JSX files.

I've looked at some examples, but can't figure out how to correctly include my global.js file.

My folder structure:

/dist
/src
  /components
  /sass
  /img
  index.js
  global.js
webpack.config.js

This is my webpack file:

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: "./src/index.js",
    output: {
        path: __dirname + "/js/",
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    cacheDirectory: true,
                    presets: ['es2015', 'react']
                }
            }
        ]
    }
};

Can anyone tell me how to correctly include this one file and where in the webpack code this goes?

ciaoben · Accepted Answer · 2016-05-11 13:30:03Z

1

I am not sure about what you need, but webpack is your building system, so it plays at an lower level from what do you want. If you want to include functions in various file, you need to include the file in wherever you need it:

global.js

module.export = {
 func1: ..,
 func2: ..
}

file where you need a function:

var globals = require('path/to/global.js')

answered May 11, 2016 at 13:30

ciaoben

3,4404 gold badges32 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Steven Over a year ago

I need the functions in global.js to be accessible from any *.jsx file.

ciaoben Over a year ago

the only way I know is to required it in every file (for example, when using react you need to require react in everyfile, so I don't see the problem of adding one more line). Maybe there is a way to add your code during the building phase to each file, but does not seems a good practice to me

ciaoben Over a year ago

@Steven I think you should be a loader: webpack.github.io/docs/how-to-write-a-loader.html This is what you need to accomplish your goal

Collectives™ on Stack Overflow

How can I include a global JS file to my React project using webpack?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related