Webpack and development server are configured.

Author: jmosawy

server/server.js

@@ -0,0 +1,31 @@
+/* eslint-disable import/no-extraneous-dependencies */
+
+const browserSync = require('browser-sync').create();
+const webpackDevMiddleware = require('webpack-dev-middleware');
+const webpackHotMiddleware = require('webpack-hot-middleware');
+const webpack = require('webpack');
+const webpackConfig = require('./webpack.config.base');
+
+const DEV_PORT = 3000;
+const compiler = webpack(webpackConfig);
+
+browserSync.init({
+  server: {
+    baseDir: '../dist',
+    index: 'index.html',
+  },
+  codeSync: true,
+  files: ['../dist'],
+  notify: true,
+  port: DEV_PORT,
+  middleware: [
+    webpackDevMiddleware(compiler, {
+      publicPath: '/',
+      hot: true,
+      stats: { colors: true },
+    }),
+    webpackHotMiddleware(compiler, {
+      reload: true,
+    }),
+  ],
+});

server/webpack.config.base.js

@@ -0,0 +1,16 @@
+const path = require('path');
+const webpackModules = require('./webpack.modules');
+const webpackPlugins = require('./webpack.plugins');
+
+const config = {
+  entry: ['./src/index.js', 'webpack-hot-middleware/client'],
+  output: {
+    filename: '[name].[hash].js',
+    path: path.resolve(__dirname, '../dist'),
+  },
+  target: 'web',
+  module: webpackModules,
+  plugins: webpackPlugins,
+};
+
+module.exports = config;

server/webpack.modules.js

@@ -0,0 +1,68 @@
+/* eslint-disable import/no-extraneous-dependencies */
+
+const path = require('path');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+
+module.exports = {
+  rules: [
+    {
+      test: /\.(js|vue)$/,
+      exclude: [
+        path.resolve(__dirname, '../node_modules'),
+      ],
+      use: [
+        { loader: 'eslint-loader', options: { failOnError: true } },
+      ],
+      enforce: 'pre',
+    },
+    {
+      test: /\.vue$/,
+      exclude: [
+        path.resolve(__dirname, '../node_modules'),
+      ],
+      use: 'vue-loader',
+    },
+    {
+      test: /\.js$/,
+      exclude: [
+        path.resolve(__dirname, '../node_modules'),
+      ],
+      use: [
+        { loader: 'babel-loader' },
+      ],
+    },
+    {
+      test: /\.scss$/,
+      exclude: [
+        path.resolve(__dirname, '../node_modules'),
+      ],
+      use: ExtractTextPlugin.extract({
+        fallback: 'style-loader',
+        use: [
+          { loader: 'css-loader' },
+          { loader: 'resolve-url-loader' },
+          { loader: 'sass-loader?sourceMap' },
+          { loader: 'postcss-loader' },
+        ],
+      }),
+    },
+    {
+      test: /\.(woff|woff2)$/,
+      use: [
+        { loader: 'file-loader', options: { name: 'fonts/[name].[ext]' } },
+      ],
+    },
+    {
+      test: /\.(gif|jpg|png)$/,
+      use: [
+        { loader: 'url-loader', options: { name: 'images/[name].[ext]?[hash]', limit: 5000 } },
+      ],
+    },
+    {
+      test: /\.svg$/,
+      use: [
+        { loader: 'file-loader', options: { name: 'images/[name].[ext]?[hash]' } },
+      ],
+    },
+  ],
+};

server/webpack.plugins.js

@@ -0,0 +1,27 @@
+/* eslint-disable import/no-extraneous-dependencies */
+
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+
+const COPYRIGHT_TEXT = 'Copyright 2017\nCode by Jeff Mosawy\n\nhttp://www.jmosawy.com\nj@mosawy.net';
+
+module.exports = [
+  new webpack.optimize.CommonsChunkPlugin({
+    name: 'vendor',
+    minChunks(module) {
+      return module.context && module.context.indexOf('node_modules') !== -1;
+    },
+  }),
+  new webpack.optimize.CommonsChunkPlugin({
+    name: 'manifest',
+  }),
+  new HtmlWebpackPlugin({
+    filename: 'index.html',
+    template: 'index.html',
+    inject: true,
+  }),
+  new webpack.HotModuleReplacementPlugin(),
+  new ExtractTextPlugin('app.css?[contenthash]'),
+  new webpack.BannerPlugin({ banner: COPYRIGHT_TEXT }),
+];