如何解決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 })。你可能不想使用完全的配置，而是使用你自己的配置，你可以直接導出爲一個普通的對象，所以你不需要調用一個函數。