config file

build/config.js

@@ -0,0 +1,40 @@
+var path = require('path');
+
+const config = {
+  dev: {
+    env: "dev",
+    port: 8080,
+    autoOpenBrowser: true,
+    assetsRoot: path.resolve(__dirname, '../dist'),
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+    proxyTable: {},
+    // CSS Sourcemaps off by default because relative paths are "buggy"
+    // with this option, according to the CSS-Loader README
+    // (https://github.com/webpack/css-loader#sourcemaps)
+    // In our experience, they generally work as expected,
+    // just be aware of this issue when enabling this option.
+    cssSourceMap: false
+  },
+  prod: {
+    env: "prod",
+    index: path.resolve(__dirname, '../dist/index.html'),
+    assetsRoot: path.resolve(__dirname, '../dist'),
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+    productionSourceMap: true,
+    // Gzip off by default as many popular static hosts such as
+    // Surge or Netlify already gzip all static assets for you.
+    // Before setting to `true`, make sure to:
+    // npm install --save-dev compression-webpack-plugin
+    productionGzip: false,
+    productionGzipExtensions: ['js', 'css'],
+    // Run the build command with an extra argument to
+    // View the bundle analyzer report after build finishes:
+    // `npm run build --report`
+    // Set to `true` or `false` to always turn it on or off
+    bundleAnalyzerReport: process.env.npm_config_report
+  },
+};
+
+module.exports = config;

build/webpack.base.js

@@ -1,11 +1,14 @@
 const path = require('path');
-const commonPaths = require('./common-paths');
+const config = require('./config');
 
-const config = {
+isProd = process.env.NODE_ENV === 'prod';
+isDev = process.env.NODE_ENV === 'dev';
+
+module.exports = {
   entry: './src/main.js',
   output: {
     filename: 'build.js',
-    path: commonPaths.outputPath,
+    path: isProd ? config.prod.assetsRoot : config.dev.assetsRoot,
     publicPath: '/dist/',
   },
   module: {
@@ -43,6 +46,4 @@ const config = {
       'vue$': 'vue/dist/vue.esm.js'
     }
   },
-};
-
-module.exports = config;
+};

build/webpack.dev.js

@@ -1,19 +1,10 @@
-const config = {
+module.exports = {
   devtool: '#cheap-module-eval-source-map',
   devServer: {
     historyApiFallback: true,
     noInfo: true
   },
   performance: {
     hints: false
-  },
-  plugins: [
-    new webpack.DefinePlugin({
-      'process.env': {
-        NODE_ENV: '"development"'
-      }
-    }),
-  ]
-};
-
-module.exports = config;
+  }
+};

build/webpack.prod.js

@@ -1,11 +1,6 @@
-const config = {
+module.exports = {
   devtool: '#source-map',
   plugins: [
-    new webpack.DefinePlugin({
-      'process.env': {
-        NODE_ENV: '"production"'
-      }
-    }),
     new webpack.optimize.UglifyJsPlugin({
       sourceMap: true,
       compress: {
@@ -16,6 +11,4 @@ const config = {
       minimize: true
     })
   ]
-};
-
-module.exports = config;
+};

src/main.js

@@ -1,8 +1,8 @@
-// import Vue from 'vue'
-// import App from './App.vue'
+import Vue from 'vue';
+import App from './App.vue';
 
-// new Vue({
-//   el: '#app',
-//   render: h => h(App)
-// })
+new Vue({
+  el: '#app',
+  render: h => h(App)
+});
 console.log('Hello World!');