Skip to content

Instantly share code, notes, and snippets.

@jouni-kantola
Created October 11, 2016 22:06
Show Gist options
  • Save jouni-kantola/626d3d2edee3e43bfc0e1a16f6642bb4 to your computer and use it in GitHub Desktop.
Save jouni-kantola/626d3d2edee3e43bfc0e1a16f6642bb4 to your computer and use it in GitHub Desktop.
Application bootstrap by Webpack build type
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
const config = __webpack_require__(1);
console.dir(config);
/***/ },
/* 1 */
/***/ function(module, exports) {
module.exports = {dev: true};
/***/ }
/******/ ]);
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
const config = __webpack_require__(1);
console.dir(config);
/***/ },
/* 1 */
/***/ function(module, exports) {
module.exports = {prod: true}
/***/ }
/******/ ]);
module.exports = {dev: true};
module.exports = {prod: true}
const config = require('./config' + (__DEV__ ? '-dev' : ''));
console.dir(config);
const webpack = require('webpack');
const build = process.env.BUILD && process.env.BUILD.trim();
const isProduction = build === 'production';
const definePlugin = new webpack.DefinePlugin({
__DEV__: !isProduction
});
module.exports = {
entry: './index.js',
output: {
filename: isProduction ? 'bundle.prod.js' : 'bundle.js'
},
plugins: [definePlugin]
};
@jouni-kantola
Copy link
Author

Using the technique with bootstrapping the application's module tree is quite differen from setting a global config. The latter would inline the mocked config, like in the example below.

// webpack.config.js
const definePlugin = new webpack.DefinePlugin({
  __DEV__: !isProduction,
  globalConfig: !isProduction ? JSON.stringify({ in: 'dev' }) : JSON.stringify({ in: 'prod' }) 
});

// index.js
console.dir(config);
console.log(globalConfig);

// bundle.js
/* 0 */
/***/ function(module, exports, __webpack_require__) {

    const config = __webpack_require__(1);

    console.dir(config);
    console.log(({"in":"dev"}));

/***/ }

// bundle.prod.js
/* 0 */
/***/ function(module, exports, __webpack_require__) {

    const config = __webpack_require__(1);

    console.dir(config);
    console.log(({"in":"prod"}));

/***/ }

@jouni-kantola
Copy link
Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment