Merge pull request #5 from yuki-takei/imprv/dev-arch

Imprv/dev arch

.gitignore

@@ -17,15 +17,9 @@ npm-debug.log
 /npm-debug.log.*
 
 # Dist #
-/dist
-/lib
-/public/js/
-/public/css/
-/public/uploads/
-/public/__build__/
+/public/
 /src/*/__build__/
 /__build__/**
-/public/dist/
 /src/*/dist/
 /.awcache
 .webpack.json

.node-dev.json

@@ -0,0 +1,5 @@
+{
+  "ignore": [
+    "package.json"
+  ]
+}

app.js

@@ -7,8 +7,5 @@
 
 var crowi = new (require('./lib/crowi'))(__dirname, process.env);
 
-crowi.init()
-  .then(function() {
-    return crowi.start();
-  }).catch(crowi.exitOnError);
-
+crowi.start()
+  .catch(crowi.exitOnerror);

config/helpers.js

@@ -0,0 +1,20 @@
+/**
+ * @author: @AngularClass
+ * @author: Yuki Takei <yuki@weseek.co.jp>
+ */
+
+var path = require('path');
+
+const EVENT = process.env.npm_lifecycle_event || '';
+
+// Helper functions
+var ROOT = path.resolve(__dirname, '..');
+
+function hasProcessFlag(flag) {
+  return process.argv.join('').indexOf(flag) > -1;
+}
+
+var root = path.join.bind(path, ROOT);
+
+exports.hasProcessFlag = hasProcessFlag;
+exports.root = root;

config/webpack.common.js

@@ -0,0 +1,93 @@
+/**
+ * @author: Yuki Takei <yuki@weseek.co.jp>
+ */
+
+const webpack = require('webpack');
+const helpers = require('./helpers');
+
+/*
+ * Webpack Plugins
+ */
+// problem with copy-webpack-plugin
+const AssetsPlugin = require('assets-webpack-plugin');
+const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
+
+/*
+ * Webpack configuration
+ *
+ * See: http://webpack.github.io/docs/configuration.html#cli
+ */
+module.exports = function (options) {
+  isProd = options.env === 'production';
+  return {
+    entry: {
+      'app':                  './resource/js/app',
+      'legacy':               './resource/js/legacy/crowi',
+      'legacy-form':          './resource/js/legacy/crowi-form',
+      'legacy-admin':         './resource/js/legacy/crowi-admin',
+      'legacy-presentation':  './resource/js/legacy/crowi-presentation',
+      'plugin':               './resource/js/plugin',
+      'style':                './resource/styles',
+    },
+    resolve: {
+      extensions: ['.js', '.json'],
+      modules: [helpers.root('src'), helpers.root('node_modules')],
+    },
+    module: {
+      rules: [
+        {
+          test: /.jsx?$/,
+          exclude: /node_modules/,
+          use: [{
+            loader: 'babel-loader?cacheDirectory',
+          }]
+        },
+        {
+          test: /\.css$/,
+          use: ['style-loader', 'css-loader'],
+          // comment out 'include' spec for crowi-plugins
+          // include: [helpers.root('resource')]
+        },
+        {
+          test: /\.scss$/,
+          use: ['style-loader', 'css-loader', 'sass-loader'],
+          // comment out 'include' spec for crowi-plugins
+          // include: [helpers.root('resource')]
+        },
+        /*
+         * File loader for supporting images, for example, in CSS files.
+         */
+        {
+          test: /\.(jpg|png|gif)$/,
+          use: 'file-loader',
+        },
+        /* File loader for supporting fonts, for example, in CSS files.
+        */
+        {
+          test: /\.(eot|woff2?|svg|ttf)([\?]?.*)$/,
+          use: 'file-loader',
+        }
+      ]
+    },
+    plugins: [
+
+      new AssetsPlugin({
+        path: helpers.root('public/js'),
+        filename: 'webpack-assets.json',
+        prettyPrint: true,
+      }),
+
+      new CommonsChunkPlugin({
+        name: 'commons',
+        chunks: ['app', 'legacy', 'legacy-form', 'legacy-admin', 'legacy-presentation'],
+        minChunks: module => /node_modules/.test(module.resource),
+      }),
+
+      new webpack.ProvidePlugin({
+        jQuery: "jquery",
+        $: "jquery",
+      }),
+
+    ]
+  };
+}

config/webpack.dev.js

@@ -0,0 +1,81 @@
+/**
+ * @author: Yuki Takei <yuki@weseek.co.jp>
+ */
+
+const webpack = require('webpack');
+const helpers = require('./helpers');
+const webpackMerge = require('webpack-merge');
+const webpackMergeDll = webpackMerge.strategy({plugins: 'replace'});
+const commonConfig = require('./webpack.common.js');
+
+/*
+ * Webpack Plugins
+ */
+// problem with copy-webpack-plugin
+const AssetsPlugin = require('assets-webpack-plugin');
+const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const DllBundlesPlugin = require('webpack-dll-bundles-plugin').DllBundlesPlugin;
+const LiveReloadPlugin = require('webpack-livereload-plugin');
+
+/*
+ * Webpack Constants
+ */
+const ENV = process.env.ENV = process.env.NODE_ENV = 'development';
+const HOST = process.env.HOST || '0.0.0.0';
+const PORT = process.env.PORT || 3000;
+const WATCH = helpers.hasProcessFlag('watch');
+
+/*
+ * Webpack configuration
+ *
+ * See: http://webpack.github.io/docs/configuration.html#cli
+ */
+module.exports = function (options) {
+  return webpackMerge(commonConfig({ env: ENV }), {
+    devtool: 'cheap-module-source-map',
+    entry: {
+      // dev: WATCH ?
+      //   ['./resource/js/dev', 'reload/lib/reload-client']:
+      //   ['./resource/js/dev'],
+      dev: './resource/js/dev',
+    },
+    output: {
+      path: helpers.root('public/js'),
+      publicPath: '/js/',
+      filename: '[name].bundle.js',
+      sourceMapFilename: '[file].map',
+    },
+    resolve: {
+      extensions: ['.js', '.json'],
+      modules: [helpers.root('src'), helpers.root('node_modules')],
+    },
+    module: {
+      rules: [
+      ],
+    },
+    plugins: [
+
+      new DllBundlesPlugin({
+        bundles: {
+          vendor: [
+            'react',
+            'react-dom',
+            'jquery',
+            'jquery.cookie',
+          ],
+        },
+        dllDir: helpers.root('public/js/dll'),
+        webpackConfig: webpackMergeDll(commonConfig({env: ENV}), {
+          devtool: 'cheap-module-source-map',
+          plugins: [],
+        })
+      }),
+
+      new LiveReloadPlugin(),
+
+      new webpack.NoEmitOnErrorsPlugin(),
+
+    ]
+  });
+}

config/webpack.prod.js

@@ -0,0 +1,85 @@
+/**
+ * @author: Yuki Takei <yuki@weseek.co.jp>
+ */
+
+const helpers = require('./helpers');
+const webpackMerge = require('webpack-merge'); // used to merge webpack configs
+const commonConfig = require('./webpack.common.js'); // the settings that are common to prod and dev
+
+/**
+ * Webpack Plugins
+ */
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const IgnorePlugin = require('webpack/lib/IgnorePlugin');
+const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
+const OptimizeJsPlugin = require('optimize-js-plugin');
+
+/**
+ * Webpack Constants
+ */
+const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
+const HOST = process.env.HOST || 'localhost';
+const PORT = process.env.PORT || 3000;
+
+module.exports = function (env) {
+  return webpackMerge(commonConfig({ env: ENV }), {
+    devtool: 'source-map',
+    output: {
+      path: helpers.root('public/js'),
+      publicPath: '/js/',
+      filename: '[name].[chunkhash].bundle.js',
+      sourceMapFilename: '[name].[chunkhash].bundle.map',
+      chunkFilename: '[id].[chunkhash].chunk.js'
+    },
+    module: {
+      rules: [
+      ]
+    },
+    plugins: [
+
+      new OptimizeJsPlugin({
+        sourceMap: false
+      }),
+
+      new UglifyJsPlugin({
+        // beautify: true, //debug
+        // mangle: false, //debug
+        // dead_code: false, //debug
+        // unused: false, //debug
+        // deadCode: false, //debug
+        // compress: {
+        //   screw_ie8: true,
+        //   keep_fnames: true,
+        //   drop_debugger: false,
+        //   dead_code: false,
+        //   unused: false
+        // }, // debug
+        // comments: true, //debug
+
+
+        beautify: false, //prod
+        output: {
+          comments: false
+        }, //prod
+        mangle: {
+          screw_ie8: true
+        }, //prod
+        compress: {
+          screw_ie8: true,
+          warnings: false,
+          conditionals: true,
+          unused: true,
+          comparisons: true,
+          sequences: true,
+          dead_code: true,
+          evaluate: true,
+          if_return: true,
+          join_vars: true,
+          negate_iife: false // we need this for lazy v8
+        },
+      }),
+
+    ],
+
+  });
+}

lib/crowi/dev.js

@@ -0,0 +1,42 @@
+const debug = require('debug')('crowi:crowi:dev');
+const path = require('path');
+const webpack = require('webpack');
+const helpers = require('./helpers')
+
+
+class CrowiDev {
+
+  /**
+   * Creates an instance of CrowiDev.
+   * @param {Crowi} crowi
+   * @param {any} server http server
+   * @param {any} app express
+   *
+   * @memberOf CrowiDev
+   */
+  constructor(crowi, server, app) {
+    this.crowi = crowi;
+    this.server = server;
+    this.app = app;
+  }
+
+  setupTools() {
+    this.setupEasyLiveReload();
+  }
+
+  setupEasyLiveReload() {
+    const livereload = require('easy-livereload');
+    this.app.use(livereload({
+      watchDirs: [
+        path.join(this.crowi.viewsDir),
+        path.join(this.crowi.publicDir),
+      ],
+      checkFunc: function(x) {
+        return /\.(html|css|js)$/.test(x);
+      },
+    }));
+  }
+
+}
+
+module.exports = CrowiDev

lib/crowi/express-init.js

@@ -2,6 +2,7 @@
 
 module.exports = function(crowi, app) {
   var debug = require('debug')('crowi:crowi:express-init')
+    , path           = require('path')
     , express        = require('express')
     , bodyParser     = require('body-parser')
     , cookieParser   = require('cookie-parser')
@@ -11,6 +12,7 @@ module.exports = function(crowi, app) {
     , flash          = require('connect-flash')
     , cons           = require('consolidate')
     , swig           = require('swig')
+    , webpackAssets  = require('express-webpack-assets')
     , i18next        = require('i18next')
     , i18nFsBackend  = require('i18next-node-fs-backend')
     , i18nSprintf    = require('i18next-sprintf-postprocessor')
@@ -30,7 +32,7 @@ module.exports = function(crowi, app) {
     .use(i18nFsBackend)
     .use(i18nSprintf)
     .init({
-      debug: (crowi.node_env === 'development'),
+      // debug: true,
       fallbackLng: [User.LANG_EN_US],
       whitelist: Object.keys(User.getLanguageLabels()).map((k) => User[k]),
       backend: {
@@ -91,6 +93,10 @@ module.exports = function(crowi, app) {
   app.set('port', crowi.port);
   app.use(express.static(crowi.publicDir));
   app.engine('html', cons.swig);
+  app.use(webpackAssets(
+    path.join(crowi.publicDir, 'js/webpack-assets.json'),
+    { devMode: (crowi.node_env === 'development') })
+  );
   app.set('view cache', false);
   app.set('view engine', 'html');
   app.set('views', crowi.viewsDir);

lib/crowi/helpers.js

@@ -0,0 +1,20 @@
+/**
+ * @author: @AngularClass
+ * @author: Yuki Takei <yuki@weseek.co.jp>
+ */
+
+var path = require('path');
+
+const EVENT = process.env.npm_lifecycle_event || '';
+
+// Helper functions
+var ROOT = path.resolve(__dirname, '..');
+
+function hasProcessFlag(flag) {
+  return process.argv.join('').indexOf(flag) > -1;
+}
+
+var root = path.join.bind(path, ROOT);
+
+exports.hasProcessFlag = hasProcessFlag;
+exports.root = root;

lib/crowi/index.js

@@ -9,6 +9,7 @@ var debug = require('debug')('crowi:crowi')
 
   , mongoose    = require('mongoose')
 
+  , helpers = require('./helpers')
   , models = require('../models')
   ;
 
@@ -18,26 +19,17 @@ function Crowi (rootdir, env)
 
   this.version = pkg.version;
 
-  this.rootDir   = rootdir;
-  this.pluginDir = path.join(this.rootDir, 'node_modules') + sep;
-  this.publicDir = path.join(this.rootDir, 'public') + sep;
-  this.libDir    = path.join(this.rootDir, 'lib') + sep;
-  this.eventsDir = path.join(this.libDir, 'events') + sep;
-  this.localeDir = path.join(this.rootDir, 'locales') + sep;
+  this.rootDir     = rootdir;
+  this.pluginDir   = path.join(this.rootDir, 'node_modules') + sep;
+  this.publicDir   = path.join(this.rootDir, 'public') + sep;
+  this.libDir      = path.join(this.rootDir, 'lib') + sep;
+  this.eventsDir   = path.join(this.libDir, 'events') + sep;
+  this.localeDir   = path.join(this.rootDir, 'locales') + sep;
   this.resourceDir = path.join(this.rootDir, 'resource') + sep;
-  this.viewsDir  = path.join(this.libDir, 'views') + sep;
-  this.mailDir   = path.join(this.viewsDir, 'mail') + sep;
-  this.tmpDir    = path.join(this.rootDir, 'tmp') + sep;
-  this.cacheDir  = path.join(this.tmpDir, 'cache');
-
-  this.assets    = {};
-  try {
-    var assets = require(this.publicDir + '/js/manifest.json') || {};
-    var pluginAssets = require(this.publicDir + '/js/manifest-plugin.json') || {};
-    this.assets = Object.assign(assets, pluginAssets);
-  } catch (e) {
-    // ignore
-  }
+  this.viewsDir    = path.join(this.libDir, 'views') + sep;
+  this.mailDir     = path.join(this.viewsDir, 'mail') + sep;
+  this.tmpDir      = path.join(this.rootDir, 'tmp') + sep;
+  this.cacheDir    = path.join(this.tmpDir, 'cache');
 
   this.config = {};
   this.searcher = null;
@@ -50,6 +42,10 @@ function Crowi (rootdir, env)
 
   this.env = env;
   this.node_env = this.env.NODE_ENV || 'development';
+  if (helpers.hasProcessFlag('prod') || helpers.hasProcessFlag('production')) {
+    this.node_env = process.env.NODE_ENV = 'production';
+  }
+
   this.port = this.env.PORT || 3000;
 
   this.events = {
@@ -119,23 +115,6 @@ Crowi.prototype.getConfig = function() {
   return this.config;
 };
 
-Crowi.prototype.getAssetList = function() {
-  if (this.node_env !== 'development') {
-    return this.assets;
-  }
-
-  // reload manifest
-  try {
-    var assets = require(this.publicDir + '/js/manifest.json') || {};
-    var pluginAssets = require(this.publicDir + '/js/manifest-plugin.json') || {};
-    this.assets = Object.assign(assets, pluginAssets);
-  } catch (e) {
-    // ignore
-    debug('Failed to reload assets on development', e);
-  }
-  return this.assets;
-};
-
 // getter/setter of model instance
 //
 Crowi.prototype.model = function(name, model) {
@@ -316,17 +295,33 @@ Crowi.prototype.start = function() {
     , server
     , io;
 
-  return self.buildServer()
+  return Promise.resolve()
+    .then(function() {
+      return self.init()
+    })
+    .then(function() {
+      return self.buildServer();
+    })
     .then(function(app) {
       server = http.createServer(app).listen(self.port, function() {
-        console.log('[' + self.node_env + '] Express server listening on port ' + self.port);
+        console.log(`[${self.node_env}] Express server listening on port ${self.port}`);
       });
 
+      // setup Live Reload Tools
+      if (self.node_env === 'development') {
+        const CrowiDev = require('./dev');
+        const crowiDev = new CrowiDev(self, server, app);
+        crowiDev.setupTools();
+      }
+
       io = require('socket.io')(server);
       io.sockets.on('connection', function (socket) {
       });
       self.io = io;
 
+      // setup Express Routes
+      self.setupRoutesAtLast(app);
+
       return app;
     });
 };
@@ -347,8 +342,6 @@ Crowi.prototype.buildServer = function() {
     require('../plugins')(this, app);
   }
 
-  require('../routes')(this, app);
-
   if (env == 'development') {
     //swig.setDefaults({ cache: false });
     app.use(errorHandler({ dumpExceptions: true, showStack: true }));
@@ -367,6 +360,14 @@ Crowi.prototype.buildServer = function() {
   return Promise.resolve(app);
 };
 
+/**
+ * setup Express Routes
+ * !! this must be at last because it includes '/*' route !!
+ */
+Crowi.prototype.setupRoutesAtLast = function(app) {
+  require('../routes')(this, app);
+}
+
 /**
  * require API for plugins
  *

lib/util/swigFunctions.js

@@ -10,20 +10,6 @@ module.exports = function(crowi, app, req, locals) {
     return req.csrfToken;
   };
 
-  locals.assets = function(file) {
-    var assetList = crowi.getAssetList();
-    var baseName = file.match(/\/([^\/]+)$/)[1];
-
-    var baseNameWithHash = '';
-    if (assetList[baseName]) {
-      baseNameWithHash = assetList[baseName];
-    } else {
-      return file;
-    }
-
-    return file.replace(baseName, baseNameWithHash);
-  };
-
   locals.googleLoginEnabled = function() {
     var config = crowi.getConfig()
     return config.crowi['google:clientId'] && config.crowi['google:clientSecret'];

lib/views/_form.html

@@ -61,4 +61,4 @@
   <div class="file-module hidden">
   </div>
 </div>
-<script src="{{ assets('/js/form.js') }}"></script>
+<script src="{{ webpack_asset('legacy-form').js }}" defer></script>

lib/views/layout/admin.html

@@ -1,6 +1,6 @@
 {% extends '2column.html' %}
 
 {% block footer %}
-  <script src="{{ assets('/js/admin.js') }}"></script>
+  <script src="{{ webpack_asset('legacy-admin').js }}"></script>
 {% endblock footer %}
 

lib/views/layout/layout.html

@@ -22,9 +22,20 @@
   <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
   <link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
 
-  <link rel="stylesheet" href="/css/crowi{% if env  == 'production' %}.min{% endif %}.css">
+  {% if env === 'development' %}
+    <script src="{{ webpack_asset('dev').js }}" async></script>
+    <script src="/js/dll/vendor.dll.js" defer></script>
+  {% endif %}
+
+  <script src="{{ webpack_asset('style').js }}"></script>
+  <script src="{{ webpack_asset('commons').js }}" defer></script>
+  {% if config.crowi['plugin:isEnabledPlugins'] %}
+    <script src="{{ webpack_asset('plugin').js }}" defer></script>
+  {% endif %}
+  <script src="{{ webpack_asset('legacy').js }}" defer></script>
+  <script src="{{ webpack_asset('app').js }}" defer></script>
 
-  <script src="{{ assets('/js/bundled.js') }}"></script>
+  <!-- Google Fonts -->
   <link href='//fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
   <!-- Font Awesome -->
   <link href='//cdn.jsdelivr.net/fontawesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'>
@@ -145,9 +156,4 @@
 </body>
 {% endblock %}
 
-{% if config.crowi['plugin:isEnabledPlugins'] %}
-<script src="{{ assets('/js/plugin.js') }}"></script>
-{% endif %}
-<script src="{{ assets('/js/crowi.js') }}"></script>
-<script src="{{ assets('/js/app.js') }}"></script>
 </html>

lib/views/page_presentation.html

@@ -10,7 +10,14 @@
     <link rel="stylesheet" type="text/css" href="/css/crowi-reveal{% if env  == 'production' %}.min{% endif %}.css">
     <link rel="stylesheet" type="text/css" href="/js/reveal/lib/css/zenburn.css">
 
-    <script src="{{ assets('/js/bundled.js') }}"></script>
+    {% if env === 'development' %}
+      <script src="{{ webpack_asset('style').js }}"></script>
+      <!--<script src="{{ webpack_asset('dev').js }}" async></script>-->
+      <script src="/js/dll/vendor.dll.js" defer></script>
+    {% endif %}
+
+    <script src="{{ webpack_asset('commons').js }}" defer></script>
+    <script src="{{ webpack_asset('presentation').js }}" defer></script>
 
     <title>{{ path|path2name }} | {{ path }}</title>
   </head>
@@ -29,6 +36,5 @@
       </div>
     </div>
 
-    <script src="{{ assets('/js/presentation.js') }}"></script>
   </body>
 </html>

package.json

@@ -92,36 +92,53 @@
     "redis": "~2.6.5",
     "reveal.js": "~3.2.0",
     "socket.io": "~1.3.0",
-    "socket.io-client": "~1.3.0",
+    "socket.io-client": "~1.7.0",
     "sprintf": "~0.1.5",
+    "supervisor": "^0.12.0",
     "swig": "~1.4.0",
     "vinyl-source-stream": "~1.1.0"
   },
   "devDependencies": {
+    "assets-webpack-plugin": "^3.5.1",
     "chai": "~1.10.0",
+    "concurrently": "^3.4.0",
+    "copy-webpack-plugin": "^4.0.0",
     "css-loader": "^0.27.1",
+    "easy-livereload": "^1.2.0",
+    "express-webpack-assets": "0.0.2",
     "mocha": "~2.2.0",
+    "node-dev": "^3.1.3",
+    "optimize-js-plugin": "0.0.4",
     "proxyquire": "~1.4.0",
+    "reload": "^1.1.1",
+    "rimraf": "^2.6.1",
     "sass-loader": "^6.0.3",
     "sinon": "~1.14.0",
     "sinon-chai": "~2.7.0",
     "style-loader": "^0.13.2",
     "to-string-loader": "^1.1.5",
-    "webpack": "~2.2.1",
-    "webpack-manifest-plugin": "~1.1.0",
-    "webpack-stream": "~3.2.0"
+    "webpack": "2.2.0",
+    "webpack-dev-server": "2.4.1",
+    "webpack-dll-bundles-plugin": "^1.0.0-beta.5",
+    "webpack-merge": "~3.0.0"
   },
   "license": "MIT",
   "scripts": {
-    "start": "node app.js",
-    "test": "gulp test",
-    "build": "gulp",
-    "webpack": "webpack",
-    "webpack:plugin": "webpack --config webpack.plugin.config.js",
-    "postinstall": "gulp"
-  },
-  "env": {
-    "NODE_ENV": "production"
+    "build:dev:watch": "npm run build:dev -- --watch",
+    "build:dev": "npm run clean:public && webpack --config config/webpack.dev.js  --progress --profile",
+    "build:prod": "npm run clean:public && webpack --config config/webpack.prod.js  --progress --profile --bail",
+    "build": "npm run build:dev",
+    "clean:public": "npm run rimraf -- public/js",
+    "clean:dll": "npm run rimraf -- dll",
+    "clean": "npm cache clean && npm run rimraf -- public/js dll",
+    "prestart": "npm run build:prod",
+    "rimraf": "rimraf",
+    "server:watch": "node-dev app.js",
+    "server:prod": "node app.js --production",
+    "server": "node app.js",
+    "start": "npm run server:prod",
+    "test": "",
+    "webpack": "webpack"
   },
   "bugs": {
     "url": "https://github.com/crowi/crowi/issues"

public/js/.gitignore

@@ -1 +0,0 @@
-

public/js/reveal

@@ -1 +0,0 @@
-../../node_modules/reveal.js/

resource/css/crowi.scss

@@ -2,7 +2,8 @@
 @import 'utilities';
 
 // import bootstrap
-@import 'bootstrap';
+$bootstrap-sass-asset-helper: true;
+@import "~bootstrap-sass/assets/stylesheets/bootstrap";
 
 // crowi component
 @import 'layout';

resource/js/app.js

@@ -35,7 +35,7 @@ if (isEnabledPlugins) {
   var crowiPlugin = window.crowiPlugin;
   crowiPlugin.installAll(crowi, crowiRenderer);
 }
-  
+
 const componentMappings = {
   'search-top': <HeaderSearchBox />,
   'search-page': <SearchPage />,

resource/js/dev.js

@@ -0,0 +1,3 @@
+/**
+ * dev tools
+ */

resource/js/crowi-form.js → resource/js/legacy/crowi-form.js

@@ -2,9 +2,9 @@ $(function() {
   var pageId = $('#content-main').data('page-id');
   var pagePath= $('#content-main').data('path');
 
-  //require('inline-attachment/src/inline-attachment');
-  //require('jquery.selection');
-  //require('bootstrap-sass');
+  require('bootstrap-sass');
+  require('inline-attachment/src/inline-attachment');
+  require('./thirdparty-js/jquery.selection');
 
   // show/hide
   function FetchPagesUpdatePostAndInsert(path) {

resource/js/crowi.js → resource/js/legacy/crowi.js

@@ -4,8 +4,8 @@
 
 var io = require('socket.io-client');
 
-//require('bootstrap-sass');
-//require('jquery.cookie');
+require('bootstrap-sass');
+require('jquery.cookie');
 
 var Crowi = {};
 
@@ -740,7 +740,7 @@ $(function() {
 
     //
     var me = $('body').data('me');
-    var socket = io();
+    var socket = io('localhost', {forceNew: true});
     socket.on('page edited', function (data) {
       if (data.user._id != me
         && data.page.path == pagePath) {

resource/styles/index.js

@@ -0,0 +1 @@
+import '../css/crowi.scss';

webpack.config.js

@@ -1,55 +1,15 @@
-var path = require('path');
-var webpack = require('webpack');
-var UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
-
-var ManifestPlugin = require('webpack-manifest-plugin');
-
-var config = {
-  entry: {
-    app:          './resource/js/app.js',
-    crowi:        './resource/js/crowi.js',
-    presentation: './resource/js/crowi-presentation.js',
-    form:         './resource/js/crowi-form.js',
-    admin:        './resource/js/crowi-admin.js',
-  },
-  output: {
-    path: path.join(__dirname + "/public/js"),
-    filename: "[name].[hash].js"
-  },
-  resolve: {
-    modules: [
-      './node_modules', './resource/thirdparty-js',
-    ],
-  },
-  module: {
-    rules: [
-      {
-        test: /.jsx?$/,
-        exclude: /node_modules/,
-        use: [{
-          loader: 'babel-loader',
-        }]
-      }
-    ]
-  },
-  plugins: []
-};
-
-if (process.env && process.env.NODE_ENV !== 'development') {
-  config.plugins = [
-    new webpack.DefinePlugin({
-      'process.env':{
-        'NODE_ENV': JSON.stringify('production')
-      }
-    }),
-    new UglifyJsPlugin({
-      compress:{
-        warnings: false
-      }
-    }),
-  ];
+// Look in ./config folder for webpack.dev.js
+switch (process.env.NODE_ENV) {
+  case 'prod':
+  case 'production':
+    module.exports = require('./config/webpack.prod')({env: 'production'});
+    break;
+  case 'test':
+  case 'testing':
+    module.exports = require('./config/webpack.test')({env: 'test'});
+    break;
+  case 'dev':
+  case 'development':
+  default:
+    module.exports = require('./config/webpack.dev')({env: 'development'});
 }
-
-config.plugins.push(new ManifestPlugin());
-
-module.exports = config;

webpack.plugin.config.js

@@ -1,61 +0,0 @@
-var path = require('path');
-var webpack = require('webpack');
-var UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
-
-var ManifestPlugin = require('webpack-manifest-plugin');
-
-var config = {
-  entry: {
-    plugin: './resource/js/plugin.js',
-  },
-  output: {
-    path: path.join(__dirname + "/public/js"),
-    filename: "[name].[hash].js"
-  },
-  resolve: {
-    modules: [
-      './node_modules', './plugin/node_modules',
-    ],
-  },
-  module: {
-    rules: [
-      {
-        test: /.jsx?$/,
-        exclude: /node_modules/,
-        use: [{
-          loader: 'babel-loader',
-        }]
-      },
-      {
-        test: /\.css$/,
-        use: ['style-loader', 'css-loader'],
-      },
-      {
-        test: /\.scss$/,
-        use: ['style-loader', 'css-loader', 'sass-loader'],
-      },
-    ]
-  },
-  plugins: []
-};
-
-if (process.env && process.env.NODE_ENV !== 'development') {
-  config.plugins = [
-    new webpack.DefinePlugin({
-      'process.env':{
-        'NODE_ENV': JSON.stringify('production')
-      }
-    }),
-    new UglifyJsPlugin({
-      compress:{
-        warnings: false
-      }
-    }),
-  ];
-}
-
-config.plugins.push(new ManifestPlugin({
-  fileName: 'manifest-plugin.json'
-}));
-
-module.exports = config;