title: How use vue-loader without vue-cli
body: <p>I am trying to put together the absolute bare minimum example of a Vue project that uses webpack to transpile .vue files.</p>
  
  <p>My goal is to understand each build step in detail. Most tutorials advise to use <code>vue-cli</code> and use the <code>webpack-simple</code> config. And although that setup works, it seems overkill for my simple purpose. For now I don't want babel, linting or a live web server with hot module reloading.</p>
  
  <p>A minimal example with just <code>import Vue from 'vue'</code> works! Webpack compiles the vue library and my own code into one bundle.</p>
  
  <p>But now, I want to add <a href="https://vue-loader.vuejs.org/en/" rel="noreferrer">vue-loader</a> to the webpack config, so that <code>.vue</code> files will get transpiled. I have installed vue loader:</p>
  
  <pre><code>npm install vue-loader
  npm install css-loader
  npm install vue-template-compiler 
  </code></pre>
  
  <p>And I have added vue-loader to the webpack config:</p>
  
  <pre><code>var path = require('path')
  
  module.exports = {
    entry: './dev/app.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
    module: {
      rules: [
        {
          test: /\.vue$/,
          loader: 'vue-loader',
          options: {
            loaders: {
            }
          }
        }
      ]
    },
    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.esm.js'
      }
    }
  };
  </code></pre>
  
  <p>I have created hello.vue</p>
  
  <pre><code>&lt;template&gt;
    &lt;p&gt;{{greeting}} World&lt;/p&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
      data:function(){
          return {
              greeting:"Hi there"
          }
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>And in my app I import 'hello'</p>
  
  <pre><code>import Vue from 'vue'
  import hello from "./hello.vue";
  
      new Vue({
        el: '#app',
        template:`&lt;div&gt;&lt;hello&gt;&lt;/hello&gt;&lt;/div&gt;`,
        created: function () {   
          console.log("Hey, a vue app!")
        }
      })
  </code></pre>
  
  <p>The loader does not seem to pick up the <code>.vue</code> files, I get the error:</p>
  
  <pre><code>Module not found: Error: Can't resolve './hello.js' 
  </code></pre>
  
  <p><strong>EDIT</strong></p>
  
  <p>When trying to <code>import hello from 'hello.vue'</code> I get the error:</p>
  
  <pre><code>Unknown custom element: &lt;hello&gt; - did you register the component correctly?
  </code></pre>
  
  <p>Am I missing a step? Am I importing the .vue component the right way? How do I use the hello.vue component from app.js?</p>