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取代module.loaders中的WebPack 2 ，所以不使用有可能是通过提供的WebPack module.loaders （这是有向后兼容）在所有-尝试移动你目前拥有的规则module.loaders成module.rules 。

编辑：偷看Webpack的NormalModuleFactory当前版本中， 这是在做什么 ：

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