title: How to config webpack - libraryTarget + splitChunks + requaire in borwser
body: <p>I'm writing libs for web pages in JS and "compile" it by Webpack. I need import/require (like requirejs) these libs on pages that are in separate Webpack projects. Libs can be hosted on two separate paths - one is relative and the second is absolute. How I have to config webpacks to export libs that can be import/require in another project?</p>
  
  <p>I tried umd, amd, window, this, etc. libraryTarget and in all cases, responses for require is undefined or throw an error.</p>
  
  <p>My libs webpack config:</p>
  
  <pre class="lang-js prettyprint-override"><code>const HtmlWebPackPlugin = require('html-webpack-plugin');
  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  const CopyWebpackPlugin = require('copy-webpack-plugin');
  const CleanWebpackPlugin = require('clean-webpack-plugin');
  
  let glob = require('glob'),
      entryObject = glob.sync('./src/js/*.js').reduce(
          function (entries, entry) {
              let matchForRename = /^\.\/src\/(.+)\.js$/g.exec(entry);
  
              if (matchForRename !== null &amp;&amp; typeof matchForRename[1] !== 'undefined') {
                  let entryName = matchForRename[1];
  
                  if (typeof entries[entryName] !== 'undefined') {
                      entries[entryName].push(entry);
                  } else {
                      entries[entryName] = [entry];
                  }
  
              }
  
              return entries;
          }, {}
      );
  
  module.exports = env =&gt; {
      return {
          devtool: env.production === 'true' ? false : 'eval-source-map',
          target: 'web',
          entry: entryObject,
          output: {
              chunkFilename: '[name].js',
              publicPath: 'dist/',
              libraryTarget: 'umd',
          },
          optimization: {
              splitChunks: {
                  chunks: 'all',
                  maxInitialRequests: Infinity,
                  minSize: 0,
                  cacheGroups: {
                      vendor: {
                          test: /[\\/]node_modules[\\/]/,
                          name(module) {
                              // get the name. E.g. node_modules/packageName/not/this/part.js
                              // or node_modules/packageName
                              const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
  
                              // npm package names are URL-safe, but some servers don't like @ symbols
                              return `js/npm/${packageName.replace('@', '')}`;
                          },
                      }
                  },
              }
          },
          module: {
              rules: [{
                  test: /\.js$/,
                  exclude: /node_modules/,
                  use: {
                      loader: 'babel-loader',
                  },
              }, ]
          },
          plugins: [
              new CleanWebpackPlugin(),
              new CopyWebpackPlugin([{
                  from: 'src/php',
                  to: 'php'
              }], {
                  copyUnmodified: true
              })
          ]
      }
  };
  </code></pre>
  
  <p>In web page project I tried something like this (with requirejs):</p>
  
  <pre class="lang-js prettyprint-override"><code>window.require.config({
      baseUrl: '../../libs/',
      paths: {
          prod: 'http://example.com/libs/'
      }
  });
  
  window.require(['js/main'], function (main) {
          console.log(main);
      },
      function (err) {
          window.require(['prod/js/main'],
              function (main) {
                  console.log(main);
              });
      }
  );
  </code></pre>
  
  <p>or only by webpack:</p>
  
  <pre class="lang-js prettyprint-override"><code>import('../../libs/js/main.js').then(function (main) {
              console.log('ok');
          })
          .catch(function (error) {});
      try {
          require(['../../libs/js/main.js'], function (main) {
              console.log(main);
          }, function (error) {});
      } catch (error) {}
      try {
          define('../../libs/js/main.js', [], function () {
              console.log('ok');
          }, function (error) {
              console.log('error');
          });
      } catch (error) {}
      try {
          define(['../../libs/js/main.js'], function () {
              console.log('ok');
          }, function (error) {
              console.log('error');
          });
      } catch (error) {}
      try {
          define('main', ['../../libs/js/main.js'], function () {
              console.log('ok');
          }, function (error) {
              console.log('error');
          });
      } catch (error) {}
  </code></pre>
  
  <p>If I don't use optimization option in libs webpack conf, requirejs works fine but if use optimization requirejs return undefined :/.</p>
  
  <p>Similar questions:<br>
  <a href="https://stackoverflow.com/questions/59684261/how-to-config-webpack-librarytarget-splitchunks-to-import-chunks-in-another">How to config webpack - libraryTarget + splitChunks to import chunks in another project</a><br>
  <a href="https://stackoverflow.com/questions/55413594/dynamic-module-import-with-its-own-chunk-dependencies">Dynamic Module Import with its own chunk dependencies</a><br>
  <a href="https://stackoverflow.com/questions/48645670/importing-loading-library-with-chunks">Importing/loading library with chunks</a></p>