Webpack externals dependency

Question

I have modular javascript application and I need to have js frameworks in one file "global-libs.js", which dependencies will be accessible for every file using webpack. Other js files will only use these dependencies but it will not be part of the final bundle. I'am using Gulp for these task in combination of Webpack.

This is task for webpack and transpile my jsx into js where should be only my code, not external libraries

gulp.task('js',['jsx'], function () {
    /**This dependency is external, its not part of the bundle */
    return gulp.src(config.paths.workDir + config.paths.jsPath + '/**/*.js')
        .pipe(webpack({
            externals: {
                "react": "React"
            }
        }))
        .pipe(rename('onlyCustomJs.js'))
        .pipe(gulpif(args.production, uglify()))
        .pipe(gulp.dest(config.paths.portlets.newNotePortlet + config.paths.jsPath))
});

This task should create files only with externals libraries and dependency React should be accessible using require in every js webpack file.

gulp.task('global', function(){
    /**This will be accessible globally*/
    return gulp.src(config.paths.srcDir + config.paths.jsPath + '/global-libs.js')
    .pipe(webpack({
        output: {
            libraryTarget: "var",
            library: "React"
        }
    }))
    .pipe(rename('global-libs.js'))
    .pipe(gulp.dest(config.paths.portlets.evremTheme + config.paths.jsPath))
});

This file uses global react dependency. But it tells me that React is undefined at var HelloMessage = React..

/** @jsx React.DOM */
var React = require('react');

var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

React.renderComponent(HelloMessage({name: "Hello world"}), document.getElementById('example'));

This is global-libs.js file

var React = require('react');
var jQuery = require('jquery');

Thank you!

Zdend Zdend · Accepted Answer · 2014-10-19T13:25:37

Maybe It's not to best solution but I solved by these changes.

//These is dependencies which will be bundled in one global-libs.js file and will be accessible from everywhere through require().

module.exports = React = require('react');
module.exports = jQuery = require('jquery');

Webpack only merge these two files and publish them through module.exports

gulp.task('global', function(){
  /**This will be accessible globally*/
  return gulp.src(config.paths.srcDir + config.paths.jsPath + '/global-libs.js')
    .pipe(webpack())
    .pipe(rename('global-libs.js'))
    .pipe(gulp.dest(config.paths.destDir + config.paths.jsPath))
});

My gulp task for bundling my conde is like this. Only specified externals dependencies which will not be part of the bundle.

 gulp.task('js',['jsx'], function () {
        /**This dependency is external, its not part of the bundle */
        return gulp.src(config.paths.workDir + config.paths.jsPath + '/**/*.js')
            .pipe(webpack({
                externals: {
                    "react": "React",
                    "jquery": "jQuery"
                }
            }))
            .pipe(rename('bundle.js'))
            .pipe(gulpif(args.production, uglify()))
            .pipe(gulp.dest(config.paths.destDir + config.paths.jsPath))
    });

In result I can import dependencies like this.

/** @jsx React.DOM */
var React = require('react');
var jQuery = require('jquery');

var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

React.renderComponent(HelloMessage({name: "Hello world"}), jQuery('#example')[0]);

Webpack externals dependency

1 Answers