Docs: update for webpack 2

Ref #421
MoOx · Sep 8, 2016 · 455cebd · 455cebd
1 parent 90963ca
commit 455cebd
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 35 deletions.
diff --git a/docs/package.json b/docs/package.json
@@ -23,23 +23,23 @@
     "test": "npm run build"
   },
   "devDependencies": {
-    "babel-cli": "^6.3.17",
-    "babel-core": "^6.3.26",
-    "babel-eslint": "^6.0.0-beta.0",
-    "babel-loader": "^6.2.0",
-    "babel-preset-es2015": "^6.3.13",
-    "babel-preset-react": "^6.3.13",
-    "babel-preset-react-hmre": "^1.0.1",
+    "babel-cli": "^6.14.0",
+    "babel-core": "^6.14.0",
+    "babel-eslint": "^6.1.2",
+    "babel-loader": "^6.2.5",
+    "babel-preset-es2015": "^6.14.0",
+    "babel-preset-react": "^6.11.1",
+    "babel-preset-react-hmre": "^1.1.1",
     "babel-preset-react-optimize": "^1.0.1",
-    "babel-preset-stage-1": "^6.3.13",
+    "babel-preset-stage-1": "^6.13.0",
     "classnames": "^2.2.3",
     "color": "^0.11.1",
     "css-loader": "^0.23.0",
     "eslint": "^2.0.0",
     "eslint-config-i-am-meticulous": "^4.1.1",
     "eslint-loader": "^1.3.0",
     "eslint-plugin-react": "^4.3.0",
-    "extract-text-webpack-plugin": "^0.8.2",
+    "extract-text-webpack-plugin": "^2.0.0-beta",
     "file-loader": "^0.8.1",
     "history": "^2.0.0",
     "invariant": "^2.1.1",
@@ -65,19 +65,51 @@
     "style-loader": "^0.12.3",
     "stylelint": "^6.8.0",
     "stylelint-config-standard": "^10.0.0",
-    "webpack": "^1.12.1",
+    "webpack": "^2.1.0-beta.21",
     "whatwg-fetch": "^0.11.0"
   },
   "babel": {
-    "presets": [
-      "babel-preset-react",
-      "babel-preset-es2015",
-      "babel-preset-stage-1"
-    ],
     "env": {
+      "development": {
+        "presets": [
+          "babel-preset-es2015",
+          "babel-preset-stage-1",
+          "babel-preset-react"
+        ]
+      },
       "production": {
         "presets": [
-          "babel-preset-react-optimize"
+          "babel-preset-es2015",
+          "babel-preset-stage-1",
+          "babel-preset-react"
+        ]
+      },
+      "webpack-development": {
+        "presets": [
+          [
+            "babel-preset-es2015",
+            {
+              "modules": false
+            }
+          ],
+          "babel-preset-stage-1",
+          "babel-preset-react"
+        ],
+        "plugins": [
+          "babel-preset-react-hmre"
+        ]
+      },
+      "webpack-production": {
+        "presets": [
+          "babel-preset-react-optimize",
+          [
+            "babel-preset-es2015",
+            {
+              "modules": false
+            }
+          ],
+          "babel-preset-stage-1",
+          "babel-preset-react"
         ]
       }
     }

diff --git a/docs/webpack.config.babel.js b/docs/webpack.config.babel.js
@@ -32,41 +32,38 @@ export const makeConfig = (config = {}) => {
         },
         {
           test: /\.js$/,
-          loaders: [
-            `babel-loader${
-              config.dev
-              ? "?cacheDirectory=true&presets[]=babel-preset-react-hmre"
-              : "?cacheDirectory=true"
-            }`,
-            "eslint-loader?fix",
-          ],
           include: [
             path.resolve(__dirname, "scripts"),
             path.resolve(__dirname, "src"),
           ],
+          loaders: [
+            "babel-loader?cacheDirectory=true",
+            "eslint-loader?fix",
+          ],
         },
         {
           test: /\.css$/,
           exclude: /\.global\.css$/,
           include: path.resolve(__dirname, "src"),
-          loader: ExtractTextPlugin.extract(
-            "style-loader",
-            [ `css-loader?modules&localIdentName=${
+          loader: ExtractTextPlugin.extract({
+            fallbackLoader: "style-loader",
+            loader: [
+              `css-loader?modules&localIdentName=${
                 config.production
                 ? "[hash:base64:5]"
                 : "[path][name]--[local]--[hash:base64:5]"
               }`,
               "postcss-loader",
-            ].join("!"),
-          ),
+            ],
+          }),
         },
         {
           test: /\.global\.css$/,
           include: path.resolve(__dirname, "src"),
-          loader: ExtractTextPlugin.extract(
-            "style-loader",
-            [ "css-loader", "postcss-loader" ].join("!"),
-          ),
+          loader: ExtractTextPlugin.extract({
+            fallbackLoader: "style-loader",
+            loader: [ "css-loader", "postcss-loader" ],
+          }),
         },
         {
           test: /\.(html|ico|jpe?g|png|gif)$/,
@@ -111,10 +108,15 @@ export const makeConfig = (config = {}) => {
     ],
 
     plugins: [
-      new ExtractTextPlugin("[name].[hash].css", { disable: config.dev }),
+      new ExtractTextPlugin({
+        filename: "[name].[hash].css",
+        disable: config.dev,
+      }),
 
       ...config.production && [
-        new webpack.optimize.DedupePlugin(),
+        // DedupePlugin does not work correctly with Webpack 2, yet ;)
+        // https://github.com/webpack/webpack/issues/2644
+        // new webpack.optimize.DedupePlugin(),
         new webpack.optimize.UglifyJsPlugin(
           { compress: { warnings: false } }
         ),