Bundle multiple separate scripts with Webpack 3

Question

I have several js scripts written in ES6 that I need to transpile to ES5 for testing in non-supporting browsers (Edge, Firefox, etc..).

I'm trying to configure webpack to transpile these scripts into a dist folder. Here's my webpack.config.js (I'm including my Sass configs for full documentation):

const autoprefixer = require('autoprefixer');
const path = require('path');

module.exports = [{
   entry: [
      './src/scss/index.scss',
      './src/scss/form.scss',
      './src/scripts/init.js',
      './src/scripts/index.js',
      './src/scripts/form.js'
   ],
   output: {
      filename: '[name].js',
      path: path.resolve(__dirname, 'dist')
   },
   module: {
      rules: [{
         test: /\.scss$/,
         use: [
            {
               loader: 'file-loader',
               options: {
                  name: '[name].css',
               },
            },
            { loader: 'extract-loader' },
            { loader: 'css-loader' },
            {
               loader: 'postcss-loader',
               options: {
                  plugins: () => [autoprefixer()]
               }
            },
            {
               loader: 'sass-loader',
               options: {
                  includePaths: ['./node_modules']
               }
            },
         ]
      }, {
         test: /\.js$/,
         loader: 'babel-loader',
         query: {
            presets: ['es2015'],
         },
      }]
   },
}];

However, nothing appears to happen.

I try referencing the "transpiled" script with <script src="dist/form.js"></script> but because it's not transpiling correctly (or some other error), I get the following in the console:

I'm not sure what I'm missing. Perhaps I don't have the right loaders? I am running my code with webpack-dev-server and using Webpack v3.12.0. Here is the output in the console:

Project is running at http://localhost:8080/
webpack output is served from /
Hash: d63168580d2f497d0c2c
Version: webpack 3.12.0
Child
    Hash: d63168580d2f497d0c2c
    Time: 11110ms
        Asset     Size  Chunks                    Chunk Names
    index.css  26.7 kB          [emitted]
     form.css  4.86 kB          [emitted]
      main.js   558 kB       0  [emitted]  [big]  main
       [7] ./src/scripts/init.js 4.69 kB {0} [built]
      [10] ./node_modules/@material/ripple/index.js 16.8 kB {0} [built]
      [13] multi (webpack)-dev-server/client?http://localhost:8080 ./src/scss/in                                                       dex.scss ./src/scss/form.scss ./src/scripts/init.js ./src/scripts/index.js ./src                                                       /scripts/form.js 88 bytes {0} [built]
      [14] (webpack)-dev-server/client?http://localhost:8080 7.93 kB {0} [built]
      [15] ./node_modules/url/url.js 23.1 kB {0} [built]
      [22] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
      [24] ./node_modules/loglevel/lib/loglevel.js 8.67 kB {0} [built]
      [25] (webpack)-dev-server/client/socket.js 1.08 kB {0} [built]
      [27] (webpack)-dev-server/client/overlay.js 3.67 kB {0} [built]
      [36] ./src/scss/index.scss 55 bytes {0} [built]
      [37] ./src/scss/form.scss 54 bytes {0} [built]
      [38] ./src/scripts/index.js 756 bytes {0} [built]
      [39] ./node_modules/@material/top-app-bar/index.js 16.3 kB {0} [built]
      [45] ./src/scripts/form.js 6.74 kB {0} [built]
      [46] ./src/scripts/modules/form-calculation.js 7.68 kB {0} [built]
        + 32 hidden modules
webpack: Compiled successfully.

Obviously something is awry in my webpack.config.js.

Answer 1

I have found an answer to my problem. It lies in the way the entry points are declared:

entry: {
    init: './src/scripts/init.js',
    index: [
       './src/scripts/index.js',
       './src/scss/index.scss'
    ],
    form: [
       './src/scripts/form.js',
       './src/scss/form.scss'
    ]
 }

This has the desired output:

[Project is running at http://localhost:8080/
webpack output is served from /
Hash: 962997632d9d9ca67a56
Version: webpack 3.12.0
Child
    Hash: 962997632d9d9ca67a56
    Time: 10588ms
        Asset     Size  Chunks                    Chunk Names
    index.css  26.7 kB          \[emitted\]
     form.css  4.86 kB          \[emitted\]
     index.js   527 kB       0  \[emitted\]  \[big\]  index
      form.js   396 kB       1  \[emitted\]  \[big\]  form
      init.js   382 kB       2  \[emitted\]  \[big\]  init
       \[3\] (webpack)-dev-server/client?http://localhost:8080 7.93 kB {0} {1} {2} \[built\]
       \[4\] ./node_modules/url/url.js 23.1 kB {0} {1} {2} \[built\]
      \[14\] (webpack)-dev-server/client/socket.js 1.08 kB {0} {1} {2} \[built\]
      \[21\] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} {1} {2} \[built\]
      \[23\] (webpack)/hot/emitter.js 89 bytes {0} {1} {2} \[built\]
      \[27\] ./src/scripts/modules/indexedDB.js 11.8 kB {1} {2} \[built\]
      \[29\] ./src/scripts/init.js 4.69 kB {1} {2} \[built\]
      \[35\] multi (webpack)-dev-server/client?http://localhost:8080 ./src/scripts/init.js 40 bytes {2} \[built\]
      \[36\] multi (webpack)-dev-server/client?http://localhost:8080 ./src/scripts/index.js ./src/scss/index.scss 52 bytes {0} \[built\]
      \[37\] ./src/scripts/index.js 756 bytes {0} \[built\]
      \[44\] ./src/scss/index.scss 55 bytes {0} \[built\]
      \[45\] multi (webpack)-dev-server/client?http://localhost:8080 ./src/scripts/form.js ./src/scss/form.scss 52 bytes {1} \[built\]
      \[46\] ./src/scripts/form.js 6.74 kB {1} \[built\]
      \[47\] ./src/scripts/modules/form-calculation.js 7.68 kB {1} \[built\]
      \[48\] ./src/scss/form.scss 54 bytes {1} \[built\]
        + 34 hidden modules
webpack: Compiled successfully.][1]