Question

我试图生成bundle.js但webpack不起作用。

这是我遇到的错误：

C:\Users\myname\Documents\lynda\ECMAScript6\Ch02\02_02\youtube2>webpack
Invalid configuration object. Webpack has been initialised using a configuration
 object that does not match the API schema.
 - configuration.module has an unknown property 'loaders'. These properties are
valid:
   object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exp
rContextRequest?, noParse?, rules?, defaultRules?, unknownContextCritical?, unkn
ownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache
?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp?, str
ictExportPresence?, strictThisContextOnImports? }
   -> Options affecting the normal modules (`NormalModuleFactory`).
 - configuration.output.path: The provided value "dist" is not an absolute path!

   -> The output directory as **absolute path** (required).

这是我的congif文件：

module.exports = {

  entry: './src/script.js',

  output: {
    path: 'dist',
    filename: 'bundle.js'
  },

  module: {
    loaders:[
      {
        test: /\js$/,
        exclude: /{node_modules}/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015']
        }
      }
    ]
  }


};

我一直在关注有关babel-loader的许多教程，但每次我遇到这种类型的错误并且都无法工作。

Answer 1

请尝试以下操作：

module.exports = {

  entry: './src/script.js',

  output: {
    path: './dist',
    filename: 'bundle.js'
  },

 module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['es2015']
        }
      }
    }
  ]
}


};

我已将路径属性更改为./dist＆amp;＆amp; module.rules是一个有效值而不是module.loaders。对于配置加载器部分，我参考了以下关于babel-loader的git文档： See Usage Section

Answer 2

前一段时间，webpack改变了配置格式。我建议不要使用es2015，而是将.babelrc文件添加到root并切换到babel-preset-env。

const path = require("path");
const distPath = `${__dirname}${path.sep}dist`;

module.exports = {
  entry: './src/script.js',
  output: {
    path: distPath,
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [
                'babel-preset-env'
              ]
            }
          }
        ]
      }
    ]
  }
};

Webpack不起作用（bundle.js）

2 个答案: