Upgrade webpack (bvaughn#922)

Author: TrySound

package.json

@@ -13,7 +13,7 @@
     "build:types": "flow-copy-source --ignore \"**/*.{jest,example}.js\" source/WindowScroller dist/es/WindowScroller",
     "build": "npm run build:commonjs && npm run build:css && npm run build:es && npm run build:demo && npm run build:umd",
     "build:commonjs": "npm run clean:commonjs && cross-env NODE_ENV=production cross-env BABEL_ENV=commonjs babel source --out-dir dist/commonjs --ignore *.example.js,*.jest.js,source/demo/",
-    "build:css": "postcss --config postcss.config.js --use autoprefixer source/styles.css > styles.css",
+    "build:css": "postcss source/styles.css -o styles.css --use autoprefixer",
     "build:demo": "npm run clean:demo && cross-env NODE_ENV=production webpack --config webpack.config.demo.js -p --bail",
     "build:es": "npm run clean:es && npm run build:types && cross-env NODE_ENV=production cross-env BABEL_ENV=es babel source --out-dir dist/es --ignore *.example.js,*.jest.js,source/demo/",
     "build:umd": "npm run clean:umd && cross-env NODE_ENV=production webpack --config webpack.config.umd.js --bail",
@@ -32,7 +32,7 @@
     "prettier:diff": "prettier --list-different '{playground,source}/**/*.js'",
     "postpublish": "npm run deploy",
     "prepublish": "npm run build",
-    "start": "cross-env NODE_ENV=development webpack-dev-server --hot --inline --config webpack.config.dev.js",
+    "start": "webpack-dev-server --hot --config webpack.config.dev.js",
     "test": "npm run test:jest",
     "test:jest": "jest --no-watchman --runInBand",
     "test:ci": "jest --no-watchman --maxWorkers 2 --coverage && codecov",
@@ -89,12 +89,12 @@
     "verbose": true
   },
   "devDependencies": {
-    "autoprefixer": "^6.2.3",
+    "autoprefixer": "^7.2.3",
     "babel-cli": "^6.24.1",
     "babel-core": "^6.25.0",
     "babel-eslint": "^7.2.3",
     "babel-jest": "^22.0.4",
-    "babel-loader": "6",
+    "babel-loader": "7.1.2",
     "babel-plugin-__coverage__": "^11.0.0",
     "babel-plugin-flow-react-proptypes": "^12.1.0",
     "babel-plugin-react-transform": "^2.0.0",
@@ -110,7 +110,7 @@
     "codecov": "^2.2.0",
     "codemirror": "^5.18.0",
     "cross-env": "^5.0.1",
-    "css-loader": "^0.28.4",
+    "css-loader": "^0.28.7",
     "eslint": "^4.2.0",
     "eslint-config-fbjs": "^2.0.0",
     "eslint-config-prettier": "^2.3.0",
@@ -122,19 +122,19 @@
     "eslint-plugin-react": "^7.1.0",
     "eslint-plugin-relay": "^0.0.19",
     "express": "^4.13.3",
-    "extract-text-webpack-plugin": "^3.0.0",
-    "file-loader": "^0.11.2",
+    "extract-text-webpack-plugin": "^3.0.2",
+    "file-loader": "^1.1.6",
     "flow-bin": "^0.61.0",
     "flow-copy-source": "^1.2.1",
     "fs-extra": "^4.0.0",
     "gh-pages": "^1.0.0",
-    "html-webpack-plugin": "^2.16.1",
+    "html-webpack-plugin": "^2.30.1",
     "husky": "^0.14.3",
     "immutable": "^3.7.5",
     "jest": "^22.0.4",
-    "postcss": "^5.0.14",
-    "postcss-cli": "^2.3.3",
-    "postcss-loader": "^0.9.1",
+    "postcss": "^6.0.14",
+    "postcss-cli": "^4.1.1",
+    "postcss-loader": "^2.0.9",
     "prettier": "^1.5.3",
     "react": "^16.0.0",
     "react-codemirror": "^1.0.0",
@@ -145,11 +145,10 @@
     "react-transform-hmr": "^1.0.2",
     "redbox-react": "^1.4.3",
     "rimraf": "^2.4.3",
-    "style-loader": "^0.13.0",
+    "style-loader": "^0.19.1",
     "watch": "^1.0.2",
-    "webpack": "^1.9.6",
-    "webpack-dashboard": "^0.4.0",
-    "webpack-dev-server": "^1.14.0"
+    "webpack": "^3.10.0",
+    "webpack-dev-server": "^2.9.7"
   },
   "dependencies": {
     "babel-runtime": "^6.23.0",

source/demo/index.js

@@ -14,4 +14,4 @@ render(<Application />, document.getElementById('root'));
 // Import and attach the favicon
 document.querySelector(
   '[rel="shortcut icon"]',
-).href = require('file!./favicon.png');
+).href = require('file-loader!./favicon.png');

webpack.config.demo.js

@@ -8,7 +8,7 @@ module.exports = {
     demo: './source/demo/index'
   },
   output: {
-    path: 'build',
+    path: path.join(__dirname, 'build'),
     filename: 'static/[name].js'
   },
   plugins: [
@@ -24,20 +24,20 @@ module.exports = {
     })
   ],
   module: {
-    loaders: [
+    rules: [
       {
         test: /\.js$/,
-        loaders: ['babel'],
+        use: ['babel-loader'],
         include: path.join(__dirname, 'source')
       },
       {
         test: /\.css$/,
-        loaders: ['style', 'css?modules&importLoaders=1', 'postcss'],
+        use: ['style-loader', 'css-loader?modules', 'postcss-loader'],
         include: path.join(__dirname, 'source')
       },
       {
         test: /\.css$/,
-        loaders: ['style', 'css?importLoaders=1&minimize=false'],
+        use: ['style-loader', 'css-loader?&minimize=false'],
         include: path.join(__dirname, 'styles.css')
       }
     ]

webpack.config.dev.js

@@ -2,58 +2,43 @@ const HtmlWebpackPlugin = require('html-webpack-plugin')
 const path = require('path')
 const webpack = require('webpack')
 
-const config = {
+module.exports = {
   devtool: 'eval',
   entry: {
     demo: './source/demo/index'
   },
   output: {
-    path: 'build',
-    filename: '/static/[name].js'
+    path: path.join(__dirname, 'build'),
+    filename: 'static/[name].js'
   },
   plugins: [
     new HtmlWebpackPlugin({
       filename: 'index.html',
       inject: true,
       template: './index.html'
-    }),
-    new webpack.NoErrorsPlugin(),
-    new webpack.optimize.UglifyJsPlugin()
+    })
   ],
   module: {
-    loaders: [
+    rules: [
       {
         test: /\.js$/,
-        loaders: ['babel'],
+        use: ['babel-loader'],
         include: path.join(__dirname, 'source')
       },
       {
         test: /\.css$/,
-        loaders: ['style', 'css?modules&importLoaders=1', 'postcss'],
+        use: ['style-loader', 'css-loader?modules', 'postcss-loader'],
         include: path.join(__dirname, 'source')
       },
       {
         test: /\.css$/,
-        loaders: ['style', 'css?importLoaders=1&minimize=false'],
+        use: ['style-loader', 'css-loader?minimize=false'],
         include: path.join(__dirname, 'styles.css')
       }
     ]
   },
   devServer: {
     contentBase: 'build',
-    port: 3001,
-    quiet: true
+    port: 3001
   }
 }
-
-if (process.env.NODE_ENV === 'development') {
-  const Dashboard = require('webpack-dashboard')
-  const DashboardPlugin = require('webpack-dashboard/plugin')
-  const dashboard = new Dashboard()
-
-  config.plugins.push(
-    new DashboardPlugin(dashboard.setData)
-  )
-}
-
-module.exports = config

webpack.config.umd.js

@@ -7,7 +7,7 @@ module.exports = {
     'react-virtualized': './source/index.js'
   },
   output: {
-    path: 'dist/umd',
+    path: path.join(__dirname, 'dist/umd'),
     filename: '[name].js',
     libraryTarget: 'umd',
     library: 'ReactVirtualized'
@@ -24,10 +24,10 @@ module.exports = {
     })
   ],
   module: {
-    loaders: [
+    rules: [
       {
         test: /\.js$/,
-        loaders: ['babel'],
+        use: ['babel-loader'],
         include: path.join(__dirname, 'source')
       }
     ]