title: Webpack alias with Laravel mix in NPM Package development
body: <p>I'm trying to build a npm package with <code>laravel-mix</code>/<code>webpack</code> application, I want to have an alias for certain folder structure so I drafted out some of the <code>webpack.config.js</code> file</p>
  
  <p><strong>webpack.config.js</strong></p>
  
  <pre><code>/**
   * As our first step, we'll pull in the user's webpack.mix.js
   * file. Based on what the user requests in that file,
   * a generic config object will be constructed for us.
   */
  let mix = require('laravel-mix');
  
  let ComponentFactory = require('laravel-mix/src/components/ComponentFactory');
  
  new ComponentFactory().installAll();
  
  require('./webpack.mix');
  
  /**
   * Just in case the user needs to hook into this point
   * in the build process, we'll make an announcement.
   */
  
  Mix.dispatch('init', Mix);
  
  /**
   * Now that we know which build tasks are required by the
   * user, we can dynamically create a configuration object
   * for Webpack. And that's all there is to it. Simple!
   */
  
  let WebpackConfig = require('laravel-mix/src/builder/WebpackConfig');
  
  module.exports = new WebpackConfig().build();
  </code></pre>
  
  <p>I'm having webpack.mix.js file which is mentioned in the require method:</p>
  
  <pre><code>const mix = require('laravel-mix');
  
  /*
   |--------------------------------------------------------------------------
   | Mix Asset Management
   |--------------------------------------------------------------------------
   |
   | Mix provides a clean, fluent API for defining some Webpack build steps
   | for your Laravel application. By default, we are compiling the Sass
   | file for the application as well as bundling up all the JS files.
   |
   */
  
  const tailwindcss = require('tailwindcss');
  
  mix.copy('node_modules/nitseditor-frontend/Assets/images', 'public/nits-assets/images')
      .sass('node_modules/nitseditor-frontend/Assets/sass/app.scss', 'nits-assets/css')
      .options({
          processCssUrls: false,
          postCss: [ require('autoprefixer'), tailwindcss('./tailwind.config.js') ],
      })
      .js('node_modules/nitseditor-frontend/Assets/js/app.js', 'nits-assets/js')
      .webpackConfig({
          node: {
              fs: "empty"
          },
          output: {
              publicPath: '/',
              chunkFilename: 'nits-assets/chunks/[name].[chunkhash].js',
          },
          resolve: {
              extensions: ['.js', '.json', '.vue'],
              alias: {
                  NitsModels: path.resolve(__dirname, 'node_modules/nitseditor-frontend/Models'),
                  ProjectComponents: path.resolve(__dirname, 'resources')
              }
          }
      })
      .sourceMaps().version().browserSync('nitsapp.local');
  </code></pre>
  
  <p>Everything is working fine, I mean chunks are being generated, no problem with the asset folder structure only problem persists in <code>alias</code> I'm trying to import in my template as:</p>
  
  <pre><code>import {login} from 'NitsModels/config/_model'
  
  
  export default {
      name: "LoginLayoutOne",
      data() {
          return {
              email: '',
              password: '',
              error: '',
          }
      },
      beforeCreate() {
          console.log('check');
          this.$auth.logout();
      },
      methods: {
          login() {
              this.loading = true;
              this.error = "";
              const user = {
                  email: this.email,
                  password: this.password
              };
  
              login(user).then(resolve =&gt; {
                  this.loading = false;
                  // console.log(resolve.redirect);
                  this.$router.push(resolve.redirect)
              }).catch(error =&gt; {
                  this.loading = false;
                  this.error = error
              });
          }
      }
  }
  </code></pre>
  
  <p>and my <code>npm</code> script/package.json file looks like:</p>
  
  <pre><code>{
      "private": true,
      "scripts": {
          "dev": "npm run development",
          "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/nitseditor-frontend/webpack.config.js",
          "watch": "npm run development -- --watch",
          "watch-poll": "npm run watch -- --watch-poll",
          "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/nitseditor-frontend/webpack.config.js",
          "prod": "npm run production",
          "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/nitseditor-frontend/webpack.config.js"
      },
      "devDependencies": {
          "axios": "^0.19",
          "browser-sync": "^2.26.7",
          "browser-sync-webpack-plugin": "^2.0.1",
          "cross-env": "^7.0",
          "laravel-mix": "^5.0.1",
          "lodash": "^4.17.13",
          "nitseditor-frontend": "0.0.2",
          "resolve-url-loader": "^3.1.0",
          "sass": "^1.26.2",
          "sass-loader": "^8.0.2",
          "tailwindcss": "^1.2.0",
          "vue": "^2.6.11",
          "vue-router": "^3.1.6",
          "vue-template-compiler": "^2.6.11"
      },
      "dependencies": {
          "babel-plugin-syntax-dynamic-import": "^6.18.0",
          "laravel-mix-alias": "^1.0.2",
          "vuex": "^3.1.2"
      }
  }
  </code></pre>
  
  <p>Don't know why it is not able find the files:</p>
  
  <pre><code>ERROR  Failed to compile with 1 errors
  12:42:01 AM
  This dependency was not found:
  * NitsModels/config/_model in ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!/Users/nitishkumar/Dev/npm/nitseditor-frontend/Layouts/LoginPage/LayoutOne.vue?vue&amp;type=script&amp;lang=js&amp;
  To install it, you can run: npm install --save NitsModels/config/_model
                                         Asset      Size               Chunks                         Chunk Names
                        /nits-assets/js/app.js  8.74 MiB  /nits-assets/js/app  [emitted]              /nits-assets/js/app
  nits-assets/chunks/0.aabd72aaac8025782e17.js  54.5 KiB                    0  [emitted] [immutable]  
  nits-assets/chunks/1.09bd4a0c45db3c2f579e.js  24.5 KiB                    1  [emitted] [immutable]  
                       nits-assets/css/app.css  24.1 KiB  /nits-assets/js/app  [emitted]              /nits-assets/js/app
  ERROR in /Users/nitishkumar/Dev/npm/nitseditor-frontend/Layouts/LoginPage/LayoutOne.vue?vue&amp;type=script&amp;lang=js&amp; (./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!/Users/nitishkumar/Dev/npm/nitseditor-frontend/Layouts/LoginPage/LayoutOne.vue?vue&amp;type=script&amp;lang=js&amp;)
  Module not found: Error: Can't resolve 'NitsModels/config/_model' in '/Users/nitishkumar/Dev/npm/nitseditor-frontend/Layouts/LoginPage'
   @ /Users/nitishkumar/Dev/npm/nitseditor-frontend/Layouts/LoginPage/LayoutOne.vue?vue&amp;type=script&amp;lang=js&amp; (./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!/Users/nitishkumar/Dev/npm/nitseditor-frontend/Layouts/LoginPage/LayoutOne.vue?vue&amp;type=script&amp;lang=js&amp;) 53:0-59 78:6-12
   @ /Users/nitishkumar/Dev/npm/nitseditor-frontend/Layouts/LoginPage/LayoutOne.vue?vue&amp;type=script&amp;lang=js&amp;
   @ /Users/nitishkumar/Dev/npm/nitseditor-frontend/Layouts/LoginPage/LayoutOne.vue
   @ /Users/nitishkumar/Dev/npm/nitseditor-frontend/Assets/js/routes.js
   @ /Users/nitishkumar/Dev/npm/nitseditor-frontend/Assets/js/app.js
   @ multi ./node_modules/nitseditor-frontend/Assets/js/app.js ./node_modules/nitseditor-frontend/Assets/sass/app.scss
  [Browsersync] Proxying: http://nitsapp.local
  [Browsersync] Access URLs:
   --------------------------------------
         Local: http://localhost:3000
      External: http://192.168.1.113:3000
   --------------------------------------
            UI: http://localhost:3001
   UI External: http://localhost:3001
   --------------------------------------
  [Browsersync] Watching files...
  </code></pre>