Javascript 将多个单独的脚本与Webpack 3捆绑在一起

我有几个用ES6编写的js脚本，需要传输到ES5，以便在不支持的浏览器（Edge、Firefox等）中进行测试

我正在尝试将webpack配置为将这些脚本传输到

dist

文件夹中。这是我的

webpack.config.js

（我包括我的Sass配置以获取完整文档）：

然而，似乎什么也没有发生

我尝试使用

引用“transpiled”脚本，但由于它没有正确地进行传输（或出现其他错误），我在控制台中得到以下信息：

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.

我不确定我错过了什么。也许我没有合适的装载机？我正在使用

webpack dev server

和webpack v3.12.0运行代码。以下是控制台中的输出：

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.

---

很明显，我的

webpack.config.js中有些地方出了问题，我已经找到了问题的答案。这取决于声明的方式：

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

这具有所需的输出：

[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]

我已经找到了我问题的答案。这取决于声明的方式：

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

这具有所需的输出：

[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]

我刚刚发现我所有的脚本都被捆绑到
main.js
，我可以用
标签导入，但这不是我想要的。我希望为每个
.js
文件创建不同的输出。我刚刚发现我所有的脚本都被捆绑到
main.js
，我可以用
标记导入，但这不是我想要的。我希望为每个
.js
文件创建不同的输出。