javascript - 使用 Webpack 3 捆绑多个单独的脚本

Question

我有几个用 ES6 编写的 js 脚本，需要将其转换为 ES5，以便在不支持的浏览器(Edge、Firefox 等)中进行测试。

我正在尝试配置 webpack 将这些脚本转换为 dist文件夹。这是我的webpack.config.js (我将我的 Sass 配置包含在完整文档中):

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'],
         },
      }]
   },
}];

但是，似乎什么也没发生。

我尝试使用 <script src="dist/form.js"></script> 引用“转译”脚本但因为它没有正确转译(或其他一些错误)，我在控制台中收到以下内容:

我不确定我错过了什么。也许我没有合适的装载机？我正在使用 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 有问题.

Answer 1

我已经找到了问题的答案。它位于entry points的路上声明:

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]