title: Webpack can't find (font) dependencies
body: <p>NPM/Webpack can't find dependencies with Laravel Mix</p>
  
  <pre><code>These dependencies were not found:
  
  * font-awesome
  * ionicons
  
  
  ERROR in multi lodash jquery bootstrap-sass fastclick jquery-slimscroll admin-lte icheck ionicons font-awesome datatables.net datatables.net-bs
  Module not found: Error: Can't resolve 'font-awesome' in 'D:\Laragon'
   @ multi lodash jquery bootstrap-sass fastclick jquery-slimscroll admin-lte icheck ionicons font-awesome datatables.net datatables.net-bs
  </code></pre>
  
  <p>More clearly. These are installed (can find them in node_modules) and require location is correct. I'm also using more packages, and these problems are related to, coincidentally, the only fonts in my webpack.</p>
  
  <p>They are available in the <code>package.json</code> and <code>package.json.lock</code>. </p>
  
  <p>Installed trying different methods: firstly <code>npm install</code> and <code>--save-dev</code>, also tried <code>yarn install</code> and <code>yarn add</code>. </p>
  
  <p>My <code>webpack.mix.js</code>:</p>
  
  <pre><code>let 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.
   |
   */
  
  mix.webpackConfig({
      module: {
          loaders: [
              {
                  test: /\.js?/,
                  exclude: [/node_modules/, /styles/],
                  loaders: ['babel'],
                  include: path.join(__dirname, 'src')
              },
              {
                  test: /\.scss$/,
                  loader: 'style!css!resolve-url!sass?sourceMap'
              },
              {
                  test: /\.css$/,
                  loader: "style-loader!css-loader"
              },
              {
                  test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                  loader: 'url-loader?limit=10000&amp;mimetype=application/font-woff'
              },
              {
                  test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                  loader: 'file-loader'
              }
          ]
      }
  });
  
  mix.js('resources/assets/js/app.js', 'public/js')
     .sass('resources/assets/sass/app.scss', 'public/css');
  
  mix.js('resources/assets/js/auth.js', 'public/js')
     .sass('resources/assets/sass/auth.scss', 'public/css');
  
  mix.js('resources/assets/js/admin-lte.js', 'public/js')
     .sass('resources/assets/sass/admin-lte.scss', 'public/css');
  
  mix.autoload({
      jquery: [ '$', 'jQuery', 'jquery'],
      DataTable: 'datatables.net-bs'
  });
  
  mix.extract([
      'lodash', 'jquery', 'bootstrap-sass',
      'fastclick', 'jquery-slimscroll', 'admin-lte',
      'icheck', 'ionicons', 'font-awesome',
      'datatables.net', 'datatables.net-bs'
  ], 'public/js/vendor.js');
  
  mix.version();
  </code></pre>
  
  <p>I also tried it without the <code>mix.webpackConfig</code>, adding the config this was a desperate attempt to fix the fonts.</p>
  
  <p>Here is my package.json:</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/laravel-mix/setup/webpack.config.js",
          "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
          "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/laravel-mix/setup/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/laravel-mix/setup/webpack.config.js"
      },
      "devDependencies": {
          "admin-lte": "^2.4.2",
          "axios": "^0.17",
          "bootstrap": "^4.0.0",
          "cross-env": "^5.1.3",
          "datatables.net": "^1.10.16",
          "fastclick": "^1.0.6",
          "font-awesome": "^4.7.0",
          "icheck": "^1.0.2",
          "ionicons": "^3.0.0",
          "jquery": "^3.3.1",
          "jquery-slimscroll": "^1.3.8",
          "laravel-mix": "^2.0",
          "lodash": "^4.17.4",
          "popper.js": "^1.12",
          "script-loader": "^0.7.2"
      },
      "dependencies": {
          "bootstrap-sass": "^3.3.7",
          "datatables.net-bs": "^1.10.16"
      }
  }
  </code></pre>
  
  <p>And in my .scss:</p>
  
  <pre><code>@import '~font-awesome/scss/font-awesome';
  </code></pre>
  
  <p>Both on Mac and Windows 10</p>