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]

与Webpack 3捆绑多个单独的脚本

1 个答案: