如何解决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/')); 
}); 

当我运行“吞掉”我得到这个错误：

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' 
     ], 
    } 
    ] 
} 

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