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-loader babel-preset-react能够转换JSX语法，预设应该已经在您正在使用的.babelrc配置中。您只需要将加载器添加到Gulpfile中的选项中，以便您的.js和.jsx文件通过该加载器传递（使用与您链接的项目相同的rule）：

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

您可以定义webpack.config.js，然后只需要它并将其传递给webpackStream，而不是在Gulpfile中定义选项。当你直接使用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 })。您可能不想完全使用该配置但使用您自己的配置，您可以将其作为普通对象导出，因此您不需要调用函数。

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

1 个答案: