Webpack on Plunker.NEXT

editor.js

require("bootstrap/less/bootstrap.less");
require("font-awesome");

require("styles/shared.less");
require("styles/editor.less");

var Angular = require("angular");

module.exports =
Angular.module("plunker.editor", [
  require("angular-bootstrap").name,
  
  require("plunker.components.commander").name,
  require("plunker.components.notifier").name,
  require("plunker.components.sidebar").name,
  require("plunker.components.toolbar").name,
  require("plunker.components.visitor").name,
  require("plunker.components.workspace").name,
])

.value("config", CONFIG) // CONFIG is injected by Webpack

.config(["$tooltipProvider", function ($tooltipProvider) {
  $tooltipProvider.options({
    placement: 'top',
    animation: false,
    popupDelay: 100,
    appendToBody: true,
  });
}])

.config(["$httpProvider", function ($httpProvider) {
  $httpProvider.interceptors.push(["$window", function ($window) {
    var envelopeKey = "plunker.auth";
    
    return {
      request: function (config) {
        var auth = $window.localStorage[envelopeKey];
        
        if (auth) config.headers['Bearer'] = auth.jwt;
        
        return config;
      }
    };
  }]);
}])


.config(["$locationProvider", function ($locationProvider) {
  $locationProvider.html5Mode(true).hashPrefix("!");
}])

.run(["$rootScope", "$location", "$q", "commander", "notifier", function ($rootScope, $location, $q, commander, notifier) {
  $rootScope.$on("editor.reset.success", function (e, locals, project) {
    notifier.success("Project reset");
    handleChangeProject(project);
  });
  $rootScope.$on("project.destroy.success", function (e, locals, project) {
    notifier.success("Project destroyed");
    
    handleChangeProject(project);
    
    commander.execute('editor.reset');
  });
  $rootScope.$on("project.fork.success", function (e, locals, project) {
    notifier.success("Project forked");
    handleChangeProject(project);
  });
  $rootScope.$on("project.open.success", function (e, locals, project) {
    handleChangeProject(project);
  });
  $rootScope.$on("project.save.success", function (e, locals, project) {
    notifier.success("Project saved");
    handleChangeProject(project);
  });
  
  $rootScope.$on("editor.reset.error", function (e, locals, project) {
    notifier.error("Error resetting project");
  });
  $rootScope.$on("project.destroy.error", function (e, locals, project) {
    notifier.error("Error destroying project");
  });
  $rootScope.$on("project.fork.error", function (e, locals, project) {
    notifier.error("Error forking project");
  });
  $rootScope.$on("project.open.error", function (e, locals, project) {
    notifier.error("Error opening project");
  });
  $rootScope.$on("project.save.error", function (e, locals, project) {
    notifier.error("Error saving project");
  });

  commander.addCommand({
    name: 'editor.reset',
    hotkeys: "Mod-Shift-n",
    overlay: {
      name: "editor",
      message: "Resetting project",
    },
    handler: [ function () {
      return commander.execute("project.reset")
        .then(function () {
          return commander.execute("project.openTree", {entries: [
            {
              type: 'file',
              filename: 'index.html',
              content: require("raw!./plunkTemplate/index.txt"),
            }, {
              type: "directory",
              filename: "lib",
              children: [
                {
                  type: 'file',
                  filename: 'script.js',
                  content: require("raw!./plunkTemplate/script.txt"),
                }, {
                  type: 'file',
                  filename: 'style.css',
                  content: require("raw!./plunkTemplate/style.txt"),
                }
              ],
            }
          ]});
        })
        .then(function (project) {
          var index = project.findEntryByFilename(/^(index|example|default|readme)\.(html|md|htm)$/i);
          
          if (index) commander.execute("workspace.attach", {attachment: { type: 'code', entry: index} });
          
          return project;
        });
    }]
  });
  
  commander.addCommand({
    name: 'editor.open',
    overlay: {
      name: "editor",
      message: "Opening project",
    },
    defaults: {
      sha: null,
    },
    handler: ["plunkId", "sha", function (plunkId, sha) {
      return commander.execute("project.open", {plunkId: plunkId, sha: sha})
        .then(function (project) {
          var index = project.findEntryByFilename(/^(index|example|default|readme)\.(html|md|htm)$/i);
          
          if (index) commander.execute("workspace.attach", {attachment: { type: 'code', entry: index} });
          
          return project;
        });
    }]
  });
  
  $rootScope.$watch(function () { return $location.path(); }, function (newPath, oldPath) {
    var firstLoad = newPath === oldPath;
    var parts = newPath.split("/");
    var plunkId = parts[2];
    var sha = parts[3];
    
    if (plunkId) {
      commander.execute("editor.open", {plunkId: plunkId, sha: sha})
        .catch(function (e) {
          return commander.execute('editor.reset');
        });
    } else {
      commander.execute('editor.reset');
    }
  });
  
  function handleChangeProject (project) {
    var path = "/edit";
    
    if (project.isSaved()) path += "/" + project.plunk.id;
    if (project.isSaved() && project.sha !== project.getLatestSha()) path += "/" + project.sha;
    
    $location.path(path);
  }
}])


;

webpack.config.js

var NgMinPlugin = require("ngmin-webpack-plugin");
var Path = require("path");
var Webpack = require("webpack");

module.exports = function (config) {
  return {
    cache: true,
    entry: {
      editor: [__dirname + "/src/assets/editor.js"],
      landing: [__dirname + "/src/assets/landing.js"],
    },
    output: {
      path: Path.join(__dirname, "dist", "assets"),
      filename: "[name].js",
      publicPath: "/assets/",
    },
    module: {
      loaders: [
        { test: /[\/\\]angular\.js$/, loader: "exports-loader?window.angular" },
        { test: /[\/\\]angular-messages\.js$/, loader: "ng-loader?ngMessages" },
        { test: /[\/\\]angular-cookie\.js$/, loader: "ng-loader?ipCookie" },
        { test: /[\/\\]angular-growl\.js$/, loader: "ng-loader?angular-growl" },
        { test: /[\/\\]ng-tags-input\.js$/, loader: "ng-loader?ngTagsInput" },
        { test: /[\/\\]ui-bootstrap-tpls\.js$/, loader: "ng-loader?ui.bootstrap" },
        { test: /[\/\\]timeAgo\.js$/, loader: "ng-loader?yaru22.angular-timeago" },
        { test: /[\/\\]ace\.js$/, loader: "exports-loader?ace!script-loader" },
        { test: /\.css$/,   loader: "style-loader!css-loader" },
        { test: /\.less$/,  loader: "style-loader!css-loader!less-loader" },
        { test: /\.woff$/,  loader: "url-loader?limit=10000&minetype=application/font-woff" },
        { test: /\.ttf$/,   loader: "file-loader" },
        { test: /\.eot$/,   loader: "file-loader" },
        { test: /\.svg$/,   loader: "file-loader" },
        { test: /\.html$/,  loader: "raw-loader" },
      ],
    },
    plugins: [
      new PlunkerModuleReplacementPlugin(),
      new Webpack.DefinePlugin({
        CONFIG: JSON.stringify(config)
      }),
      new Webpack.optimize.CommonsChunkPlugin("common.js"),
      new Webpack.optimize.DedupePlugin(),
      //new NgMinPlugin(),
      //new Webpack.optimize.UglifyJsPlugin({
      //  mangle: false,
      //  compress: false,
      //  output: {
      //    beautify: true,
      //  }
      //}),
    ],
    resolve: {
      modulesDirectories: ["node_modules", "bower_components", "src/assets"],
      root: __dirname,
      alias: {
        'ace': "ace-builds/src-noconflict/ace.js",
        'angular': "angular/angular.js",
        'angular-messages': "angular-messages/angular-messages.js",
        'angular-bootstrap': "angular-bootstrap/ui-bootstrap-tpls.js",
        'angular-growl.js': "angular-growl/build/angular-growl.js",
        'angular-tags.js': "ng-tags-input/ng-tags-input.js",
        'font-awesome': "font-awesome/less/font-awesome.less",
        'angular-timeago': "angular-timeago/src/timeAgo.js",
      },
    },
  };
};



function PlunkerModuleReplacementPlugin () {
  this.resourceRegExp = /^plunker(?:\.(\w+))*$/;
}
PlunkerModuleReplacementPlugin.prototype.apply = function (compiler) {
  var resourceRegExp = this.resourceRegExp;
  compiler.plugin("normal-module-factory", function (nmf) {
    nmf.plugin("before-resolve", function (result, callback) {
      if (!result) return callback();
      
      if (resourceRegExp.test(result.request)) {
        var parts = result.request.split(".").slice(1);
        
        result.request = parts.join("/");
      }

      return callback(null, result);
    });
  });
};