Reactjs 网页包不'；无法正确加载我的文件

我对webpack完全陌生，我正在为一个新项目进行第一次配置

我正在尝试加载我的jsx/scss文件，但遇到以下问题：

var path = require('path');
var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
var node_modules_dir = path.resolve(__dirname, 'node_modules');

var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');

var cssExtractTextPlugin = new ExtractTextPlugin("css", "index.css");

var staticPrefix = path.join(__dirname, 'src')
var distPath = path.join(__dirname, 'dist')

module.exports = {
  devtool: 'eval',
  //context: path.join(__dirname, staticPrefix),
  entry: {
    'app': ['webpack-hot-middleware/client', path.join(__dirname, 'src/app.jsx')],
    'vendor': [
      'bootstrap/js/dropdown',
      'bootstrap/js/tab',
      'bootstrap/js/tooltip',
      'bootstrap/js/alert',
      'jquery',
      'react-router',
      'react-bootstrap'
    ],
    'myapp': path.join(__dirname, 'src/stylesheets/base.scss') //'stylesheets/base.scss'
  },
  output: {
    path: distPath,
    filename: '[name].js',
    libraryTarget: 'var',
    library: 'exports',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js'),
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
      'root.jQuery': 'jquery'
    }),
    new ExtractTextPlugin('[name].css')
  ],
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: ['babel'],
        include: path.join(__dirname, staticPrefix),
        exclude: /(vendor|node_modules)/
      },
      {
        test: /\.jsx$/,
        loader: ['babel'],
        include: path.join(__dirname, staticPrefix),
        exclude: /(vendor|node_modules)/
      },
      {
        test: /\.scss$/,
        include: path.join(__dirname, staticPrefix),
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader-loader')
      },
      {
        test: /\.(woff|woff2|ttf|eot|svg|png|gif|ico|jpg)($|\?)/,
        loader: 'file-loader?name=' + '[name].[ext]'
      }
    ]
  },
  postcss: function() {
    return [autoprefixer];
  },
  resolve: {
    modulesDirectories: [path.join(__dirname, staticPrefix), 'node_modules'],
    extensions: ['', '.jsx', '.js']
  },
};

问题是，当我运行node_modules/.bin/webpack--config=webpack.config.dev时，它会给我两个错误：

ERROR in ./src/app.jsx
Module parse failed: /Users/work/Desktop/myapp-client/src/app.jsx Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import React from 'react';
| console.log('hello!’);
| 
 @ multi app

ERROR in ./src/stylesheets/base.scss
Module parse failed: /Users/work/Desktop/myapp-client/src/stylesheets/base.scss Line 1: Unexpected token {
You may need an appropriate loader to handle this file type.
| body {
|   background: black;
| }

---

我哪里做错了？

对于

babel 6

您需要包括babel

react

预设以传输您的

.jsx

文件。您还需要将babel

es2015

预设添加到Transfile es2015，即ES6，语法：

module: {
  loaders: [
    {
      test: /\.jsx?$/,
      exclude: /(node_modules)/,
      loader: 'babel',
      query: {
        presets:[ 'react', 'es2015' ]
      }
    }
  ]
}

另一方面，如果在

test

键中调整正则表达式，则不需要两个加载器条目（用于

.js

和

.jsx

文件）

确保单独安装这些预设：

npm i -D babel-preset-es2015 babel-preset-react

---

有关

babel 6

更改的更多信息，请参见

babel preset react和&babel-preset-es2015安装了
吗？有很多类似的问题。将有助于youTried，但不起作用…您可以添加一个
package.json
文件吗？确保
loader
应该是字符串，
loaders
应该是数组。不知道这是否有帮助。