title: How to use vue development mode with Django
body: <p>I don't know how to run development mode with Django. I'm running webpack and when I finish all the Vuejs work I just bundle all to a folder where Django serves It as a static file. I know taht I've to run webpack with mode development but that doens't work, It gives me a cannot found error.
  I'd like to run Vuejs in development mode alongside with Django, how can I do that?
  I'll share to you my project structure, my package.json and webpack config.</p>
  <pre><code>const path = require('path');
  const VueLoaderPlugin = require('vue-loader/lib/plugin');
  
  module.exports = {
      entry: './frontend/Vue/main.js',
      output: {
          filename: 'build.js',
          path: path.resolve(__dirname, './static/js'),
          publicPath: '/static/js'
      },
      module: {
          rules: [
              {
                  test: /\.(js)$/,
                  exclude: /(node_modules)/,
                  use: [
                      { loader: 'babel-loader' }
                  ]
              },
              {
                  test: /\.(css|scss)/,
                  use: [
                      'style-loader'
                  ]
              },
              {
                  test: /\.vue$/,
                  exclude: /node_modules/,
                  loader: 'vue-loader'
              }
          ]
      },
      devServer: {
          // contentBase: ponerle la ruta del index de django
          contentBase: path.join(__dirname, 'templates'),
          watchContentBase: true,
          historyApiFallback: true,
          noInfo: true
        },
      plugins: [
          new VueLoaderPlugin()
      ]
  }
  </code></pre>
  <p>package.json</p>
  <pre class="lang-js prettyprint-override"><code>{
    &quot;name&quot;: &quot;TuDistribuidora&quot;,
    &quot;version&quot;: &quot;1.0.0&quot;,
    &quot;description&quot;: &quot;&quot;,
    &quot;main&quot;: &quot;index.js&quot;,
    &quot;scripts&quot;: {
      &quot;test&quot;: &quot;echo \&quot;Error: no test specified\&quot; &amp;&amp; exit 1&quot;,
      &quot;dev&quot;: &quot;webpack-dev-server --mode development --port 9000 --open&quot;,
      &quot;build&quot;: &quot;webpack --progress&quot;
    },
    &quot;repository&quot;: {
      &quot;type&quot;: &quot;git&quot;,
      &quot;url&quot;: &quot;git+https://github.com/EmiBuffet/TuDistribuidora.git&quot;
    },
    &quot;keywords&quot;: [],
    &quot;author&quot;: &quot;&quot;,
    &quot;license&quot;: &quot;ISC&quot;,
    &quot;bugs&quot;: {
      &quot;url&quot;: &quot;https://github.com/EmiBuffet/TuDistribuidora/issues&quot;
    },
    &quot;homepage&quot;: &quot;https://github.com/EmiBuffet/TuDistribuidora#readme&quot;,
    &quot;dependencies&quot;: {
      &quot;vue&quot;: &quot;^2.6.11&quot;,
      &quot;vue-router&quot;: &quot;^3.4.5&quot;,
      &quot;vuex&quot;: &quot;^3.5.1&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@babel/core&quot;: &quot;^7.11.1&quot;,
      &quot;babel-loader&quot;: &quot;^8.1.0&quot;,
      &quot;babel-preset-es2015&quot;: &quot;^6.24.1&quot;,
      &quot;node-sass&quot;: &quot;^4.14.1&quot;,
      &quot;sass-loader&quot;: &quot;^9.0.3&quot;,
      &quot;style-loader&quot;: &quot;^1.2.1&quot;,
      &quot;vue-loader&quot;: &quot;^15.9.3&quot;,
      &quot;vue-style-loader&quot;: &quot;^4.1.2&quot;,
      &quot;vue-template-compiler&quot;: &quot;^2.6.11&quot;,
      &quot;webpack&quot;: &quot;^4.44.1&quot;,
      &quot;webpack-cli&quot;: &quot;^3.3.12&quot;,
      &quot;webpack-dev-server&quot;: &quot;^3.11.0&quot;,
      &quot;bulma&quot;: &quot;^0.9.1&quot;
    }
  }
  </code></pre>
  <p>project structure:
  <a href="https://i.stack.imgur.com/ANMgc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ANMgc.png" alt="architecture" /></a></p>