Upgrade to Webpack 2 (#80)

60frames · Mar 27, 2017 · 121a96f · 121a96f
1 parent 036076f
commit 121a96f
Show file tree

Hide file tree

Showing 23 changed files with 754 additions and 352 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,3 +1,8 @@
 {
-    "presets": ["react", "es2015", "stage-2"]
+    "presets": ["react", ["es2015", { "modules": false }], "stage-2"],
+    "env": {
+        "test": {
+            "presets": ["es2015"]
+        }
+    }
 }
diff --git a/README.md b/README.md
@@ -20,7 +20,7 @@ $ npm start
 - Hot reloading on both client and *server*
 - Locally scoped CSS with [CSS modules](https://github.com/css-modules)
 - Scalable unit testing via [Jest](https://github.com/facebook/jest)
-- Development and release builds with [Webpack](https://github.com/webpack/webpack)
+- Development and release builds with [Webpack 2](https://github.com/webpack/webpack)
 - State management with [Redux](https://github.com/reactjs/redux)
 - ...Just 4 commands
 

diff --git a/package.json b/package.json
@@ -13,7 +13,7 @@
   "devDependencies": {
     "60frames-coding-standards": "^1.0.7",
     "async": "^2.1.5",
-    "autoprefixer-loader": "^3.2.0",
+    "autoprefixer": "^6.7.7",
     "babel-core": "^6.24.0",
     "babel-jest": "^19.0.0",
     "babel-loader": "^6.4.1",
@@ -26,30 +26,28 @@
     "errorhandler": "^1.4.3",
     "eslint": "^0.24.1",
     "eslint-plugin-react": "^2.6.4",
-    "exports-loader": "^0.6.4",
-    "expose-loader": "^0.7.3",
-    "extract-text-webpack-plugin": "^1.0.1",
+    "extract-text-webpack-plugin": "^2.1.0",
     "file-loader": "^0.10.1",
     "friendly-errors-webpack-plugin": "^1.6.1",
     "fs-extra": "^2.1.2",
     "identity-obj-proxy": "^3.0.0",
     "imports-loader": "^0.7.1",
     "jest": "^19.0.2",
     "json-loader": "^0.5.4",
+    "postcss-loader": "^1.3.3",
     "progress-bar-webpack-plugin": "^1.9.3",
     "react": "^15.4.2",
     "react-hot-loader": "^3.0.0-beta.1",
     "react-test-renderer": "^15.4.2",
     "redux-mock-store": "^1.2.2",
     "require-from-string": "^1.1.0",
-    "simple-define-webpack-plugin": "richardscarrott/simple-define-webpack-plugin.git#master",
     "stats-webpack-plugin": "^0.5.0",
     "style-loader": "^0.16.0",
     "url-loader": "^0.5.8",
-    "webpack": "^1.12.15",
+    "webpack": "^2.3.2",
     "webpack-dev-middleware": "^1.10.1",
     "webpack-hot-middleware": "^2.17.1",
-    "webpack-hot-server-middleware": "~0.0.2"
+    "webpack-hot-server-middleware": "~0.0.5"
   },
   "dependencies": {
     "babel-polyfill": "^6.23.0",
@@ -78,6 +76,13 @@
     ],
     "moduleNameMapper": {
       "^.+\\.css$": "<rootDir>/test/styleMock.js"
-    }
-  }
+    },
+    "testEnvironment": "node"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 4 versions",
+    "Firefox ESR",
+    "not ie < 9"
+  ]
 }
diff --git a/tasks/build/__snapshots__/webpackConfig.test.js.snap b/tasks/build/__snapshots__/webpackConfig.test.js.snap
@@ -4,7 +4,6 @@ exports[`tasks/build/webpackConfig client config has not regressed 1`] = `
 Object {
   "bail": true,
   "context": "<rootDir>/src",
-  "debug": true,
   "devtool": "eval",
   "entry": Object {
     "client": Array [
@@ -13,34 +12,112 @@ Object {
       "./client",
     ],
   },
+  "externals": Object {},
   "module": Object {
-    "loaders": Array [
+    "rules": Array [
       Object {
-        "exclude": /node_modules/,
+        "include": "<rootDir>/src",
         "loader": "babel-loader",
+        "options": Object {
+          "cacheDirectory": true,
+        },
         "test": /\\\\\\.js\\$/,
       },
       Object {
-        "loader": "exports-loader?window.Modernizr",
-        "test": /modernizr\\.js\\$/,
+        "include": /node_modules/,
+        "test": /\\\\\\.css\\$/,
+        "use": Array [
+          Object {
+            "loader": "<rootDir>/node_modules/extract-text-webpack-plugin/loader.js",
+            "options": Object {
+              "omit": 1,
+              "remove": true,
+            },
+          },
+          Object {
+            "loader": "style-loader",
+          },
+          Object {
+            "loader": "css-loader",
+            "options": Object {
+              "localIdentName": "[name]_[local]_[hash:base64:5]",
+              "minimize": false,
+              "modules": false,
+              "sourceMap": true,
+            },
+          },
+          Object {
+            "loader": "postcss-loader",
+            "options": Object {
+              "ident": "postcss",
+              "plugins": [Function],
+            },
+          },
+        ],
       },
       Object {
-        "loader": "url-loader?limit=10000",
-        "test": /\\\\\\.\\(jpe\\?g\\|png\\|gif\\|svg\\|woff\\|ttf\\|eot\\)\\$/i,
+        "include": "<rootDir>/src",
+        "test": /\\\\\\.css\\$/,
+        "use": Array [
+          Object {
+            "loader": "<rootDir>/node_modules/extract-text-webpack-plugin/loader.js",
+            "options": Object {
+              "omit": 1,
+              "remove": true,
+            },
+          },
+          Object {
+            "loader": "style-loader",
+          },
+          Object {
+            "loader": "css-loader",
+            "options": Object {
+              "localIdentName": "[name]_[local]_[hash:base64:5]",
+              "minimize": false,
+              "modules": true,
+              "sourceMap": true,
+            },
+          },
+          Object {
+            "loader": "postcss-loader",
+            "options": Object {
+              "ident": "postcss",
+              "plugins": [Function],
+            },
+          },
+        ],
       },
       Object {
-        "loader": "json-loader",
-        "test": /\\\\\\.json\\$/,
+        "include": "<rootDir>/src",
+        "loader": "url-loader",
+        "options": Object {
+          "limit": 10000,
+        },
+        "test": /\\\\\\.\\(eot\\|ttf\\|woff\\|woff2\\)\\(\\\\\\?\\.\\*\\)\\?\\$/,
       },
       Object {
-        "include": /node_modules/,
-        "loader": "style-loader!css-loader?sourceMap",
-        "test": /\\\\\\.css\\$/,
+        "include": "<rootDir>/src",
+        "loader": "url-loader",
+        "options": Object {
+          "limit": 10000,
+        },
+        "test": /\\\\\\.\\(gif\\|ico\\|jpg\\|jpeg\\|png\\|svg\\|webp\\)\\$/,
       },
       Object {
-        "exclude": /node_modules/,
-        "loader": "style-loader!css-loader?modules&localIdentName=[name]_[local]_[hash:base64:5]&sourceMap!autoprefixer-loader",
-        "test": /\\\\\\.css\\$/,
+        "include": "<rootDir>/src",
+        "loader": "url-loader",
+        "options": Object {
+          "limit": 10000,
+        },
+        "test": /\\\\\\.\\(mp4\\|webm\\)\\$/,
+      },
+      Object {
+        "include": "<rootDir>/src",
+        "loader": "url-loader",
+        "options": Object {
+          "limit": 10000,
+        },
+        "test": /\\\\\\.\\(aac\\|m4a\\|mp3\\|oga\\|ogg\\|wav\\)\\$/,
       },
     ],
   },
@@ -50,26 +127,36 @@ Object {
   },
   "output": Object {
     "filename": "[name].js",
+    "libraryTarget": "var",
     "path": "<rootDir>/dist",
     "publicPath": "http://localhost:6060/",
   },
   "plugins": Array [
+    ExtractTextPlugin {
+      "filename": "[name].css",
+      "id": 1,
+      "options": Object {
+        "allChunks": true,
+        "disable": true,
+      },
+    },
     StatsPlugin {
       "cache": Object {},
       "options": Object {
         "chunkModules": true,
       },
       "output": "stats.json",
     },
-    OccurrenceOrderPlugin {
-      "preferEntry": undefined,
+    HotModuleReplacementPlugin {
+      "fullBuildTimeout": 200,
+      "multiStep": undefined,
     },
-    HotModuleReplacementPlugin {},
-    NoErrorsPlugin {},
+    NoEmitOnErrorsPlugin {},
   ],
   "resolve": Object {
-    "root": Array [
+    "modules": Array [
       "<rootDir>/src",
+      "node_modules",
     ],
   },
   "target": "web",
@@ -80,41 +167,81 @@ exports[`tasks/build/webpackConfig server config has not regressed 1`] = `
 Object {
   "bail": true,
   "context": "<rootDir>/src",
-  "debug": true,
   "devtool": "eval",
   "entry": Object {
-    "server": Array [
-      "./server",
-    ],
+    "server": "./server",
   },
   "module": Object {
-    "loaders": Array [
+    "rules": Array [
       Object {
-        "exclude": /node_modules/,
+        "include": "<rootDir>/src",
         "loader": "babel-loader",
+        "options": Object {
+          "cacheDirectory": true,
+        },
         "test": /\\\\\\.js\\$/,
       },
       Object {
-        "loader": "exports-loader?window.Modernizr",
-        "test": /modernizr\\.js\\$/,
+        "include": /node_modules/,
+        "test": /\\\\\\.css\\$/,
+        "use": Array [
+          Object {
+            "loader": "css-loader/locals",
+            "options": Object {
+              "localIdentName": "[name]_[local]_[hash:base64:5]",
+              "minimize": false,
+              "modules": false,
+              "sourceMap": true,
+            },
+          },
+        ],
       },
       Object {
-        "loader": "url-loader?limit=10000",
-        "test": /\\\\\\.\\(jpe\\?g\\|png\\|gif\\|svg\\|woff\\|ttf\\|eot\\)\\$/i,
+        "include": "<rootDir>/src",
+        "test": /\\\\\\.css\\$/,
+        "use": Array [
+          Object {
+            "loader": "css-loader/locals",
+            "options": Object {
+              "localIdentName": "[name]_[local]_[hash:base64:5]",
+              "minimize": false,
+              "modules": true,
+              "sourceMap": true,
+            },
+          },
+        ],
       },
       Object {
-        "loader": "json-loader",
-        "test": /\\\\\\.json\\$/,
+        "include": "<rootDir>/src",
+        "loader": "url-loader",
+        "options": Object {
+          "limit": 10000,
+        },
+        "test": /\\\\\\.\\(eot\\|ttf\\|woff\\|woff2\\)\\(\\\\\\?\\.\\*\\)\\?\\$/,
       },
       Object {
-        "include": /node_modules/,
-        "loader": "css-loader/locals?sourceMap",
-        "test": /\\\\\\.css\\$/,
+        "include": "<rootDir>/src",
+        "loader": "url-loader",
+        "options": Object {
+          "limit": 10000,
+        },
+        "test": /\\\\\\.\\(gif\\|ico\\|jpg\\|jpeg\\|png\\|svg\\|webp\\)\\$/,
       },
       Object {
-        "exclude": /node_modules/,
-        "loader": "css-loader/locals?modules&localIdentName=[name]_[local]_[hash:base64:5]&sourceMap",
-        "test": /\\\\\\.css\\$/,
+        "include": "<rootDir>/src",
+        "loader": "url-loader",
+        "options": Object {
+          "limit": 10000,
+        },
+        "test": /\\\\\\.\\(mp4\\|webm\\)\\$/,
+      },
+      Object {
+        "include": "<rootDir>/src",
+        "loader": "url-loader",
+        "options": Object {
+          "limit": 10000,
+        },
+        "test": /\\\\\\.\\(aac\\|m4a\\|mp3\\|oga\\|ogg\\|wav\\)\\$/,
       },
     ],
   },
@@ -126,17 +253,27 @@ Object {
     "filename": "[name].js",
     "libraryTarget": "commonjs2",
     "path": "<rootDir>/dist",
+    "publicPath": "",
   },
   "plugins": Array [
+    ExtractTextPlugin {
+      "filename": "[name].css",
+      "id": 2,
+      "options": Object {
+        "allChunks": true,
+        "disable": true,
+      },
+    },
     LimitChunkCountPlugin {
       "options": Object {
         "maxChunks": 1,
       },
     },
   ],
   "resolve": Object {
-    "root": Array [
+    "modules": Array [
       "<rootDir>/src",
+      "node_modules",
     ],
   },
   "target": "node",