Question

我正在创建一个javascript项目。要创造它，我使用gulp和babel。我的问题是我无法在多个文件上开发代码，所以我要搜索一个解决方案来启用＆＃39;输入。目前我正在尝试配置webpack。

Gulp任务是这样的：

gulp.task('webpack', () => {
return webpack_stream(webpack_config)
    .pipe(rename('webpack_code.js'))
    .pipe(gulp.dest('.build/asset/webpack/'));
});

webpack.config.js是这样的：

module.exports = {
  entry: ['./src/asset/js/main.js'],
  output: {
    filename: 'bundle.js',
  },
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.(js)$/,
        exclude: /(node_modules)/,
        loader: 'babel-loader',
        query: {
          presets: [
            ['env', 'stage-0',{ modules: false }],
          ],
        },
      },
    ],
  },
  resolveLoader: {
    modules: ['./node_modules'],
},
resolve: {
    modules: ['./node_modules'],
},
  target: 'node',
};

我目前的错误是：

Error in plugin 'webpack-stream'
Message:
    multi ./src/asset/js/main.js
Module not found: Error: Can't resolve 'babel-loader' in ...

出了什么问题？
另一个问题：我必须把什么作为入门钥匙的价值？只有入口点js文件或项目的整个文件？
谢谢！

Answer 1

What's wrong?

我猜在您的项目中，由于您的配置/环境特定问题，您的 Webpack 实例没有找到 babel 加载器。

我遇到了和你完全一样的问题。以下是一些需要先检查的故障排除步骤：

查看是否实际安装了 babel-loader。我知道这很简单，但它可以节省您的时间。
检查您在 package.json 文件中处理的 Webpack/Babel 版本。我正在使用 Webpack 4 和 Babel 8。听起来有些较新的版本不接受这个：use: 'babel' 在您的 webpack.config 文件中。您需要确保按如下方式使用 -loader：use: 'babel-loader'。
重新安装您的 node_modules 文件夹。有时会奏效。

Another Question: 
What's I have to put as value of entry key? 
Only the entry point js file or the whole files of the project?

根据 Webpack 的文档： 入口对象是 webpack 开始构建包的地方。上下文是包含条目文件的目录的绝对字符串。 - Webpack Ref

考虑到这一点，您应该将文件夹或文件的路径传递给入口对象，这些路径或文件将用于生成包含所有模块的最终 JS 文件。

如果您有嵌套文件，并且不作为模块导入，我认为您必须前往文档并查看此特定案例。

但是如果这些文件是嵌套的并且作为模块导入，在您的入口文件/文件夹中，它们将在输出文件中生成。

我知道这并不多，但是按照这些步骤，帮助我解决了它。 :)

javascript + gulp + babel + webpack。错误：找不到模块：错误：无法解决＆＃39; babel-loader＆＃39;

1 个答案: