inject js to server's html templates

.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

config/webpack.common.js

@@ -39,7 +39,7 @@ module.exports = function (options) {
           test: /.jsx?$/,
           exclude: /node_modules/,
           use: [{
-            loader: 'babel-loader',
+            loader: 'babel-loader?cacheDirectory',
           }]
         },
         {
@@ -63,7 +63,7 @@ module.exports = function (options) {
     },
     plugins: [
       new AssetsPlugin({
-        path: helpers.root('dist'),
+        path: helpers.root('public/js'),
         filename: 'webpack-assets.json',
         prettyPrint: true,
       }),

config/webpack.dev.js

@@ -30,7 +30,8 @@ module.exports = function (options) {
   return webpackMerge(commonConfig({ env: ENV }), {
     devtool: 'cheap-module-source-map',
     output: {
-      path: helpers.root('dist'),
+      path: helpers.root('public/js'),
+      publicPath: "/js/",
       filename: '[name].bundle.js',
       sourceMapFilename: '[file].map',
     },
@@ -39,7 +40,18 @@ module.exports = function (options) {
       modules: [helpers.root('src'), helpers.root('node_modules')],
     },
     module: {
-      rules: [],
+      rules: [
+        {
+          test: /\.css$/,
+          use: ['style-loader', 'css-loader'],
+          include: [helpers.root('resource')]
+        },
+        {
+          test: /\.scss$/,
+          use: ['style-loader', 'css-loader', 'sass-loader'],
+          include: [helpers.root('resource')]
+        },
+      ],
     },
     plugins: [
       new DllBundlesPlugin({
@@ -51,7 +63,7 @@ module.exports = function (options) {
             'jquery.cookie',
           ],
         },
-        dllDir: helpers.root('dll'),
+        dllDir: helpers.root('public/js/dll'),
         webpackConfig: webpackMergeDll(commonConfig({env: ENV}), {
           devtool: 'cheap-module-source-map',
           plugins: [],

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: (crowi.node_env === 'development'),
       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/index.js

@@ -30,15 +30,6 @@ function Crowi (rootdir, env)
   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.config = {};
   this.searcher = null;
   this.mailer = {};
@@ -119,23 +110,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) {

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 }}"></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

@@ -24,7 +24,11 @@
 
   <link rel="stylesheet" href="/css/crowi{% if env  == 'production' %}.min{% endif %}.css">
 
-  <script src="{{ assets('/js/bundled.js') }}"></script>
+  {% if env === 'development' %}
+    <script src="/js/dll/vendor.dll.js"></script>
+  {% endif %}
+  <script src="{{ webpack_asset('commons').js }}"></script>
+
   <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'>
@@ -146,8 +150,8 @@
 {% endblock %}
 
 {% if config.crowi['plugin:isEnabledPlugins'] %}
-<script src="{{ assets('/js/plugin.js') }}"></script>
+<script src="{{ webpack_asset('plugin').js }}"></script>
 {% endif %}
-<script src="{{ assets('/js/crowi.js') }}"></script>
-<script src="{{ assets('/js/app.js') }}"></script>
+<script src="{{ webpack_asset('legacy').js }}"></script>
+<script src="{{ webpack_asset('app').js }}"></script>
 </html>

lib/views/page_presentation.html

@@ -10,7 +10,10 @@
     <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="/js/dll/vendor.dll.js"></script>
+    {% endif %}
+    <script src="{{ webpack_asset('commons').js }}"></script>
 
     <title>{{ path|path2name }} | {{ path }}</title>
   </head>
@@ -29,6 +32,6 @@
       </div>
     </div>
 
-    <script src="{{ assets('/js/presentation.js') }}"></script>
+    <script src="{{ webpack_asset('presentation').js }}"></script>
   </body>
 </html>

package.json

@@ -102,8 +102,11 @@
     "chai": "~1.10.0",
     "copy-webpack-plugin": "^4.0.0",
     "css-loader": "^0.27.1",
+    "express-webpack-assets": "0.0.2",
     "mocha": "~2.2.0",
+    "nodemon": "^1.11.0",
     "proxyquire": "~1.4.0",
+    "reload": "^1.1.1",
     "rimraf": "^2.6.1",
     "sass-loader": "^6.0.3",
     "sinon": "~1.14.0",
@@ -117,11 +120,13 @@
   },
   "license": "MIT",
   "scripts": {
-    "build:dev": "npm run clean:dist && webpack --config config/webpack.dev.js --progress --profile",
-    "build:prod": "npm run clean:dist && webpack --config config/webpack.prod.js  --progress --profile --bail",
+    "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:dist": "npm run rimraf -- dist",
-    "clean": "npm cache clean && npm run rimraf -- dist compiled dll",
+    "clean:public": "npm run rimraf -- public/js",
+    "clean:dll": "npm run rimraf -- dll",
+    "clean": "npm cache clean && npm run rimraf -- dist dll",
+    "nodemon": "nodemon",
     "rimraf": "rimraf",
     "test": "",
     "webpack": "webpack",

public/js/.gitignore

@@ -1 +0,0 @@
-

public/js/reveal

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