Merge pull request #871 from auth0/feature/webpack2

Migrating to webpack2
auth0 · Feb 22, 2017 · c2a6016 · c2a6016
2 parents 9274ede + 6165461
commit c2a6016
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 52 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,4 +1,25 @@
 {
-  "plugins": ["version-inline", "transform-css-import-to-string", "babel-plugin-stylus-compiler"],
-  "presets": [ ["es2015", {"loose": true} ], "stage-0", "react"]
-}
+  "plugins": [
+    "version-inline",
+    "transform-css-import-to-string",
+    "babel-plugin-stylus-compiler"
+  ],
+  "presets": [
+    [
+      "es2015",
+      {
+        "loose": true,
+        "modules": false
+      }
+    ],
+    "stage-0",
+    "react"
+  ],
+  "env": {
+    "test": {
+      "plugins": [
+        "transform-es2015-modules-commonjs"
+      ]
+    }
+  }
+}
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -5,10 +5,9 @@ const fs = require("fs");
 const pkg = require("./package");
 const webpack = require("webpack");
 const webpackConfig = require("./webpack.config.js");
-const SmartBannerPlugin = require("smart-banner-webpack-plugin");
 const UnminifiedWebpackPlugin = require("unminified-webpack-plugin");
 
-module.exports = function(grunt) {
+module.exports = function (grunt) {
 
   const pkg_info = grunt.file.readJSON("package.json");
 
@@ -24,10 +23,10 @@ module.exports = function(grunt) {
         files: [
           {
             expand: true,
-            cwd:    "src",
-            src:    ["**/*.js", "**/*.jsx"],
-            dest:   "lib",
-            ext:    '.js'
+            cwd: "src",
+            src: ["**/*.js", "**/*.jsx"],
+            dest: "lib",
+            ext: '.js'
           }
         ]
       }
@@ -49,28 +48,29 @@ module.exports = function(grunt) {
           filename: 'lock.min.js'
         },
         watch: false,
-        keepalive: false,
-        inline: false,
-        hot: false,
         devtool: 'source-map',
         plugins: [
+          new webpack.LoaderOptionsPlugin({
+            minimize: true,
+            debug: false
+          }),
           new webpack.DefinePlugin({
             'process.env': {
               'NODE_ENV': JSON.stringify('production')
             }
           }),
-          new webpack.optimize.DedupePlugin(),
-          new webpack.optimize.OccurrenceOrderPlugin(),
           new webpack.optimize.AggressiveMergingPlugin(),
           new webpack.optimize.UglifyJsPlugin({
             compress: { warnings: false, screw_ie8: true },
+            sourceMap: true,
             comments: false
           }),
           new UnminifiedWebpackPlugin(),
-          new SmartBannerPlugin(
-            `[filename] v${pkg_info.version}\n\nAuthor: ${pkg_info.author}\nDate: ${new Date().toLocaleString()}\nLicense: ${pkg_info.license}\n`,
-            { raw: false, entryOnly: true }
-          )
+          new webpack.BannerPlugin({
+            raw: false,
+            entryOnly: true,
+            banner: `lock v${pkg_info.version}\n\nAuthor: ${pkg_info.author}\nDate: ${new Date().toLocaleString()}\nLicense: ${pkg_info.license}\n`
+          })
         ]
       }
     },
@@ -80,23 +80,20 @@ module.exports = function(grunt) {
         publicPath: "/build/"
       },
       dev: {
-        keepAlive: true,
+        hot: true,
         port: 3000,
         webpack: {
-          devtool: "eval",
-          debug: true
+          devtool: "eval"
         }
       },
       design: {
-        keepAlive: true,
         webpack: {
           entry: './support/design/index.js',
           output: {
             path: path.join(__dirname, "build"),
             filename: 'lock.design.js'
           },
-          devtool: "eval",
-          debug: true
+          devtool: "eval"
         }
       }
     },
@@ -105,10 +102,10 @@ module.exports = function(grunt) {
         files: [
           {
             expand: true,
-            cwd:    "lib/i18n",
-            src:    "**/*.js",
-            dest:   "build",
-            ext:    '.js'
+            cwd: "lib/i18n",
+            src: "**/*.js",
+            dest: "build",
+            ext: '.js'
           }
         ]
       }
@@ -129,7 +126,7 @@ module.exports = function(grunt) {
   grunt.registerMultiTask("i18n", "Prepares i18n files to be hosted in CDN", function () {
     var languages = {};
     var Auth0 = {
-      registerLanguageDictionary: function(lang, dict) {
+      registerLanguageDictionary: function (lang, dict) {
         languages[lang] = dict;
       }
     };

diff --git a/package.json b/package.json
@@ -25,10 +25,10 @@
     "dev": "grunt dev",
     "dist": "grunt dist",
     "prepublish": "grunt dist",
-    "test": "zuul -- test/**/*.test.js",
-    "test:browser": "zuul --local 8080 --disable-tunnel -- test/**/*.test.js",
-    "test:cli": "mochify --extension=.jsx --transform=babelify test/**/*.test.js",
-    "test:watch": "mochify --watch --extension=.jsx --transform=babelify test/**/*.test.js",
+    "test": "cross-env BABEL_ENV=test zuul -- test/**/*.test.js",
+    "test:browser": "cross-env BABEL_ENV=test zuul --local 8080 --disable-tunnel -- test/**/*.test.js",
+    "test:cli": "cross-env BABEL_ENV=test mochify --extension=.jsx --transform=babelify test/**/*.test.js",
+    "test:watch": "cross-env BABEL_ENV=test mochify --watch --extension=.jsx --transform=babelify test/**/*.test.js",
     "test:jest": "jest --coverage",
     "test:jest:watch": "jest --watch --coverage",
     "publish:cdn": "ccu",
@@ -47,9 +47,10 @@
     "babelify": "^7.2.0",
     "bump-version": "^0.5.0",
     "component-cdn-uploader": "auth0/component-cdn-uploader#1.1.0",
-    "css-loader": "^0.25.0",
-    "enzyme": "2.7.0",
+    "cross-env": "^3.1.4",
+    "css-loader": "^0.26.1",
     "dotenv": "^4.0.0",
+    "enzyme": "2.7.0",
     "eslint": "3.7.1",
     "eslint-config-auth0-base": "6.0.0",
     "eslint-plugin-import": "1.16.0",
@@ -62,24 +63,23 @@
     "grunt-contrib-clean": "^0.6.0",
     "grunt-env": "^0.4.4",
     "grunt-exec": "^0.4.6",
-    "grunt-webpack": "^1.0.18",
+    "grunt-webpack": "^2.0.1",
     "jest": "18.1.0",
     "json-beautify": "^1.0.1",
     "mochify": "^2.12.0",
     "react-addons-test-utils": "^15.0.0 || ^16.0.0",
     "react-test-renderer": "15.4.2",
     "semver": "^5.3.0",
     "sinon": "^1.15.4",
-    "smart-banner-webpack-plugin": "^2.0.0",
     "stylus": "^0.54.5",
     "stylus-loader": "^2.3.1",
     "uglify-js": "^2.7.4",
     "unminified-webpack-plugin": "^1.1.1",
     "unreleased": "^0.1.0",
     "watchify": "^3.7.0",
-    "webpack": "^1.13.2",
+    "webpack": "^2.2.1",
     "webpack-core": "^0.6.8",
-    "webpack-dev-server": "^1.16.2",
+    "webpack-dev-server": "^2.3.0",
     "zuul": "3.10.1",
     "zuul-ngrok": "4.0.0"
   },

diff --git a/src/i18n/.babelrc b/src/i18n/.babelrc
@@ -0,0 +1,17 @@
+{
+  "plugins": [
+    "version-inline",
+    "transform-css-import-to-string",
+    "babel-plugin-stylus-compiler"
+  ],
+  "presets": [
+    [
+      "es2015",
+      {
+        "loose": true
+      }
+    ],
+    "stage-0",
+    "react"
+  ]
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -8,39 +8,42 @@ module.exports = {
     filename: 'lock.js'
   },
   resolve: {
-    extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx', '.styl']
+    extensions: ['.webpack.js', '.web.js', '.js', '.jsx', '.styl']
   },
   progress: true,
   watch: true,
   watchOptions: {
     aggregateTimeout: 500,
     poll: true
   },
-  keepalive: true,
   inline: true,
-  hot: true,
   stats: {
     colors: true,
     modules: true,
     reasons: true
   },
-  stylus: {
-    preferPathResolver: 'webpack'
-  },
   module: {
-    loaders: [
+    rules: [
       {
         test: /\.jsx?$/,
         loader: 'babel-loader',
-        exclude: path.join(__dirname, 'node_modules'),
-        query: {
-          plugins: ['version-inline', 'transform-css-import-to-string'],
-          presets:  [ ["es2015", {"loose": true} ], "stage-0", "react"]
-        }
+        exclude: path.join(__dirname, 'node_modules')
       },
       {
         test: /\.styl$/,
-        loader: 'css-loader!stylus-loader?paths=node_modules/bootstrap-stylus/stylus/'
+        use: [
+          'css-loader',
+          'stylus-loader',
+          {
+            loader: 'stylus-loader',
+            options: {
+              paths: [
+                'node_modules/bootstrap-stylus/stylus'
+              ],
+              preferPathResolver: 'webpack'
+            }
+          }
+        ]
       }
     ]
   }