wiki

[[hot-module-replacement-with-webpack]]

[[internal-webpack-plugins]]

imports-loader and window.jQuery

support for path-to-regexp

moment.js

so i have a couple of things i think should probably be in the docs: 1) best practice for shimming browser js (i.e. a jquery plugin), 2) how to configure for altjs languages, 3) how to configure webpack for browser package managers like bower. 1) => http://webpack.github.io/docs/shimming-modules.html 2) => How to write a loader; http://webpack.github.io/docs/using-loaders.html 3) => Vendor Modules Some of them are still work in progress dontkry may be a good start for 3)

Create a enhanced require function

  1. var myRequire = require("enhanced-require")(module, {
  2.     // options
  3. });
  5. // startup your application
  6. myRequire("./startup");

Usage

Than you can use them:

  1. // use loaders
  2. var fileContent = require("raw!"+__filename);
  4. // use loaders automatically
  5. var template = require("./my-template.jade");
  6. // you need to pass this options: 
  7. // { module: { loaders: [ { test: /\.jade$/, loader: "jade" } ] } }
  9. var html = template({content: fileContent});
  11. // use require.context
  12. var directoryRequire = require.context("raw!./subdir");
  13. var txtFile = directoryRequire("./aFile.txt");
  15. // use require.ensure
  16. require.ensure(["./someFile.js"], function(require) {
  17.     var someFile = require("./someFile.js");
  18. });
  20. // use AMD define
  21. require.define(["./aDep"], function(aDep) {
  22.     aDep.run();
  23. });
  25. // use AMD require
  26. require(["./bDep"], function(bDep) {
  27.     bDep.doSomething();
  28. });

Hot Code Replacement

  1. require("enhanced-require")(module, {
  2.     hot: true, // enable hot code replacement
  3.     watch: true // watch for changes
  4. })("./startup");

For hot code reloading you need to follow the hot code reloading spec.

Testing/Mocking

  1. var er = require("enhanced-require");
  2. it("should read the config option", function(done) {
  3.     var subject = er(module, {
  4.         substitutions: {
  5.             // specify the exports of a module directly
  6.             "../lib/config.json": {
  7.                 "test-option": { value: 1234 }
  8.             }
  9.         },
  10.         substitutionFactories: {
  11.             // specify lazy generated exports of a module
  12.             "../lib/otherConfig.json": function(require) {
  13.                 // export the same object as "config.json"
  14.                 return require("../lib/config.json");
  15.             }
  16.         }
  17.     })("../lib/subject");
  19.     var result = subject.getConfigOption("test-option");
  20.     should.exist(result);
  21.     result.should.be.eql({ value: 1234 });
  22. });

from commonjs

Differences between CommonJS and RequireJS

There are two main differences between CommonJS and RequireJS.

The first one is how modules are defined. While CommonJS uses its own method (seen above), RequireJS implements the AMD (Asynchronous Module Definitions) specification.

The second difference is how dependencies are loaded. While CommonJS expects require calls to behave synchronously, RequireJS loads its modules asynchronously, behaving more accordingly as how the browser works. This heavily marks where to use each of these two module systems, CommonJS is used mainly in server JavaScript implementations (Nodejs), while RequireJS is headed to be used in the browser.