Create Es6 Module 'equivalent' Using Webpack Output.target Options

Firstly, apologies! I struggled summing up the issue in the title so please feel free to amend. The problem Suppose I have two ES6 files that expose default functions // file_1.js

Solution 1:

I think I have a solution ;)

// file_1.jsexportdefaultfunctionfile1(){ console.log('file_1') }

// file_2.jsexportdefaultfunctionfile2(){ console.log('file_2') }

The webpack.config.js should look like this

entry: {
  file1: './sources/js/file_1.js',
  file2: './sources/js/file_2.js',
},
output: {
  path: path.resolve(__dirname, 'dist'),
  filename: './[name].js',
  library: '[name]',
  libraryExport: 'default',
  libraryTarget: 'umd', // you can use libraries everywhere, e.g requirejs, node 
  umdNamedDefine: true,
},

From now you have access to:

<script>newfile1(); // console.log show file_2newfile2(); // console.log show file_2</script>

You can also now pass options to functions. Take a look at my solution