setup webpack

server/config/webpack.base.js

@@ -0,0 +1,45 @@
+const path = require('path');
+
+const ROOT = path.resolve(__dirname, '..', '..');
+
+module.exports = {
+  entry: `${ROOT}/src/main.js`,
+  output: {
+    path: `${ROOT}/client`,
+    publicPath: '/',
+    filename: 'js/[name].js',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          // vue-loader options go here
+        },
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.json$/,
+        loader: 'json-loader',
+      },
+      {
+        test: /\.(png|jpg|gif|svg)$/,
+        loader: 'file-loader',
+        options: {
+          name: '[name].[ext]?[hash]',
+        },
+      },
+    ],
+  },
+  resolve: {
+    alias: {
+      src: `${ROOT}/src`,
+    },
+  },
+  devtool: '#eval-source-map',
+};

server/config/webpack.dev.js

@@ -0,0 +1,27 @@
+const path = require('path');
+const webpack = require('webpack');
+const merge = require('webpack-merge');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const baseConfig = require('./webpack.base');
+
+const ROOT = path.resolve(__dirname, '..', '..');
+
+module.exports = merge(baseConfig, {
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: '"development"',
+      },
+    }),
+    // generate dist index.html with correct asset hash for caching.
+    // you can customize output by editing /index.html
+    // see https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: path.join(ROOT, 'client', 'index.html'),
+      template: path.join(ROOT, 'src', 'index.html'),
+      inject: true,
+      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
+      chunksSortMode: 'dependency',
+    }),
+  ],
+});

server/config/webpack.prod.js

@@ -0,0 +1,83 @@
+const path = require('path');
+const webpack = require('webpack');
+const merge = require('webpack-merge');
+const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const baseConfig = require('./webpack.base');
+
+const ROOT = path.resolve(__dirname, '..', '..');
+
+module.exports = merge(baseConfig, {
+  output: {
+    filename: 'js/[name].[chunkhash].js',
+  },
+  // add sourcemaps to production build
+  devtool: '#source-map',
+  // http://vue-loader.vuejs.org/en/workflow/production.html
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: '"production"',
+      },
+    }),
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false,
+      },
+    }),
+    new webpack.LoaderOptionsPlugin({
+      minimize: true,
+    }),
+    new FaviconsWebpackPlugin({
+      logo: path.join(ROOT, 'src', 'assets', 'logo.png'),
+      persistentCache: false,
+      emitStats: false,
+      icons: {
+        android: true,
+        appleIcon: true,
+        appleStartup: false,
+        coast: false,
+        favicons: true,
+        firefox: false,
+        opengraph: true,
+        twitter: true,
+        yandex: false,
+        windows: false,
+      },
+    }),
+    // generate dist index.html with correct asset hash for caching.
+    // you can customize output by editing /index.html
+    // see https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: path.join(ROOT, 'client', 'index.html'),
+      template: path.join(ROOT, 'src', 'index.html'),
+      inject: true,
+      minify: {
+        removeComments: true,
+        // more options:
+        // https://github.com/kangax/html-minifier#options-quick-reference
+      },
+      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
+      chunksSortMode: 'dependency',
+    }),
+    // split vendor js into its own file
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      minChunks(module) {
+        // any required modules inside node_modules are extracted to vendor
+        const nodeModules = path.join(ROOT, 'node_modules');
+        return (
+          module.resource &&
+          /\.js$/.test(module.resource) &&
+          module.resource.indexOf(nodeModules) === 0
+        );
+      },
+    }),
+    // extract webpack runtime and module manifest to its own file in order to
+    // prevent vendor hash from being updated whenever app bundle is updated
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'manifest',
+      chunks: ['vendor'],
+    }),
+  ],
+});