build(webpack): update webpack to version 2.2.1

update webpack to version 2.2.1, update all dependencies to the newest versions, fix es6-es5 mixed
style, fix displaying compilation errors

closes #71

bin/elm-app-cli.js

@@ -31,7 +31,7 @@ switch (script) {
     break;
 
   case 'test': {
-    var args = [];
+    let args = [];
     Object.keys(argv || {}).forEach(function (key) {
       if (key !== '_' && key !== 'compiler') {
         args = args.concat([ '--' + key, argv[ key ] ]);

config/webpack.config.dev.js

@@ -33,24 +33,39 @@ module.exports = {
   resolveLoader: {
 
     // Look for loaders in own node_modules
-    root: paths.ownModules,
-    moduleTemplates: [ '*-loader' ]
+    modules: [ paths.ownModules ],
+    moduleExtensions: [ '-loader' ]
   },
   resolve: {
-    modulesDirectories: [ 'node_modules' ],
-    extensions: [ '', '.js', '.elm' ]
+    modules: [ 'node_modules' ],
+    extensions: [ '.js', '.elm' ]
   },
   module: {
     noParse: /\.elm$/,
-    loaders: [
+    rules: [
       {
         test: /\.elm$/,
         exclude: [ /elm-stuff/, /node_modules/ ],
-        loader: 'elm-hot!elm-webpack?verbose=true&warn=true&debug=true&pathToMake=' + paths.elmMake
+        use: [
+          {loader: 'elm-hot-loader'},
+          {
+            loader: 'elm-webpack-loader',
+            options: {
+              verbose: true,
+              warn: true,
+              debug: true,
+              pathToMake: paths.elmMake
+            }
+          }
+        ]
       },
       {
         test: /\.css$/,
-        loader: 'style!css!postcss'
+        use: [
+          {loader: 'style-loader'},
+          {loader: 'css-loader'},
+          {loader: 'postcss-loader'}
+        ]
       },
       {
         exclude: [
@@ -61,40 +76,42 @@ module.exports = {
           /\.svg$/
         ],
         loader: 'url',
-        query: {
+        options: {
           limit: 10000,
           name: 'static/media/[name].[hash:8].[ext]'
         }
       },
       // "file" loader for svg
       {
         test: /\.svg$/,
-        loader: 'file',
-        query: {
+        loader: 'file-loader',
+        options: {
           name: 'static/media/[name].[hash:8].[ext]'
         }
       }
     ]
   },
-  postcss: function() {
-    return [
-      autoprefixer({
-        browsers: [
-          '>1%',
-          'last 4 versions',
-          'Firefox ESR',
-          'not ie < 9'
-        ]
-      })
-    ];
-  },
   plugins: [
     new webpack.DefinePlugin(getClientEnvironment()),
     new HtmlWebpackPlugin({
       inject: true,
       template: paths.template,
       favicon: paths.favicon
     }),
-    new webpack.HotModuleReplacementPlugin()
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.LoaderOptionsPlugin({
+      options: {
+        postcss: [
+          autoprefixer({
+            browsers: [
+              '>1%',
+              'last 4 versions',
+              'Firefox ESR',
+              'not ie < 9'
+            ]
+          })
+        ]
+      }
+    }),
   ]
 };

config/webpack.config.prod.js

@@ -28,29 +28,35 @@ module.exports = {
   resolveLoader: {
 
     // Look for loaders in own ./node_modules
-    root: paths.ownModules,
-    moduleTemplates: [ '*-loader' ]
+    modules: [ paths.ownModules ],
+    moduleExtensions: [ '-loader' ]
   },
   resolve: {
-    modulesDirectories: [ 'node_modules' ],
-    extensions: [ '', '.js', '.elm' ]
+    modules: [ 'node_modules' ],
+    extensions: [ '.js', '.elm' ]
   },
   module: {
     noParse: /\.elm$/,
-    loaders: [
+    rules: [
       {
         test: /\.elm$/,
         exclude: [ /elm-stuff/, /node_modules/ ],
 
         // Use the local installation of elm-make
-        loader: 'elm-webpack',
-        query: {
+        loader: 'elm-webpack-loader',
+        options: {
           pathToMake: paths.elmMake
         }
       },
       {
         test: /\.css$/,
-        loader: ExtractTextPlugin.extract('style', 'css?-autoprefixer!postcss')
+        use: ExtractTextPlugin.extract({
+          fallbackLoader: 'style-loader',
+          loader: [
+            {loader: 'css-loader'},
+            {loader: 'postcss-loader'}
+          ]
+        })
       },
       {
         exclude: [
@@ -60,34 +66,22 @@ module.exports = {
           /\.json$/,
           /\.svg$/
         ],
-        loader: 'url',
-        query: {
+        loader: 'url-loader',
+        options: {
           limit: 10000,
           name: 'static/media/[name].[hash:8].[ext]'
         }
       },
       // "file" loader for svg
       {
         test: /\.svg$/,
-        loader: 'file',
-        query: {
+        loader: 'file-loader',
+        options: {
           name: 'static/media/[name].[hash:8].[ext]'
         }
       }
     ]
   },
-  postcss: function() {
-    return [
-      autoprefixer({
-        browsers: [
-          '>1%',
-          'last 4 versions',
-          'Firefox ESR',
-          'not ie < 9'
-        ]
-      })
-    ];
-  },
   plugins: [
 
     new AssetsPlugin({ path: paths.dist }),
@@ -111,6 +105,21 @@ module.exports = {
       }
     }),
 
+    new webpack.LoaderOptionsPlugin({
+      options: {
+        postcss: [
+          autoprefixer({
+            browsers: [
+              '>1%',
+              'last 4 versions',
+              'Firefox ESR',
+              'not ie < 9'
+            ]
+          })
+        ]
+      }
+    }),
+
     new HtmlWebpackPlugin({
       inject: true,
       template: paths.template,

package.json

@@ -40,41 +40,42 @@
     "README.md"
   ],
   "dependencies": {
-    "assets-webpack-plugin": "^3.5.0",
-    "autoprefixer": "6.5.4",
-    "bluebird": "3.4.6",
+    "assets-webpack-plugin": "^3.5.1",
+    "autoprefixer": "6.7.2",
+    "bluebird": "3.4.7",
     "chalk": "1.1.3",
-    "clean-webpack-plugin": "0.1.14",
+    "clean-webpack-plugin": "0.1.15",
     "cli-table": "0.3.1",
     "connect-history-api-fallback": "^1.3.0",
     "cross-spawn": "5.0.1",
     "css-loader": "0.26.1",
-    "dotenv": "^2.0.0",
+    "dotenv": "^4.0.0",
     "elm": "^0.18.0",
-    "elm-hot-loader": "0.4.2",
-    "elm-test": "0.18.0",
-    "elm-webpack-loader": "3.1.0",
+    "elm-hot-loader": "0.5.4",
+    "elm-test": "0.18.2",
+    "elm-webpack-loader": "4.2.0",
     "extend": "3.0.0",
-    "extract-text-webpack-plugin": "1.0.1",
-    "file-loader": "0.9.0",
-    "fs-extra": "1.0.0",
-    "html-webpack-plugin": "2.24.1",
+    "extract-text-webpack-plugin": "^2.0.0-rc.2",
+    "file-loader": "0.10.0",
+    "fs-extra": "2.0.0",
+    "html-webpack-plugin": "2.28.0",
     "http-proxy-middleware": "^0.17.3",
     "minimist": "1.2.0",
-    "postcss-loader": "1.2.1",
+    "postcss-loader": "1.2.2",
     "prompt": "1.0.0",
     "react-dev-utils": "0.4.2",
     "style-loader": "0.13.1",
     "url-loader": "^0.5.7",
-    "webpack": "1.14.0",
-    "webpack-dev-server": "1.16.2"
+    "webpack": "2.2.1",
+    "webpack-dev-server": "2.2.1"
   },
   "devDependencies": {
     "chai": "^3.5.0",
     "cz-conventional-changelog": "^1.2.0",
     "dir-compare": "^1.3.0",
-    "eslint": "^3.12.2",
-    "husky": "^0.12.0",
+    "eslint": "^3.14.1",
+    "extract-text-webpack-plugin": "^2.0.0-rc.2",
+    "husky": "^0.13.1",
     "mocha": "^3.2.0",
     "rimraf": "^2.5.4",
     "semantic-release": "^6.3.2"

scripts/build.js

@@ -17,16 +17,20 @@ console.log('\nStarting production build...\n');
 // Initialize webpack, using the long way: http://webpack.github.io/docs/node.js-api.html#the-long-way
 webpack(config).run(function (err, stats) {
 
-  if (err !== null) {
-    console.log(chalk.red(err));
+  if (stats.compilation.errors.length > 0) {
+    console.log(stats.toString({
+      chunks: false,
+      colors: true,
+      assets: false,
+    }));
     process.exit(1);
   } else {
-    var statsFormatted = stats.toString({
+    const statsFormatted = stats.toString({
       chunks: false,
       colors: true
     });
 
-    console.log(chalk.green('\n' + statsFormatted));
+    console.log(statsFormatted);
     console.log(chalk.green('\n' + 'Production build is ready in `dist/` folder'));
   }
 });

scripts/create.js

@@ -20,8 +20,8 @@ function createElmApp (name) {
 
   console.log('\nCreating ' + name + ' project...\n');
 
-  var root = path.resolve(name);
-  var template = path.join(__dirname, '../template');
+  const root = path.resolve(name);
+  const template = path.join(__dirname, '../template');
 
   if (!fs.existsSync(name)) {
 
@@ -41,7 +41,7 @@ function createElmApp (name) {
   process.chdir(root);
 
   // Run initial `elm-package install -y`
-  var spawnElmPkgResult = spawnSync(executablePaths[ 'elm-package' ], [ 'install', '-y' ], { stdio: 'inherit' });
+  const spawnElmPkgResult = spawnSync(executablePaths[ 'elm-package' ], [ 'install', '-y' ], { stdio: 'inherit' });
 
   if (spawnElmPkgResult.status === null) {
     console.log(chalk.red('\nFailed to install elm packages'));

scripts/eject.js

@@ -29,14 +29,14 @@ function diffTable (target, mixin, head) {
     head = [ chalk.grey('Name'), chalk.yellow('Old'), chalk.green('New') ];
   }
 
-  var table = new Table({
+  const table = new Table({
     head: head
   });
 
-  for (var propName in target) {
+  for (const propName in target) {
     if (propName in mixin) {
-      var targetPropValue = target[ propName ];
-      var mixinPropValue = mixin[ propName ];
+      const targetPropValue = target[ propName ];
+      const mixinPropValue = mixin[ propName ];
       // If found and is not equal
       if (targetPropValue !== mixinPropValue) {
         table.push([ propName, targetPropValue, mixinPropValue ]);
@@ -49,7 +49,7 @@ function diffTable (target, mixin, head) {
 
 function promptYesOrNo () {
   return new Promise(function (resolve, reject) {
-    var property = {
+    const property = {
       name: 'answer',
       message: chalk.yellow('Would you like to continue? [Y/n]')
     };
@@ -121,12 +121,12 @@ if (fs.existsSync('elm-package.json') === false) {
 
 if (fs.existsSync('./package.json') === true) {
   console.log('Found existing package.json');
-  var pkgEjected = JSON.parse(fs.readFileSync('./package.json', { encoding: 'utf-8' }));
+  const pkgEjected = JSON.parse(fs.readFileSync('./package.json', { encoding: 'utf-8' }));
 
   Promise.resolve()
     .then(function () {
       if (pkgEjected.hasOwnProperty('devDependencies')) {
-        var diff = diffTable(pkgEjected.devDependencies, devDependencies);
+        const diff = diffTable(pkgEjected.devDependencies, devDependencies);
         if (diff.length !== 0) {
           console.log(diff.toString());
           console.log('Ejecting wil overwrite your "devDependencies" in package.json\n');
@@ -136,7 +136,7 @@ if (fs.existsSync('./package.json') === true) {
     })
     .then(function () {
       if (pkgEjected.hasOwnProperty('scripts') && Object.keys(pkgEjected.scripts).length === 0) {
-        var diff = diffTable(pkgEjected.scripts, scripts);
+        const diff = diffTable(pkgEjected.scripts, scripts);
         if (diff.length !== 0) {
           console.log(diff.toString());
           console.log('Ejecting will overwrite your "scripts" in package.json\n');