Improve webpack config

- Remove filenames.css
- Add FriendlyErrorsWebpackPlugin()
- Add sourceMaps for UglifyJS
- Minify CSS for server-rendered pages
- Add css-loader for imports

lib/build.js

@@ -47,7 +47,6 @@ const defaults = {
   analyze: false,
   publicPath: '/_nuxt/',
   filenames: {
-    css: 'style.[hash].css',
     vendor: 'vendor.bundle.[hash].js',
     app: 'nuxt.bundle.[chunkhash].js'
   },

lib/webpack/base.config.js

@@ -68,6 +68,10 @@ export default function ({ isClient, isServer }) {
             presets: ['vue-app'],
             cacheDirectory: !!this.dev
           })
+        },
+        {
+          test: /\.css$/,
+          loader: 'vue-style-loader!css-loader'
         }
       ]
     },

lib/webpack/client.config.js

@@ -3,6 +3,7 @@
 import { each } from 'lodash'
 import webpack from 'webpack'
 import HTMLPlugin from 'html-webpack-plugin'
+import FriendlyErrorsWebpackPlugin from 'friendly-errors-webpack-plugin'
 import ScriptExtHtmlWebpackPlugin from 'script-ext-html-webpack-plugin'
 import PreloadWebpackPlugin from 'preload-webpack-plugin'
 import ProgressBarPlugin from 'progress-bar-webpack-plugin'
@@ -77,12 +78,20 @@ export default function () {
   config.plugins.push(
     new ProgressBarPlugin()
   )
-
+  // Add friendly error plugin
+  if (this.dev) {
+    config.plugins.push(new FriendlyErrorsWebpackPlugin())
+  }
   // Production client build
   if (!this.dev) {
     config.plugins.push(
+      // This is needed in webpack 2 for minifying CSS
+      new webpack.LoaderOptionsPlugin({
+        minimize: true
+      }),
       // Minify JS
       new webpack.optimize.UglifyJsPlugin({
+        sourceMap: true,
         compress: {
           warnings: false
         }

lib/webpack/server.config.js

@@ -43,7 +43,14 @@ export default function () {
       }))
     ])
   })
-
+  // This is needed in webpack 2 for minifying CSS
+  if (!this.dev) {
+    config.plugins.push(
+      new webpack.LoaderOptionsPlugin({
+        minimize: true
+      })
+    )
+  }
   // Externals
   const nuxtPackageJson = require('../../package.json')
   const projectPackageJsonPath = resolve(this.dir, 'package.json')

lib/webpack/vue-loader.config.js

@@ -11,6 +11,7 @@ export default function ({ isClient }) {
     postcss: this.options.build.postcss,
     loaders: {
       'js': 'babel-loader?' + babelOptions,
+      'css': 'vue-style-loader!css-loader',
       'less': 'vue-style-loader!css-loader!less-loader',
       'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax',
       'scss': 'vue-style-loader!css-loader!sass-loader',

package.json

@@ -63,6 +63,7 @@
     "css-loader": "^0.27.3",
     "debug": "^2.6.3",
     "file-loader": "^0.10.1",
+    "friendly-errors-webpack-plugin": "^1.6.1",
     "fs-extra": "^2.1.2",
     "glob": "^7.1.1",
     "hash-sum": "^1.0.2",