start integration with webpack 2

Author: marcosmoura

build/server/index.js

@@ -13,15 +13,14 @@ const app = express();
 const compiler = webpack(webpackConfig);
 const rootPath = path.join(__dirname, '..', '..');
 const devMiddlewareInstance = devMiddleware(compiler, {
+  quiet: true,
   publicPath: config.publicPath,
-  index: config.indexPath,
-  stats: {
-    colors: true,
-    chunks: false
-  }
+  index: config.indexPath
 });
 
-const hotMiddlewareInstance = hotMiddleware(compiler);
+const hotMiddlewareInstance = hotMiddleware(compiler, {
+  log() { }
+});
 
 compiler.plugin('compilation', (compilation) => {
   compilation.plugin('html-webpack-plugin-after-emit', (data, done) => {
@@ -36,14 +35,16 @@ app.use(hotMiddlewareInstance);
 app.use('/', express.static(path.join(rootPath, config.docsPath)));
 app.use('/assets', express.static(path.join(rootPath, config.assetsPath)));
 
-export default app.listen(config.server.port, (error) => {
+devMiddlewareInstance.waitUntilValid(() => {
   let uri = 'http://localhost:' + config.server.port;
 
+  console.log(chalk.blue('> Listening at ' + uri + '\n'));
+});
+
+export default app.listen(config.server.port, (error) => {
   if (error) {
     console.log(chalk.red(error));
 
     return;
   }
-
-  console.log(chalk.blue('Listening at ' + uri + '\n'));
 });

build/webpack/base.js

@@ -3,6 +3,10 @@ import webpack from 'webpack';
 import eslintFormatter from 'eslint-friendly-formatter';
 import config from '../config';
 
+const resolvePath = (dir) => {
+  return path.resolve(__dirname, '..', '..', dir);
+};
+
 export default {
   entry: {
     docs: './docs/src/index.js'
@@ -13,81 +17,68 @@ export default {
     filename: '[name].js'
   },
   resolve: {
-    extensions: ['', '.js', '.vue'],
-    fallback: [config.nodePath],
+    extensions: ['.js', '.vue', '.json'],
     alias: {
-      assets: path.resolve(__dirname, '../../docs/src/assets')
+      assets: resolvePath('docs/src/assets')
     }
   },
-  resolveLoader: {
-    fallback: [config.nodePath]
-  },
   module: {
-    preLoaders: [
+    rules: [
       {
-        test: /\.vue$/,
-        loader: 'eslint',
-        include: config.projectRoot,
-        exclude: /node_modules/
+        test: /\.(js|vue)$/,
+        loader: 'eslint-loader',
+        enforce: 'pre',
+        include: [
+          resolvePath('build'),
+          resolvePath('src'),
+          resolvePath('docs')
+        ],
+        options: {
+          fix: true,
+          formatter: eslintFormatter
+        }
       },
-      {
-        test: /\.js$/,
-        loader: 'eslint',
-        include: config.projectRoot,
-        exclude: /node_modules/
-      }
-    ],
-    loaders: [
       {
         test: /\.vue$/,
-        loader: 'vue'
+        loader: 'vue-loader',
+        options: {
+          loaders: {
+            css: 'vue-style-loader!css-loader',
+            scss: 'vue-style-loader!css-loader!sass-loader'
+          }
+        }
       },
       {
         test: /\.js$/,
-        loader: 'babel',
-        include: config.projectRoot,
-        exclude: /node_modules/
+        loader: 'babel-loader',
+        include: [
+          resolvePath('build'),
+          resolvePath('src'),
+          resolvePath('docs')
+        ]
       },
       {
         test: /\.css$/,
-        loader: 'vue-style-loader!css-loader'
+        use: ['vue-style-loader', 'css-loader']
       },
       {
         test: /\.scss$/,
-        loader: 'vue-style-loader!css-loader!sass-loader'
+        use: ['vue-style-loader', 'css-loader', 'sass-loader']
       },
       {
         test: /\.theme$/,
-        loaders: ['raw', 'sass-loader']
-      },
-      {
-        test: /\.json$/,
-        loaders: ['json-loader']
+        use: ['raw-loader', 'sass-loader']
       },
       {
-        test: /\.(png|jpg|gif|svg)(\?.*)?$/,
-        loader: 'url',
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        loader: 'url-loader',
         query: {
           limit: 10000,
           name: '/assets/[name].[hash:8].[ext]'
         }
-      },
-      {
-        test: /\.html$/,
-        loader: 'vue-html'
       }
     ]
   },
-  eslint: {
-    fix: true,
-    formatter: eslintFormatter
-  },
-  vue: {
-    loaders: {
-      css: 'vue-style-loader!css-loader',
-      scss: 'vue-style-loader!css-loader!sass-loader'
-    }
-  },
   plugins: [
     new webpack.DefinePlugin({
       'process.env': config.env

build/webpack/debug-lib.js

@@ -1,4 +1,3 @@
-import webpack from 'webpack';
 import merge from 'webpack-merge';
 import ExtractTextPlugin from 'extract-text-webpack-plugin';
 import OptimizeJsPlugin from 'optimize-js-plugin';
@@ -12,11 +11,7 @@ const devConfig = merge(prodConfig, {
 });
 
 devConfig.plugins = [
-  new webpack.optimize.OccurenceOrderPlugin(),
-  new webpack.optimize.DedupePlugin(),
-  new OptimizeJsPlugin({
-    sourceMap: false
-  }),
+  new OptimizeJsPlugin(),
   new ExtractTextPlugin('[name].css')
 ];
 

build/webpack/dev.js

@@ -1,23 +1,25 @@
 import webpack from 'webpack';
 import merge from 'webpack-merge';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
+import FriendlyErrorsPlugin from 'friendly-errors-webpack-plugin';
 import baseWebpackConfig from './base';
 import config from '../config';
 
 Object.keys(baseWebpackConfig.entry).forEach((name) => {
-  baseWebpackConfig.entry[name] = ['./build/server/client'].concat(baseWebpackConfig.entry[name]);
+  baseWebpackConfig.entry[name] = ['./build/server/client', ...[baseWebpackConfig.entry[name]]];
 });
 
 export default merge(baseWebpackConfig, {
-  devtool: 'source-map',
+  devtool: '#eval-source-map',
   plugins: [
     new webpack.WatchIgnorePlugin([config.nodePath]),
     new webpack.HotModuleReplacementPlugin(),
-    new webpack.NoErrorsPlugin(),
+    new webpack.NoEmitOnErrorsPlugin(),
     new HtmlWebpackPlugin({
       filename: 'index.html',
       template: 'docs/index.html',
       inject: true
-    })
+    }),
+    new FriendlyErrorsPlugin()
   ]
 });

build/webpack/prod-docs.js

@@ -18,29 +18,45 @@ export default merge(baseConfig, {
     filename: '[name].[chunkhash:8].js',
     chunkFilename: '[name].[chunkhash:8].js'
   },
-  vue: {
-    loaders: {
-      css: ExtractTextPlugin.extract('css'),
-      scss: ExtractTextPlugin.extract('css!sass')
-    },
-    postcss: [
-      autoprefixer({
-        browsers: ['last 3 versions']
-      })
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          loaders: {
+            css: ExtractTextPlugin.extract('css'),
+            scss: ExtractTextPlugin.extract('css!sass')
+          },
+          postcss: [
+            autoprefixer({
+              browsers: ['last 3 versions']
+            })
+          ]
+        }
+      }
     ]
   },
   plugins: [
-    new webpack.optimize.DedupePlugin(),
+    new webpack.LoaderOptionsPlugin({
+      minimize: true,
+      debug: false
+    }),
     new webpack.optimize.UglifyJsPlugin({
       compress: {
         warnings: false
       },
-      comments: false
+      output: {
+        comments: false
+      },
+      sourceMap: false
     }),
     new OptimizeJsPlugin({
       sourceMap: false
     }),
-    new ExtractTextPlugin('[name].[contenthash:8].css'),
+    new ExtractTextPlugin({
+      filename: path.join(docsPath, '[name].[contenthash:8].css')
+    }),
     new CopyWebpackPlugin([
       {
         context: config.assetsPath,
@@ -96,7 +112,6 @@ export default merge(baseConfig, {
     new webpack.optimize.CommonsChunkPlugin({
       name: 'manifest',
       chunks: ['vendor']
-    }),
-    new webpack.optimize.OccurenceOrderPlugin()
+    })
   ]
 });

build/webpack/prod-lib.js

@@ -35,15 +35,23 @@ export default merge(baseConfig, {
     library: 'VueMaterial',
     libraryTarget: 'umd'
   },
-  vue: {
-    loaders: {
-      css: ExtractTextPlugin.extract('css'),
-      scss: ExtractTextPlugin.extract('css!sass')
-    },
-    postcss: [
-      autoprefixer({
-        browsers: ['last 2 versions']
-      })
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          loaders: {
+            css: ExtractTextPlugin.extract('css'),
+            scss: ExtractTextPlugin.extract('css!sass')
+          },
+          postcss: [
+            autoprefixer({
+              browsers: ['last 2 versions']
+            })
+          ]
+        }
+      }
     ]
   },
   externals: {
@@ -56,27 +64,33 @@ export default merge(baseConfig, {
     }
   },
   plugins: [
-    new webpack.optimize.DedupePlugin(),
+    new webpack.LoaderOptionsPlugin({
+      minimize: true,
+      debug: false
+    }),
     new webpack.optimize.UglifyJsPlugin({
       compress: {
         warnings: false
       },
-      comments: false
+      output: {
+        comments: false
+      },
+      sourceMap: false
     }),
-    new webpack.optimize.OccurenceOrderPlugin(),
     new OptimizeJsPlugin({
       sourceMap: false
     }),
-    new webpack.BannerPlugin(
-`/*!
- * Vue Material v${version}
- * Made with love by Marcos Moura
- * Released under the MIT License.
- */`
-    , {
+    new webpack.BannerPlugin({
+      banner: `/*!
+* Vue Material v${version}
+* Made with love by Marcos Moura
+* Released under the MIT License.
+*/   `,
       raw: true,
       entryOnly: true
     }),
-    new ExtractTextPlugin('[name].css')
+    new ExtractTextPlugin({
+      filename: path.join(config.rootPath, '[name].css')
+    })
   ]
 });