如何解決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 }) 。 您可能不想完全使用該配置但使用您自己的配置，您只能將其導出為普通對象，因此您無需調用函數。