javascript - “You may need an appropriate loader to handle this file type” 与 Webpack 和 Babel

Question

我正在从神秘版本的 webpack 升级到 webpack 2，但出现错误:

ERROR in ./scripts/app.js
Module parse failed: /Users/zackshapiro/dev/glimpse-electron/node_modules/eslint-loader/index.js!/Users/zackshapiro/dev/glimpse-electron/scripts/app.js Unexpected token (32:4)
You may need an appropriate loader to handle this file type.
|
| render((
|     <Provider store={store}>
|         <Home />
|     </Provider>
 @ multi (webpack)-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./scripts/app.js

我的 webpack.config.js 看起来像这样:

const webpack = require('webpack');
const path = require('path');

console.log(path.resolve(__dirname, 'public/built'));
console.log("we here");

module.exports = {
  entry: {
    app: ['webpack/hot/dev-server', './scripts/app.js']
  },

  output: {
    // path: './public/built',
    path: path.resolve(__dirname, 'public/built'),
    filename: 'bundle.js',
    publicPath: 'http://localhost:8080/built/'
  },

  devServer: {
    contentBase: './public',
    publicPath: 'http://localhost:8080/built/'
  },

  module: {
    rules: [
        {
            test: /\.jsx?$/,
            enforce: "pre",
            loader: "eslint-loader",
            exclude: /node_modules/
        },
    ],
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['react', 'es2015', 'stage-3']
        }
      },
      { test: /\.css$/, loader: 'style-loader!css-loader' },
      { test: /\.scss$/, loader: 'style-loader!css-loader!sass-loader'},
      { test: /\.(ttf|eot|otf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }
    ]
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.IgnorePlugin(new RegExp("^(fs|ipc)$")),
    new webpack.LoaderOptionsPlugin({
        options: {
            eslint: {
                failOnWarning: false,
                failOnError: true
            }
        }
    })
  ]
}

我的 app.js 看起来像这样:

require('../styles/main.scss');
require('../styles/menubar.scss');
require('../styles/panel.scss');
require('../styles/sky.scss');
require('../styles/dock.scss');
require('../styles/sector.scss');
require('../styles/slot.scss');
require('../styles/element_builder.scss');

'use strict';

import 'babel-polyfill';
import React from 'react';
import {render} from 'react-dom';
import {Provider} from 'react-redux';
import {compose, createStore, applyMiddleware} from 'redux';
import createSagaMiddleware from 'redux-saga';

import reducer from './entities/reducers';
import sagas from './entities/sagas';

import Home from './containers/home';

const sagaMiddleware = createSagaMiddleware();

const composedCreateStore = compose(applyMiddleware(sagaMiddleware))(createStore);

const store = composedCreateStore(reducer, {});
sagaMiddleware.run(sagas);

render((
    <Provider store={store}>
        <Home />
    </Provider>
), document.getElementById('content'));

我的根目录中没有 .babelrc 文件，因为我在 webpack.config.js 的 loaders 中有那个对象>

我们非常欢迎任何有关如何解决此问题的建议。谢谢!

Answer 1

module.rules replaces module.loaders in Webpack 2 , 所以有可能通过提供 Webpack 根本不使用 module.loaders (这是为了向后兼容) - 尝试移动你目前在 module.loaders 改为 module.rules。

编辑:查看当前版本的 Webpack 的 NormalModuleFactory，this is what it's doing :

this.ruleSet = new RuleSet(options.rules || options.loaders);