Bump webpack to v2

package.json

@@ -107,7 +107,7 @@
     "mocha": "^6.1.4",
     "node-sass": "^4.7.2",
     "postcss-import": "^9.0.0",
-    "postcss-loader": "^1.2.0",
+    "postcss-loader": "^3.0.0",
     "postcss-scss": "^0.4.0",
     "postcss-url": "SleepWalker/postcss-url#switch-to-async-api",
     "raw-loader": "^0.5.1",
@@ -120,8 +120,8 @@
     "unexpected": "^11.6.1",
     "unexpected-sinon": "^10.5.1",
     "url-loader": "^0.5.7",
-    "webpack": "^1.12.9",
+    "webpack": "^2.0.0",
-    "webpack-dev-server": "^1.14.0",
+    "webpack-dev-server": "^2.0.0",
     "webpack-utils": "file:./webpack-utils"
   }
 }

postcss.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+    plugins: {}
+};

src/first-render.js

@@ -13,7 +13,7 @@ export default `
     </script>
 
     <style>
-        ${require('!!css!postcss!sass!index.scss')[0][1]}
+        ${require('!!css-loader!postcss-loader!sass-loader!index.scss')[0][1]}
-        ${require('!!css!postcss!sass!components/ui/loader/loader.scss')[0][1]}
+        ${require('!!css-loader!postcss-loader!sass-loader!components/ui/loader/loader.scss')[0][1]}
     </style>
 `;

src/services/i18n.js

@@ -34,14 +34,14 @@ export default {
         messages: { [string]: string };
     }> {
         const promises: Array<Promise<*>> = [
-            new Promise(require(`bundle?name=[name]!react-intl/locale-data/${locale}.js`)),
+            new Promise(require(`bundle-loader?name=[name]!react-intl/locale-data/${locale}.js`)),
-            new Promise(require(`bundle?name=[name]!i18n/${locale}.json`))
+            new Promise(require(`bundle-loader?name=[name]!i18n/${locale}.json`))
         ];
 
         if (needPolyfill) {
             // $FlowFixMe
-            promises.push(new Promise(require('bundle?name=intl!intl')));
+            promises.push(new Promise(require('bundle-loader?name=intl!intl')));
-            promises.push(new Promise(require(`bundle?name=[name]-polyfill-data!intl/locale-data/jsonp/${locale}.js`)));
+            promises.push(new Promise(require(`bundle-loader?name=[name]-polyfill-data!intl/locale-data/jsonp/${locale}.js`)));
         }
 
         return Promise.all(promises)

webpack.config.js

@@ -101,8 +101,8 @@ const webpackConfig = {
     },
 
     resolve: {
-        root: rootPath,
+        modules: [rootPath, 'node_modules'],
-        extensions: ['', '.js', '.jsx']
+        extensions: ['.js', '.jsx', '.json']
     },
 
     externals: isTest ? {
@@ -167,27 +167,41 @@ const webpackConfig = {
     ],
 
     module: {
-        loaders: [
+        rules: [
             {
                 test: /\.scss$/,
-                extractInProduction: true,
+                use: [
-                loader: `style!css?${ JSON.stringify(cssLoaderQuery) }!sass!postcss?syntax=postcss-scss`
+                    'style-loader',
+                    {
+                        loader: 'css-loader',
+                        options: cssLoaderQuery
+                    },
+                    'sass-loader',
+                    {
+                        loader: 'postcss-loader',
+                        options: {
+                            syntax: 'postcss-scss',
+                            ident: 'postcss',
+                            plugins: postcss
+                        }
+                    }
+                ]
             },
             {
                 test: /\.jsx?$/,
                 exclude: /node_modules/,
-                loader: 'babel?cacheDirectory=true'
+                loader: 'babel-loader?cacheDirectory=true'
             },
             {
                 test: /\.(png|gif|jpg|svg)$/,
-                loader: 'file',
+                loader: 'file-loader',
                 query: {
                     name: 'assets/[name].[ext]?[hash]'
                 }
             },
             {
                 test: /\.(woff|woff2|ttf)$/,
-                loader: 'file',
+                loader: 'file-loader',
                 query: {
                     name: 'assets/fonts/[name].[ext]?[hash]'
                 }
@@ -196,19 +210,19 @@ const webpackConfig = {
             {
                 test: /\.json$/,
                 exclude: /(intl|font)\.json/,
-                loader: 'json'
+                loader: 'json-loader'
             },
             {
                 test: /\.html$/,
-                loader: 'html'
+                loader: 'html-loader'
             },
             {
                 test: /\.intl\.json$/,
-                loader: 'babel!intl'
+                loader: 'babel-loader!intl'
             },
             {
                 test: /\.font\.(js|json)$/,
-                loader: 'raw!fontgen'
+                loader: 'raw-loader!fontgen-loader'
             }
         ]
     },
@@ -218,62 +232,21 @@ const webpackConfig = {
             intl: path.resolve('webpack-utils/intl-loader')
         }
     },
-
-    postcss() {
-        return [
-            cssImport({
-                path: rootPath,
-
-                resolve: ((defaultResolve) =>
-                    (url, basedir, importOptions) =>
-                        defaultResolve(loaderUtils.urlToRequest(url), basedir, importOptions)
-                )(require('postcss-import/lib/resolve-id')),
-
-                load: ((defaultLoad) =>
-                    (filename, importOptions) => {
-                        if (/\.font.(js|json)$/.test(filename)) {
-                            if (!fileCache[filename] || !isProduction) {
-                                // do not execute loader on the same file twice
-                                // this is an overcome for a bug with ExtractTextPlugin, for isProduction === true
-                                // when @imported files may be processed mutiple times
-                                fileCache[filename] = new Promise((resolve, reject) =>
-                                    this.loadModule(filename, (err, source) =>
-                                        err ? reject(err) : resolve(this.exec(source, rootPath))
-                                    )
-                                );
-                            }
-
-                            return fileCache[filename];
-                        }
-
-                        return defaultLoad(filename, importOptions);
-                    }
-                )(require('postcss-import/lib/load-content'))
-            }),
-
-            cssUrl(this)
-        ];
-    }
 };
 
 if (isProduction) {
     webpackConfig.module.loaders.forEach((loader) => {
-        if (loader.extractInProduction) {
+        if (loader.use && loader.use[0] === 'style') {
             // remove style-loader from chain and pass through ExtractTextPlugin
-            const parts = loader.loader.split('!');
+            loader.use = ExtractTextPlugin.extract({
-
+                fallbackLoader: loader.use[0], // style-loader
-            loader.loader = ExtractTextPlugin.extract(
+                loader: loader.use,
-                parts[0], // style-loader
+            });
-                parts.slice(1) // css-loader and rest
-                    .join('!')
-                    .replace(/[&?]sourcemap/, '')
-            );
         }
     });
 
     webpackConfig.plugins.push(
         new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js?[hash]'),
-        new webpack.optimize.OccurenceOrderPlugin(true),
         new webpack.optimize.DedupePlugin(),
         new webpack.optimize.UglifyJsPlugin(),
         new ExtractTextPlugin('styles.css?[hash]', {
@@ -371,4 +344,41 @@ if (isSilent) {
     };
 }
 
+
+function postcss() {
+    return [
+        cssImport({
+            path: rootPath,
+
+            resolve: ((defaultResolve) =>
+                (url, basedir, importOptions) =>
+                    defaultResolve(loaderUtils.urlToRequest(url), basedir, importOptions)
+            )(require('postcss-import/lib/resolve-id')),
+
+            load: ((defaultLoad) =>
+                (filename, importOptions) => {
+                    if (/\.font.(js|json)$/.test(filename)) {
+                        if (!fileCache[filename] || !isProduction) {
+                            // do not execute loader on the same file twice
+                            // this is an overcome for a bug with ExtractTextPlugin, for isProduction === true
+                            // when @imported files may be processed mutiple times
+                            fileCache[filename] = new Promise((resolve, reject) =>
+                                this.loadModule(filename, (err, source) =>
+                                    err ? reject(err) : resolve(this.exec(source, rootPath))
+                                )
+                            );
+                        }
+
+                        return fileCache[filename];
+                    }
+
+                    return defaultLoad(filename, importOptions);
+                }
+            )(require('postcss-import/lib/load-content'))
+        }),
+
+        cssUrl(this)
+    ];
+}
+
 module.exports = webpackConfig;