title: Vue + Webpack build show blank page
body: <p>I have some problem with vue application + webpack. When I run npm run dev everything went smooth. When I go for production mode, npm run build, the build process completed. But when I open the dist index.html or copy the bundled package with index.html to shared hosting public_html folder it just show blank.</p>
  
  <p>below is my setup:</p>
  
  <p>package.json</p>
  
  <pre><code>{
    "scripts": {
      "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
      "start": "npm run dev",
      "build": "node build/build.js"
    },
    "dependencies": {
      "axios": "^0.17.1",
      "bootstrap": "^4.0.0",
      "jquery": "^3.3.1",
      "popper.js": "^1.12.9",
      "vue": "^2.5.2",
      "vue-router": "^3.0.1",
      "vuex": "^3.0.1"
    },
    "devDependencies": {
      "autoprefixer": "^7.1.2",
      "babel-core": "^6.22.1",
      "babel-helper-vue-jsx-merge-props": "^2.0.3",
      "babel-loader": "^7.1.1",
      "babel-plugin-syntax-jsx": "^6.18.0",
      "babel-plugin-transform-object-rest-spread": "^6.26.0",
      "babel-plugin-transform-regenerator": "^6.26.0",
      "babel-plugin-transform-runtime": "^6.22.0",
      "babel-plugin-transform-vue-jsx": "^3.5.0",
      "babel-preset-env": "^1.3.2",
      "babel-preset-stage-2": "^6.22.0",
      "chalk": "^2.0.1",
      "compression-webpack-plugin": "^1.1.6",
      "copy-webpack-plugin": "^4.0.1",
      "cross-env": "^5.1.3",
      "css-loader": "^0.28.0",
      "extract-text-webpack-plugin": "^3.0.0",
      "file-loader": "^1.1.4",
      "friendly-errors-webpack-plugin": "^1.6.1",
      "html-webpack-externals-plugin": "^3.6.0",
      "html-webpack-plugin": "^2.30.1",
      "node-notifier": "^5.1.2",
      "node-sass": "^4.7.2",
      "optimize-css-assets-webpack-plugin": "^3.2.0",
      "ora": "^1.2.0",
      "portfinder": "^1.0.13",
      "postcss-import": "^11.0.0",
      "postcss-loader": "^2.0.8",
      "postcss-url": "^7.2.1",
      "precss": "^3.1.0",
      "rimraf": "^2.6.0",
      "sass-loader": "^6.0.6",
      "semver": "^5.3.0",
      "shelljs": "^0.7.6",
      "style-loader": "^0.20.1",
      "uglifyjs-webpack-plugin": "^1.1.1",
      "url-loader": "^0.5.8",
      "vue-loader": "^13.3.0",
      "vue-style-loader": "^3.0.1",
      "vue-template-compiler": "^2.5.2",
      "webpack": "^3.6.0",
      "webpack-bundle-analyzer": "^2.9.0",
      "webpack-dev-server": "^2.9.1",
      "webpack-merge": "^4.1.0"
    },
    "engines": {
      "node": "&gt;= 6.0.0",
      "npm": "&gt;= 3.0.0"
    },
    "browserslist": [
      "&gt; 1%",
      "last 2 versions",
      "not ie &lt;= 8"
    ]
  }
  </code></pre>
  
  <h1>webpack file</h1>
  
  <p>config/index.js</p>
  
  <pre><code>'use strict'
  // Template version: 1.3.1
  // see http://vuejs-templates.github.io/webpack for documentation.
  
  const path = require('path')
  
  module.exports = {
    dev: {
  
      // Paths
      assetsSubDirectory: 'static',
      assetsPublicPath: '/',
      proxyTable: {},
  
      // Various Dev Server settings
      host: 'localhost', // can be overwritten by process.env.HOST
      port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
      autoOpenBrowser: false,
      errorOverlay: true,
      notifyOnErrors: true,
      poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
  
  
      /**
       * Source Maps
       */
  
      // https://webpack.js.org/configuration/devtool/#development
      devtool: 'cheap-module-eval-source-map',
  
      // If you have problems debugging vue-files in devtools,
      // set this to false - it *may* help
      // https://vue-loader.vuejs.org/en/options.html#cachebusting
      cacheBusting: true,
  
      cssSourceMap: true
    },
  
    build: {
      // Template for index.html
      index: path.resolve(__dirname, '../dist/index.html'),
  
      // Paths
      assetsRoot: path.resolve(__dirname, '../dist'),
      assetsSubDirectory: 'static',
      assetsPublicPath: './',
  
      /**
       * Source Maps
       */
  
      productionSourceMap: false,
      // https://webpack.js.org/configuration/devtool/#production
      devtool: '#source-map',
  
      // 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
    }
  }
  </code></pre>
  
  <p>webpack.base.conf.js</p>
  
  <pre><code>'use strict'
  const path = require('path')
  const utils = require('./utils')
  const config = require('../config')
  const vueLoaderConfig = require('./vue-loader.conf')
  
  function resolve (dir) {
    return path.join(__dirname, '..', dir)
  }
  
  module.exports = {
    context: path.resolve(__dirname, '../'),
    entry: {
      app: './src/main.js'
    },
    output: {
      path: config.build.assetsRoot,
      filename: '[name].js',
      publicPath: process.env.NODE_ENV === 'production'
        ? config.build.assetsPublicPath
        : config.dev.assetsPublicPath
    },
    resolve: {
      extensions: ['.js', '.vue', '.json'],
      alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': resolve('src'),
      }
    },
    module: {
      rules: [
        {
          test: /\.vue$/,
          loader: 'vue-loader',
          options: vueLoaderConfig
        },
        {
          test: /\.js$/,
          loader: 'babel-loader',
          include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
        },
        {
          test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
          loader: 'url-loader',
          options: {
            limit: 10000,
            name: utils.assetsPath('img/[name].[hash:7].[ext]')
          }
        },
        {
          test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
          loader: 'url-loader',
          options: {
            limit: 10000,
            name: utils.assetsPath('media/[name].[hash:7].[ext]')
          }
        },
        {
          test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
          loader: 'url-loader',
          options: {
            limit: 10000,
            name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
          }
        },
        {
          test: /\.(scss)$/,
          use: [{
            loader: 'style-loader', // inject CSS to page
          }, {
            loader: 'css-loader', // translates CSS into CommonJS modules
          }, {
            loader: 'postcss-loader', // Run post css actions
            options: {
              plugins: function () { // post css plugins, can be exported to postcss.config.js
                return [
                  require('precss'),
                  require('autoprefixer')
                ];
              }
            }
          }, {
            loader: 'sass-loader' // compiles SASS to CSS
          }]
        }
      ]
    },
    node: {
      // prevent webpack from injecting useless setImmediate polyfill because Vue
      // source contains it (although only uses it if it's native).
      setImmediate: false,
      // prevent webpack from injecting mocks to Node native modules
      // that does not make sense for the client
      dgram: 'empty',
      fs: 'empty',
      net: 'empty',
      tls: 'empty',
      child_process: 'empty'
    }
  }
  </code></pre>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width,initial-scale=1.0, shrink-to-fit=no"&gt;
      &lt;title&gt;Vue Application&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="app"&gt;&lt;/div&gt;
      &lt;!-- built files will be auto injected --&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>main.js</p>
  
  <pre><code>import Vue from 'vue'
  import App from './App.vue'
  import store from './vuex/store'
  import router from './router/router'
  import helper from './helper'
  import './assets/styles/main.scss'
  
  new Vue({
    el: '#app',
    router,
    store,
    components: { App },
    template: '&lt;App/&gt;'
  })
  </code></pre>
  
  <p>App.vue</p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="app"&gt;
      &lt;div id="wrapper"&gt;
    &lt;!-- the router outlet, where all matched components would be viewed --&gt;
    &lt;!-- A named view, 'header' --&gt;
      &lt;router-view name="header"&gt;&lt;/router-view&gt;
      &lt;div class="clearfix"&gt;&lt;/div&gt;
      &lt;!-- A named view, 'dashboard' --&gt;
        &lt;router-view name="dashboard"&gt;&lt;/router-view&gt;
      &lt;!-- A named view, 'content' --&gt;
      &lt;router-view name="content"&gt;&lt;/router-view&gt;
      &lt;!-- A named view, 'footer' --&gt;
      &lt;router-view name="footer"&gt;&lt;/router-view&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'App',
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>My primary suspect is there is something wrong with my asset configuration on webpack, so here is my folder structure in case it'll help.</p>
  
  <pre><code>src
    assets
      styles
        main.scss
    App.vue
    main.js
  </code></pre>
  
  <p>Sorry before if I can not show any further code, thanks.</p>