如何解决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 (另请参阅Concepts - Loaders)下的这些选项中配置加载器。在您的例子中，您需要使用带有babel-preset-react的babel-loader才能转换JSX语法，预设应该已经在您正在使用的.babelrc配置中。您只需将加载器添加到just文件中的选项中，以便通过该加载器传递.js和.jsx文件(使用与您链接的项目中相同的rule )：

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

您可以定义一个webpack.config.js，然后只需请求它并将其传递给webpackStream，而不是在just文件中定义选项。当你直接使用webpack (没有Gulp)时，会自动使用这个文件，所以如果你想在Gulp之外运行它，拥有这个配置是非常方便的。熟悉一下webpack是个好主意。一个很好的起点是官方文档的Core Concepts。

通常会导出一个对象，您可以在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 })。您可能不想完全使用该配置，而是使用您自己的配置，您可以将其导出为纯对象，因此不需要调用函数。