Grunt-webpack-globals via ProvidePlugin

Question

I've been trying to provide my webpack compiled modules with grunt. All my files need at least 1 or 2 globals (React, Backbone and underscore).

These assets will be compiled into js, react views. I'm wondering how I can use ProvidePlugin to give all my modules some base packages, with webpack and/or grunt configs?

I have no clue where this code would live! Gruntfile.js? Entry js file?

plugins: [
  webpack.ProvidePlugin({
    "_": "underscore"
  })
]

or

new webpack.ProvidePlugin({
  $: "jquery"
})

I researched and found this is the closest: Webpack ProvidePlugin vs externals?

Thank you very much for your help!

Just to clairfy, when i put this in my entry js file, (app.js), I get "webpack not found". — Kevin Redman, Jun 19 '14 at 16:12

score 0 · Answer 1 · answered Jun 19 '14 at 16:28

Figured it out! Ends up the grunt webpack config takes the same options? Looks like it :)

grunt.initConfig({
    pkg: pkgConfig,
    loyalty: loyaltyConfig,
    webpack: {
        development: {
            // resolve: {
            //     modulesDirectories: [ 'vendors' ]
            // },
            amd: {
                $: true
            },
            plugins: [
                new webpack.ProvidePlugin({
                    $: 'jquery',
                    _: 'underscore',
                    React: 'react/addons',
                    config: 'json!../../config.json'
                })
            ],

This will include the required elements if and only if they're used apparently.

Grunt-webpack-globals via ProvidePlugin

1 Answers1