title: Can't resolve dependencies with webpack 4 and bower
body: <p>I am trying to bundle my application with webpack 4, it's a application based in Polymer, with dependencies in bower, and HTML files</p>
  
  <p>This is my webpack config:
  </p>
  
  <pre><code>'use strict';
  
  const webpack = require('webpack');
  
  /* global __dirname module require */
  /* eslint comma-dangle: ["error", "never"] */
  const path = require('path');
  
  module.exports = {
      entry: './my-entry.html',
      output: {
          filename: '[name].bundle.js',
          path: path.resolve(__dirname, './dist'),
          publicPath: 'dist/'
      },
      resolve: {
          modules: ['bower_components', 'node_modules'],
          descriptionFiles: ['package.json', 'bower.json']
      },
      devtool: 'inline-source-map',
      module: {
          rules: [
              {
                  test: /\.html$/,
                  use: [
                      { loader: 'babel-loader' },
                      { loader: 'polymer-webpack-loader' }
                  ]
              },
              {
                  test: /\.js$/,
                  use: [
                      {
                          loader: 'babel-loader',
                          options: {
                              presets: ['env']
                          }
                      }
                  ]
              }
          ]
      }
  };
  </code></pre>
  
  <p>And when I run webpack, I have the following error:</p>
  
  <pre><code>ERROR in ./my-page.html
  Module not found: Error: Can't resolve '../util-custom-types/imports/currency.html' in 'C:\Workspaces\my-project'
  resolve '../one-package/imports/currency.html' in 'C:\Workspaces\my-project'
    using description file: C:\Workspaces\my-project\package.json (relative path: .)
  </code></pre>
  
  <p>this import <code>../util-custom-types/imports/currency.html</code> is located inside <code>bower_components/util-custom-types/imports/currency.html</code>, and when I run <code>polymer serve</code> without bundling, it works.</p>
  
  <p>Looks like webpack is missing something inside </p>
  
  <p><code>resolve: {
              modules: ['bower_components', 'node_modules'],</code></p>
  
  <p>because it doesn't looks for the file inside those folders.</p>
  
  <p>this is one of the failing imports</p>
  
  <pre><code>&lt;link rel="import" href="../util-custom-types/imports/currency.html"&gt;
  </code></pre>
  
  <p>I have tried some plugins on the internet, but as webpack 4 is pretty new, a lot of them are not working.</p>
  
  <p>I know that if I use the import links pointing to the <code>bower_components</code> folder, like this, <code>&lt;link rel="import" href=".bower_components/util-custom-types/imports/currency.html"&gt;</code> it will work, but it's not a valid solution, as some of the components also have the same way of importing, and I can't modify that.</p>
  
  <p>So, In conclusion, I want to use html imports, pointing to a bower_components folder, like this:</p>
  
  <p><code>&lt;link rel="import" href="../util-custom-types/imports/currency.html"&gt;</code></p>
  
  <p>to a file located in </p>
  
  <p><code>./bower_components/util-custom-types/imports/currency.html</code></p>
  
  <p>in webpack 4, without referencing to the bower_components foder. </p>
  
  <p>Has anyone achieved this?</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>I have created a sample github project, with just a component creaated from polymer init, and a webpack configuration.</p>
  
  <p><a href="https://github.com/vlaraort/demo_polymer_webpack" rel="nofollow noreferrer">https://github.com/vlaraort/demo_polymer_webpack</a></p>
  
  <p>It's important to be a component, no a application, 
  because the html imports of polymer are not pointing to bower components, and in a application, the html imports of polymer, points to bower_components.</p>
  
  <p>Component:</p>
  
  <p><code>&lt;link rel="import" href="../polymer/polymer-element.html"&gt;</code></p>
  
  <p>Application:</p>
  
  <p><code>&lt;link rel="import" href="../bower_components/polymer/polymer-element.html"&gt;</code></p>
  
  <p>To install, <code>npm i &amp; bower i</code></p>
  
  <p>To run working polymer serve <code>npm run polymer:dev</code>
  To run not-working webpack serve <code>npm run webpack:dev</code></p>
  
  <p>As you can see with the <code>webpack:dev</code>, the polymer element import is trying to fetch from <code>http://localhost:8080/polymer/polymer-element.html</code>, instead of <code>http://localhost:8080/bower_components/polymer/polymer-element.html</code>, and it's failing because that.</p>
  
  <p>So, the objective of the question is to understand what magic is polymer serve doing with the imports, as it resolves this link</p>
  
  <p><code>&lt;link rel="import" href="../polymer/polymer-element.html"&gt;</code></p>
  
  <p>into bower_components, and how to reproduce that behaviour in webpack.</p>
  
  <p>Thanks!</p>