archetype-react-app: webpack 2.0 working with few features disabled

electrode-io · Feb 1, 2017 · 2aa3e11 · 2aa3e11
1 parent 730a0fb
commit 2aa3e11
Show file tree

Hide file tree

Showing 15 changed files with 171 additions and 69 deletions.
diff --git a/packages/electrode-archetype-react-app-dev/config/babel/babelrc-client b/packages/electrode-archetype-react-app-dev/config/babel/babelrc-client
@@ -1,15 +1,52 @@
 {
   "presets": [
-    "es2015",
     "es2015-loose",
     "react"
   ],
   "plugins": [
+    "transform-es2015-template-literals",
+    "transform-es2015-literals",
+    "transform-es2015-function-name",
+    "transform-es2015-arrow-functions",
+    "transform-es2015-block-scoped-functions",
+    "transform-es2015-classes",
+    "transform-es2015-object-super",
+    "transform-es2015-shorthand-properties",
+    "transform-es2015-computed-properties",
+    "transform-es2015-for-of",
+    "transform-es2015-sticky-regex",
+    "transform-es2015-unicode-regex",
+    "check-es2015-constants",
+    "transform-es2015-spread",
+    "transform-es2015-parameters",
+    "transform-es2015-destructuring",
+    "transform-es2015-block-scoping",
+    "transform-es2015-typeof-symbol",
+    [
+      "transform-regenerator",
+      {
+        "async": false,
+        "asyncGenerators": false
+      }
+    ],
     "babel-plugin-transform-object-rest-spread",
-    ["babel-plugin-react-intl", {
-      "messagesDir": "./tmp/messages/",
-      "enforceDescriptions": true
-    }],
+    [
+      "babel-plugin-i18n-id-hashing",
+      {
+        "varsContainingMessages": [
+          "defaultMessages",
+          "translations"
+        ]
+      }
+    ],
+    [
+      "babel-plugin-react-intl",
+      {
+        "messagesDir": "./tmp/messages/",
+        "enforceDescriptions": true
+      }
+    ],
+    "transform-node-env-inline",
     "lodash",
     "transform-runtime"
   ],

diff --git a/packages/electrode-archetype-react-app-dev/config/webpack/base-test.js b/packages/electrode-archetype-react-app-dev/config/webpack/base-test.js
@@ -19,7 +19,7 @@ var testConfig = {
     ]
   },
   context: Path.resolve("test", "client"),
-  debug: false,
+  // debug: false, // TODO: webpack 2.0 invalid
   devServer: {
     stats: "errors-only"  // only show errors
   },

diff --git a/packages/electrode-archetype-react-app-dev/config/webpack/base.js b/packages/electrode-archetype-react-app-dev/config/webpack/base.js
@@ -11,7 +11,7 @@ var fontsConfig = require("./partial/fonts");
 var imagesConfig = require("./partial/images");
 var statsConfig = require("./partial/stats");
 var isomorphicConfig = require("./partial/isomorphic");
-var pwaConfig = require("./partial/pwa");
+// var pwaConfig = require("./partial/pwa");
 var archetype = require("../archetype");
 var Path = archetype.Path;
 var AppMode = archetype.AppMode;
@@ -50,10 +50,10 @@ var entry = appEntry();
 var multiBundle = _.isObject(entry);
 
 var baseConfig = {
-  __wmlMultiBundle: multiBundle,
+  // __wmlMultiBundle: multiBundle, // TODO: webpack 2.0 invalid
   cache: true,
   context: context,
-  debug: false,
+  // debug: false, // TODO: webpack 2.0 invalid
   entry: entry,
   output: {
     path: Path.resolve("dist", "js"),
@@ -68,18 +68,19 @@ var baseConfig = {
     modules: [
       archetypeNodeModules,
       archetypeDevNodeModules,
-      AppMode.isSrc && Path.resolve(AppMode.src.dir) || null,
-      process.cwd(),
-      "node_modules"
-    ].concat(archetype.webpack.modulesDirectories).filter(_.identity),
+      AppMode.isSrc && Path.resolve(AppMode.src.dir) || null
+    ]
+      .concat(archetype.webpack.modulesDirectories)
+      .concat(["node_modules"])
+      .filter(_.identity),
     extensions: [".js", ".jsx", ".json"]
   },
   resolveLoader: {
     modules: [
       archetypeNodeModules,
       archetypeDevNodeModules,
       Path.resolve("lib"),
-      process.cwd(),
+      // process.cwd(),
       "node_modules"
     ].filter(_.identity)
   }
@@ -92,6 +93,6 @@ module.exports = _.flow(
   fontsConfig(),
   imagesConfig(),
   statsConfig(),
-  isomorphicConfig(),
-  pwaConfig()
+  isomorphicConfig()
+  // pwaConfig() // TODO: fix pwa for webpack 2.0
 )();
diff --git a/packages/electrode-archetype-react-app-dev/config/webpack/partial/babel.js b/packages/electrode-archetype-react-app-dev/config/webpack/partial/babel.js
@@ -11,23 +11,23 @@ module.exports = function (babel) {
   var babelExcludeRegex = new RegExp(`(node_modules|\b${Path.join(AppMode.src.client, "vendor")}\b)`);
   return function (config) {
     var hmr = process.env.HMR !== undefined;
-
+    var babelLoader = {
+      test: /\.jsx?$/,
+      exclude: babelExcludeRegex,
+      use: [
+        hmr && "react-hot-loader",
+        {
+          loader: "babel-loader",
+          options: babel
+        }
+      ].filter(_.identity)
+    };
+    if (hmr) {
+      babelLoader.include = Path.resolve(AppMode.src.client);
+    }
     return mergeWebpackConfig(config, {
       module: {
-        rules: [
-          {
-            test: /\.jsx?$/,
-            include: hmr && Path.resolve(AppMode.src.client),
-            exclude: babelExcludeRegex,
-            use: [
-              hmr && "react-hot-loader",
-              {
-                loader: "babel-loader",
-                options: babel
-              }
-            ].filter(_.identity)
-          }
-        ]
+        rules: [ babelLoader ]
       }
     });
   };

diff --git a/packages/electrode-archetype-react-app-dev/config/webpack/partial/dev.js b/packages/electrode-archetype-react-app-dev/config/webpack/partial/dev.js
@@ -57,7 +57,7 @@ module.exports = function () {
       plugins: [
         new webpack.SourceMapDevToolPlugin("[file].map"),
         new ExtractTextPlugin({filename: "[name].style.css"}),
-        new webpack.NoErrorsPlugin()
+        new webpack.NoEmitOnErrorsPlugin()
       ]
     });
 

diff --git a/packages/electrode-archetype-react-app-dev/config/webpack/partial/extract.js b/packages/electrode-archetype-react-app-dev/config/webpack/partial/extract.js
@@ -7,8 +7,9 @@ var mergeWebpackConfig = require("webpack-partial").default;
 var glob = require("glob");
 var ExtractTextPlugin = require("extract-text-webpack-plugin");
 var CSSSplitPlugin = require("css-split-webpack-plugin").default;
-var atImport = require("postcss-import");
-var cssnext = require("postcss-cssnext");
+// TODO: fix postcss for webpack 2.0
+// var atImport = require("postcss-import");
+// var cssnext = require("postcss-cssnext");
 
 var autoprefixer = require("autoprefixer-stylus");
 var cssLoader = require.resolve("css-loader");
@@ -52,33 +53,46 @@ module.exports = function () {
 
     // By default, this archetype assumes you are using CSS-Modules + CSS-Next
     var rules = [{
-      name: "extract-css-loader",
       test: /\.css$/,
       loader: ExtractTextPlugin.extract({fallbackLoader: styleLoader, loader: cssQuery, publicPath: ""})
     }];
 
     if (!cssModuleSupport) {
       rules.push({
-        name: "extract-stylus-loader",
         test: /\.styl$/,
         loader: ExtractTextPlugin.extract({fallbackLoader: styleLoader, loader: stylusQuery, publicPath: ""})
       });
     }
 
+    if (cssModuleSupport) {
+      rules.push({
+        test: /\.scss$/,
+        use: [
+          {
+            loader: "postcss-loader",
+            options: {
+              browsers: ["last 2 versions", "ie >= 9", "> 5%"]
+            }
+          }
+        ]
+      });
+    }
+
     return mergeWebpackConfig(config, {
       module: {rules},
-      postcss: function () {
-        return cssModuleSupport ? [atImport, cssnext({
-          browsers: ["last 2 versions", "ie >= 9", "> 5%"]
-        })] : [];
-      },
-      stylus: {
-        use: function () {
-          return !cssModuleSupport ? [autoprefixer({
-            browsers: ["last 2 versions", "ie >= 9", "> 5%"]
-          })] : [];
-        }
-      },
+      // TODO: invalid with webpack 2.0
+      // postcss: function () {
+      //   return cssModuleSupport ? [atImport, cssnext({
+      //     browsers: ["last 2 versions", "ie >= 9", "> 5%"]
+      //   })] : [];
+      // },
+      // stylus: {
+      //   use: function () {
+      //     return !cssModuleSupport ? [autoprefixer({
+      //       browsers: ["last 2 versions", "ie >= 9", "> 5%"]
+      //     })] : [];
+      //   }
+      // },
       plugins: [
         new ExtractTextPlugin(
           {filename: config.__wmlMultiBundle ? "[name].style.[hash].css" : "style.[hash].css"}),

diff --git a/packages/electrode-archetype-react-app-dev/config/webpack/partial/fail.js b/packages/electrode-archetype-react-app-dev/config/webpack/partial/fail.js
@@ -1,7 +1,7 @@
 "use strict";
 
 var mergeWebpackConfig = require("webpack-partial").default;
-var FailPlugin = require("webpack-fail-plugin");
+var FailPlugin = require("../plugins/fail-plugin");
 
 module.exports = function () {
   return function (config) {

diff --git a/packages/electrode-archetype-react-app-dev/config/webpack/partial/fonts.js b/packages/electrode-archetype-react-app-dev/config/webpack/partial/fonts.js
@@ -12,7 +12,6 @@ module.exports = function () {
       module: {
         rules: [
           {
-            name: "woff",
             test: /\.(woff|woff2)(\?\S*)?$/i,
             use: [
               {
@@ -26,7 +25,6 @@ module.exports = function () {
             ]
           },
           {
-            name: "fonts",
             test: /\.(eot|ttf)(\?\S*)?$/i,
             use: [
               fileLoader,

diff --git a/packages/electrode-archetype-react-app-dev/config/webpack/partial/images.js b/packages/electrode-archetype-react-app-dev/config/webpack/partial/images.js
@@ -23,7 +23,6 @@ module.exports = function () {
     return mergeWebpackConfig(config, {
       module: {
         rules: [{
-          name: "images",
           test: /\.(jpe?g|png|gif|svg)(\?\S*)?$/i,
           use: [
             {

diff --git a/packages/electrode-archetype-react-app-dev/config/webpack/partial/pwa.js b/packages/electrode-archetype-react-app-dev/config/webpack/partial/pwa.js
@@ -188,7 +188,7 @@ module.exports = function () {
     }
 
     return mergeWebpackConfig(config, {
-      __wmlMultiBundle: typeof entry === 'object',
+      // __wmlMultiBundle: typeof entry === 'object', // TODO: webpack 2.0 invalid
       entry: entry,
       output: output,
       module: {

diff --git a/packages/electrode-archetype-react-app-dev/config/webpack/partial/sourcemaps-remote.js b/packages/electrode-archetype-react-app-dev/config/webpack/partial/sourcemaps-remote.js
@@ -8,10 +8,10 @@ module.exports = function () {
   return function (config) {
     return mergeWebpackConfig(config, {
       plugins: [
-        new SourceMapDevToolPlugin(
-          "../map/[file].map",
-          `\n//# sourceMappingURL=http://${archetype.webpack.devHostname}:${archetype.webpack.devPort}/dist/map/[url]`
-        )
+        new SourceMapDevToolPlugin({
+          filename: "../map/[file].map",
+          append: `\n//# sourceMappingURL=http://${archetype.webpack.devHostname}:${archetype.webpack.devPort}/dist/map/[url]`
+        })
       ]
     });
   };

diff --git a/packages/electrode-archetype-react-app-dev/config/webpack/plugins/fail-plugin.js b/packages/electrode-archetype-react-app-dev/config/webpack/plugins/fail-plugin.js
@@ -0,0 +1,18 @@
+"use strict";
+
+module.exports = function() {
+  var isWatch = true;
+
+  this.plugin("run", function(compiler, callback) {
+    isWatch = false;
+    callback.call(compiler);
+  });
+
+  this.plugin("done", function(stats) {
+    if (stats.compilation.errors && stats.compilation.errors.length && !isWatch) {
+      process.on('beforeExit', function() {
+        process.exit(1);
+      });
+    }
+  });
+};
diff --git a/packages/electrode-archetype-react-app-dev/package.json b/packages/electrode-archetype-react-app-dev/package.json
@@ -48,7 +48,6 @@
     "eslint-plugin-filenames": "^1.1.0",
     "eslint-plugin-react": "^6.5.0",
     "extract-text-webpack-plugin": "^2.0.0-rc.2",
-    "favicons-webpack-plugin": "0.0.7",
     "file-loader": "^0.8.4",
     "fs-extra": "^0.26.5",
     "glob": "^7.0.6",
@@ -105,7 +104,6 @@
     "webpack-config": "^6.1.3",
     "webpack-dev-server": "^2.2.0",
     "webpack-disk-plugin": "0.0.2",
-    "webpack-fail-plugin": "^1.0.5",
     "webpack-partial": "^1.1.2",
     "webpack-stats-plugin": "^0.1.1"
   },

diff --git a/packages/electrode-archetype-react-app/arch-gulpfile.js b/packages/electrode-archetype-react-app/arch-gulpfile.js
@@ -288,8 +288,12 @@ function makeTasks(gulp) {
       task: [".clean.dist", "build-dist-dev-static"]
     },
 
-    "build-dist": [".clean.dist", ".clean.dll", "build-dist-dll", "build-dist-min", "build-dist:flatten-l10n",
-      "build-dist:merge-isomorphic-assets", "copy-dll", "build-dist:clean-tmp"],
+    // TODO: fix DLL for webpack 2.0
+    // "build-dist": [".clean.dist", ".clean.dll", "build-dist-dll", "build-dist-min", "build-dist:flatten-l10n",
+    //   "build-dist:merge-isomorphic-assets", "copy-dll", "build-dist:clean-tmp"],
+
+    "build-dist": [".clean.dist", "build-dist-min", "build-dist:flatten-l10n",
+      "build-dist:merge-isomorphic-assets", "build-dist:clean-tmp"],
 
     "build-dist-dev-static": {
       desc: false,