title: How to use Webpack to bundle all imported dependencies in a single file?
body: <p>I have the following directory structure...</p>
  
  <pre><code>root
  │   package.json
  │   webpack-client.config.js
  │   webpack-server.config.js
  │   yarn.lock
  ├───assets
  │   └───js
  │           index.js
  ├───dist
  │   │   header.html
  │   │   hotel-details.html
  │   │   hotel-list.html
  │   │   index.html
  │   │   server.js
  │   │   
  │   └───static
  │       └───j
  │               index.js
  ├───node_modules
  │   └...
  ├───server
  │       database.js
  │       index.js
  └───views
          header.html
          hotel-details.html
          hotel-list.html
          index.html
  </code></pre>
  
  <p>I want to use Webpack for two things. </p>
  
  <ol>
  <li><p>minify and bundle server side JS - export the bundle to <code>dist/server.js</code> using <code>server/index.js</code> as the entry point. I have achieved this using the <code>webpack-server.config.js</code> provided below.</p></li>
  <li><p>minify each <code>views/*.html</code> file and export it to <code>dist/v/*.html</code>. If the <code>html</code> files have <code>&lt;script&gt;</code> tags I want to create minified bundles from those files and export them to <code>dist/static/j/[html_filename].js</code>.</p>
  
  <ul>
  <li>I'm struggling with this one. I managed to minify the <code>.html</code> file and export it's <code>.js</code> files to <code>dist/static/j/[html_filename].js</code>. However, I can't use the <code>.js</code> file from html as it uses syntax like <code>require</code> or <code>import</code>. I've provided the content of both <code>assets/js/index.js</code> and <code>dist/static/j/index.js</code>.</li>
  </ul></li>
  </ol>
  
  <p><code>webpack-client.config.js</code></p>
  
  <pre><code>var path = require("path");
  var fs = require("fs");
  
  var htmlFiles = {}; 
  fs.readdirSync(path.join(__dirname, 'views'))
    .filter(f =&gt; (path.parse(f).ext.toLowerCase() === '.html'))
    .forEach(f =&gt; {
      var name = path.parse(f).name;
      htmlFiles[name] = path.join(__dirname, 'views', f);
    });
  
  module.exports = {
    module: {
      rules: [
        { 
          test: /\.html$/, 
          use: [
            { loader: 'file-loader', options: { name: '[name].[ext]', emitFile: true }},
            { loader: 'extract-loader' },
            { 
              loader: 'html-loader',
              options: { 
                minimize: true,
                attrs: ['script:src']
              }
            },
          ]
        },
        {
          test: /\.js$/,
          use: [
            { 
              loader: 'file-loader', 
              options: { 
                name: 'static/j/[name].[ext]',
                publicPath: (p) =&gt; p.replace('static/', '')
              }
            },
            {
              loader: 'babel-loader',
              options: {
                presets: [
                  [
                    "babel-preset-env", {
                      "targets": {
                        "chrome": 52
                      }
                    }
                  ]
                ]
              }
            },
          ]
        }
      ]
    },
    target: 'web',
    watch: true,
    entry: htmlFiles,
    output: {
      path: path.join(__dirname, "dist"),
      filename: '[name].html.js'
    }
  };
  </code></pre>
  
  <p><code>webpack-server.config.js</code></p>
  
  <pre><code>var path = require("path");
  var fs = require("fs");
  const MinifyPlugin = require('babel-minify-webpack-plugin');
  
  var nodeLibs = {};
  fs.readdirSync(path.join(__dirname, 'node_modules'))
    .filter(x =&gt; x !== '.bin')
    .forEach(mod =&gt; { nodeLibs[mod] = 'commonjs ' + mod; });
  
  module.exports = {
    externals: nodeLibs,
  
    module: {
      rules: [
        {
          test: /\.js$/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['babel-preset-env']
            }
          }
        }
      ] 
    },
    plugins: [
      new MinifyPlugin()
    ],
    context: __dirname,
    entry: {
      server: "./server/index.js"
    },
    target: "node",
    output: {
      path: path.join(__dirname, "dist"),
      filename: "server.js"
    }
  };
  </code></pre>
  
  <p><code>assets/js/index.js</code></p>
  
  <pre><code>import $ from '../../node_modules/jquery';
  
  let scrollEnabled = true;
  
  window.setScrollEnabled = (scrollEnabled) =&gt; {
    $('body').css({backgroundColor: 'red'});
    console.log('isScrollEnabled:', scrollEnabled);
  }
  </code></pre>