upgrade webpack (#2178)

1 files changed, 62 insertions, 52 deletions

diff --git a/server/sonar-web/config/webpack.config.js b/server/sonar-web/config/webpack.config.js
index 33fe812c428..a45aaed3d61 100644
--- a/server/sonar-web/config/webpack.config.js
+++ b/server/sonar-web/config/webpack.config.js
@@ -3,19 +3,20 @@ const autoprefixer = require('autoprefixer');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
+const eslintFormatter = require('react-dev-utils/eslintFormatter');
 const webpack = require('webpack');
 const paths = require('./paths');
-const autoprefixerOptions = require('./autoprefixer');
 
 module.exports = ({ production = true, fast = false }) => ({
   bail: production,
 
-  devtool: production ? fast ? false : 'source-map' : 'cheap-module-eval-source-map',
+  devtool: production ? fast ? false : 'source-map' : 'cheap-module-source-map',
 
   entry: {
     vendor: [
       !production && require.resolve('react-dev-utils/webpackHotDevClient'),
       require.resolve('./polyfills'),
+      !production && require.resolve('react-error-overlay'),
       'jquery',
       'underscore',
       'lodash',
@@ -48,67 +49,81 @@ module.exports = ({ production = true, fast = false }) => ({
     filename: production ? 'js/[name].[chunkhash:8].js' : 'js/[name].js',
     chunkFilename: production ? 'js/[name].[chunkhash:8].chunk.js' : 'js/[name].chunk.js'
   },
-  resolve: {
-    // This allows you to set a fallback for where Webpack should look for modules.
-    // We read `NODE_PATH` environment variable in `paths.js` and pass paths here.
-    // We use `fallback` instead of `root` because we want `node_modules` to "win"
-    // if there any conflicts. This matches Node resolution mechanism.
-    // https://github.com/facebookincubator/create-react-app/issues/253
-    fallback: paths.nodePaths
-  },
   module: {
-    // First, run the linter.
-    // It's important to do this before Babel processes the JS.
-    // Run for development or full build
-    preLoaders: !production || !fast
-      ? [
-          {
-            test: /\.js$/,
-            loader: 'eslint',
-            include: paths.appSrc
-          }
-        ]
-      : [],
-    loaders: [
-      {
+    rules: [
+      // First, run the linter.
+      // It's important to do this before Babel processes the JS.
+      // Run for development or full build
+      (!production || !fast) && {
         test: /\.js$/,
-        loader: 'babel',
-        exclude: /(node_modules|libs)/
+        enforce: 'pre',
+        include: paths.appSrc,
+        use: {
+          loader: 'eslint-loader',
+          options: { formatter: eslintFormatter }
+        }
       },
       {
-        test: /(blueimp-md5|numeral)/,
-        loader: 'imports?define=>false'
+        test: /\.js$/,
+        loader: 'babel-loader',
+        exclude: /(node_modules|libs)/
       },
       {
         test: /\.hbs$/,
-        loader: 'handlebars',
-        query: {
-          helperDirs: path.join(__dirname, '../src/main/js/helpers/handlebars')
-        }
+        use: [
+          {
+            loader: 'handlebars-loader',
+            options: {
+              helperDirs: path.join(__dirname, '../src/main/js/helpers/handlebars')
+            }
+          }
+        ]
       },
       {
         test: /\.css$/,
-        loader: 'style!css!postcss'
+        use: [
+          'style-loader',
+          'css-loader',
+          {
+            loader: 'postcss-loader',
+            options: {
+              plugins: () => [autoprefixer]
+            }
+          }
+        ]
       },
       {
         test: /\.less$/,
-        loader: ExtractTextPlugin.extract('style', 'css?-url!postcss!less')
+        use: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: [
+            {
+              loader: 'css-loader',
+              options: { url: false }
+            },
+            {
+              loader: 'postcss-loader',
+              options: {
+                plugins: () => [autoprefixer]
+              }
+            },
+            'less-loader'
+          ]
+        })
       },
-      { test: require.resolve('jquery'), loader: 'expose?$!expose?jQuery' },
-      { test: require.resolve('underscore'), loader: 'expose?_' },
-      { test: require.resolve('backbone'), loader: 'expose?Backbone' },
-      { test: require.resolve('backbone.marionette'), loader: 'expose?Marionette' },
-      { test: require.resolve('react'), loader: 'expose?React' },
-      { test: require.resolve('react-dom'), loader: 'expose?ReactDOM' }
-    ]
+      { test: require.resolve('jquery'), loader: 'expose-loader?$!expose-loader?jQuery' },
+      { test: require.resolve('underscore'), loader: 'expose-loader?_' },
+      { test: require.resolve('backbone'), loader: 'expose-loader?Backbone' },
+      { test: require.resolve('backbone.marionette'), loader: 'expose-loader?Marionette' },
+      { test: require.resolve('react'), loader: 'expose-loader?React' },
+      { test: require.resolve('react-dom'), loader: 'expose-loader?ReactDOM' }
+    ].filter(Boolean)
   },
   plugins: [
-    new webpack.optimize.CommonsChunkPlugin(
-      'vendor',
-      production ? 'js/vendor.[chunkhash:8].js' : 'js/vendor.js'
-    ),
+    new webpack.optimize.CommonsChunkPlugin({ name: 'vendor' }),
 
-    new ExtractTextPlugin(production ? 'css/sonar.[chunkhash:8].css' : 'css/sonar.css', {
+    new ExtractTextPlugin({
+      filename: production ? 'css/sonar.[chunkhash:8].css' : 'css/sonar.css',
       allChunks: true
     }),
 
@@ -136,12 +151,10 @@ module.exports = ({ production = true, fast = false }) => ({
       'process.env.NODE_ENV': JSON.stringify(production ? 'production' : 'development')
     }),
 
-    production && new webpack.optimize.OccurrenceOrderPlugin(),
-    production && new webpack.optimize.DedupePlugin(),
-
     production &&
       !fast &&
       new webpack.optimize.UglifyJsPlugin({
+        sourceMap: true,
         compress: { screw_ie8: true, warnings: false },
         mangle: { screw_ie8: true },
         output: { comments: false, screw_ie8: true }
@@ -149,9 +162,6 @@ module.exports = ({ production = true, fast = false }) => ({
 
     !production && new webpack.HotModuleReplacementPlugin()
   ].filter(Boolean),
-  postcss() {
-    return [autoprefixer(autoprefixerOptions)];
-  },
   // Some libraries import Node modules but don't use them in the browser.
   // Tell Webpack to provide empty mocks for them so importing them works.
   node: {