如何解决webpack2错误：您可能需要一个合适的加载器来处理这种文件类型？

Question

我想将我的reactjs / webpack / gulp应用程序转换为webpack2。 我使用此项目中的webpackconfig + .babelrc文件和package.json作为起点：

https://github.com/ModusCreateOrg/budgeting-sample-app-webpack2

这是gulpcode：

var gulp = require('gulp');
var webpackStream = require('webpack-stream');
var webpack2 = require('webpack');

gulp.task('default', function() {
  return gulp.src('app/app.js')
    .pipe(webpackStream({/* options */}, webpack2))
    .pipe(gulp.dest('dist/'));
});

当我运行'gulp'时，我收到此错误：

stream.js:74
      throw er; // Unhandled stream error in pipe.
      ^
 Error: ./app/app.js
Module parse failed: C:\myapp\app\app.js Unexpected token (11:4)
You may need an appropriate loader to handle this file type.
|
| ReactDOM.render(
|     <Provider>
|         <App />
|     </Provider>,

我需要哪个加载器以及在哪里配置它？

Answer 1

你实际上并没有使用webpack.config.js所以你可能正在配置Gulpfile中的选项。 但是您将选项评论为/* options */这是重要的一点，您实际配置webpack。

您可以在module.rules下的这些选项中配置加载module.rules （另请参阅概念 -加载器）。 在你的情况下你需要babel-loader与babel-preset-react能够转换JSX语法，预设应该已经在你正在使用的.babelrc配置中。 您只需要将加载器添加到Gulpfile中的选项中，以便您的.js和.jsx文件通过该加载器传递（使用与您链接的项目中相同的规则 ）：

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

您可以定义webpack.config.js ，然后只需要它并将其传递给webpackStream而不是在Gulpfile中定义选项。 当您直接使用webpack（没有Gulp）时会自动使用此文件，因此如果您想在Gulp之外运行它，则可以非常方便地使用该配置。 熟悉webpack是个好主意。 一个很好的起点是官方文档的核心概念 。

通常会导出一个对象，您可以直接在webpackStream使用该webpackStream ，但在您链接的项目中，它会导出一个函数，该函数根据所使用的环境返回配置对象。 要在Gulpfile中直接使用它，您将执行以下操作：

var gulp = require('gulp');
var webpackStream = require('webpack-stream');
var config = require('./webpack.config');

gulp.task('default', function() {
  return gulp.src('app/app.js')
   .pipe(webpackStream(config()))
   .pipe(gulp.dest('dist/'));
});

config()返回开发选项并获取生成配置，您需要调用config({ prod: true }) 。 您可能不想完全使用该配置但使用您自己的配置，您只能将其导出为普通对象，因此您无需调用函数。