Updated babel/webpack

config/webpack.config.js

@@ -10,6 +10,7 @@ const PORT = process.env.PORT || "8888";
 
 module.exports = {
   target: 'web',
+  mode: 'development',
   entry: [
     `webpack-dev-server/client?http://${HOST}:${PORT}`,
     `webpack/hot/only-dev-server`,
@@ -27,7 +28,7 @@ module.exports = {
     noParse: [
       /mapbox-gl\/dist\/mapbox-gl.js/
     ],
-    loaders: loaders
+    rules: loaders
   },
   node: {
     fs: "empty",

config/webpack.loaders.js

@@ -1,54 +1,53 @@
+const path = require("path");
+
 module.exports = [
   {
     test: /\.jsx?$/,
-    exclude: /(node_modules|bower_components|public)/,
-    loaders: ['react-hot-loader/webpack']
+    exclude: [
+      path.resolve(__dirname, '../node_modules')
+    ],
+    use: 'babel-loader'
   },
   // HACK: This is a massive hack and reaches into the mapbox-gl private API.
   // We have to include this for access to `normalizeSourceURL`. We should
   // remove this ASAP, see <https://github.com/mapbox/mapbox-gl-js/issues/2416>
-  {
-    test: /.*node_modules[\/\\]mapbox-gl[\/\\]src[\/\\]util[\/\\].*\.js/,
-    loader: 'babel-loader',
-    query: {
-      presets: ['env', 'react', 'flow'],
-      plugins: ['transform-runtime', 'transform-decorators-legacy', 'transform-class-properties'],
-    }
-  },
   {
     test: /\.jsx?$/,
-    // Note: These modules aren't ES5 therefore we much compile them.
-    exclude: /(.*node_modules(?![\/\\](@mapbox[\/\\]mapbox-gl-style-spec|ol|mapbox-to-ol-style))|bower_components|public)/,
-    loader: 'babel-loader',
-    query: {
-      presets: ['env', 'react'],
-      plugins: ['transform-runtime', 'transform-decorators-legacy', 'transform-class-properties'],
+    include: [
+      path.resolve(__dirname, '../node_modules/mapbox-gl/src/util/')
+    ],
+    use: {
+      loader: 'babel-loader',
+      options: {
+        presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-flow'],
+        plugins: ['@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties'],
+      }
     }
   },
   {
     test: /\.(eot|ttf|woff|woff2)$/,
-    loader: 'file-loader?name=fonts/[name].[ext]'
+    use: 'file-loader?name=fonts/[name].[ext]'
   },
   {
     test: /\.ico$/,
-    loader: 'file-loader?name=[name].[ext]'
+    use: 'file-loader?name=[name].[ext]'
   },
   {
     test: /\.(svg|gif|jpg|png)$/,
-    loader: 'file-loader?name=img/[name].[ext]'
-  },
-  {
-    test: /\.json$/,
-    loader: 'json-loader'
+    use: 'file-loader?name=img/[name].[ext]'
   },
   {
     test: /[\/\\](node_modules|global|src)[\/\\].*\.scss$/,
-    loaders: ["style-loader", "css-loader", "sass-loader"]
+    use: [
+      'style-loader',
+      "css-loader",
+      "sass-loader"
+    ]
   },
   {
     test: /[\/\\](node_modules|global|src)[\/\\].*\.css$/,
-    loaders: [
-      'style-loader?sourceMap',
+    use: [
+      'style-loader',
       'css-loader'
     ]
   }

config/webpack.production.config.js

@@ -1,7 +1,6 @@
 var webpack = require('webpack');
 var path = require('path');
 var loaders = require('./webpack.loaders');
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
 var WebpackCleanupPlugin = require('webpack-cleanup-plugin');
 var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
@@ -17,8 +16,8 @@ module.exports = {
   },
   output: {
     path: OUTPATH,
-    filename: '[name].[chunkhash].js',
-    chunkFilename: '[chunkhash].js'
+    filename: '[name].[contenthash].js',
+    chunkFilename: '[contenthash].js'
   },
   resolve: {
     extensions: ['.js', '.jsx']
@@ -27,7 +26,7 @@ module.exports = {
     noParse: [
       /mapbox-gl\/dist\/mapbox-gl.js/
     ],
-    loaders
+    rules: loaders
   },
   node: {
     fs: "empty",
@@ -43,9 +42,6 @@ module.exports = {
       }
     }),
     new UglifyJsPlugin(),
-    new ExtractTextPlugin('[contenthash].css', {
-      allChunks: true
-    }),
     new HtmlWebpackPlugin({
       template: './src/template.html',
       title: 'Maputnik'