Webpack抛出意外的令牌错误

Question

Web pack在我的react组件中引发以下错误，我不确定是什么错误。 webpack.config文件也被添加`import React，{Component} from'react'import'./Banner.css'

class Banner extends Component {
    constructor(props){

        super(props)
    }
    render(){
        return(
            <p>
                 What are you doing
            </p>
        );
    }
}
export default Banner;`

错误如下：
ERROR in ./src/components/Banner.js Module parse failed: /Users/allenord/Documents/Developer/PersonalPage/src/components/Banner.js Unexpected token (13:8) You may need an appropriate loader to handle this file type. | render(){ | return( | <p> | What are you doing | </p> @ ./src/app/index.jsx 11:14-48 @ multi (webpack)-dev-server/client?http://localhost:3000 ./src/app/index.jsx

webpack.config

var config = {
   entry: APP_DIR + '/index.jsx',
   output: {
   path: BUILD_DIR,
   filename: 'bundle.js'
},
module : {
loaders : [
  {
    test : /\.jsx?/,
    include : APP_DIR,
    loader : 'babel-loader'
  },
  {
    include:'/src',
    test    : /\.scss$/,
    loaders : [
      'style-loader',
      'css-loader?sourceMap&-minimize',
      'postcss',
      'sass?sourceMap'
    ]
  },
  {
    include:'/src',
    test    : /\.css$/,
    loaders : [
      'style-loader',
      'css-loader?sourceMap&-minimize'
    ]
  }
]
},

Answer 1

您需要添加Webpack加载程序，以便能够导入非JS的任何内容。 在您的情况下，您需要一个CSS加载器来使行import './Banner.css'起作用。

更多信息： https : //webpack.js.org/loaders/#styling