title: how to use ngnix to serve webpack build files in production
body: <p>I wrote a vue + webpack project and it works fine in webpack-dev-middleware. Now I want to deploy it with nginx. What I do is write a webpack.build.config.js and bundle all files into a dist folder. Then I just copy the dist folder into nginx html folder and assign the index in nginx.conf. However, it has an error said:</p>
  
  <blockquote>
    <p>[Vue warn]: Failed to mount component: template or render function not
    defined.  (found in root instance)</p>
  </blockquote>
  
  <p>I am a newbie for devops/backend and quite confused with the overall build or deploy process. Is webpack-dev-server or nodejs still need in the production environment? My production environment backend is nginx/PHP and IIS/.Net, now it do not have node installed at all.</p>
  
  <p>My nginx.conf is</p>
  
  <pre><code>location / {
      root   html/dist;
      index  index.html index.htm;
  }
  </code></pre>
  
  <p>And the webpack.build.config.js is</p>
  
  <pre><code>var path = require('path');
  var webpack = require('webpack');
  var HtmlWebpackPlugin = require('html-webpack-plugin');
  var public_dir = "components";
  //var ModernizrWebpackPlugin = require('modernizr-webpack-plugin');
  
  module.exports = {
      entry: [
          path.join(__dirname,'./index.js')
      ],
      output: {
          path: path.join(__dirname, '/dist/'),
          filename: '[name].js',
          publicPath: '/'
      },
      devtool: 'eval-source-map',
      plugins: [
          new webpack.optimize.CommonsChunkPlugin('common.js'),
          new webpack.optimize.DedupePlugin(),
          new webpack.optimize.UglifyJsPlugin(),
          new webpack.optimize.AggressiveMergingPlugin(),
          new HtmlWebpackPlugin({
              filename: 'index.html',
              template: path.resolve(__dirname, 'index.html'),
              inject: true
          })
      ],
      resolve: {
          root: [path.resolve('./components')],
          extensions: ['', '.js', '.css']
      },
      module: {
          loaders: [
          ]
      }
  };
  </code></pre>
  
  <p>When build I run</p>
  
  <blockquote>
    <p>webpack -p --config ./webpack.build.config.js</p>
  </blockquote>