javascript - React.js 和 webpack 2,需要一个解决方案

标签 javascript node.js reactjs webpack-2

我正在使用 create-react-app 和 webpack 2 制作示例教程,但收到此错误:

enter image description here

这是我的 package.json:

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-preset-latest-minimal": "^1.1.2",
    "babel-preset-react": "^6.22.0",
    "css-loader": "^0.26.1",
    "html-loader": "^0.4.4",
    "json-loader": "^0.5.4",
    "node-sass": "^4.5.0",
    "raw-loader": "^0.5.1",
    "react-scripts": "0.8.5",
    "sass-loader": "^5.0.1",
    "style-loader": "^0.13.1",
    "svgo-loader": "^1.1.2",
    "webpack": "^2.2.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "dependencies": {
    "file-loader": "^0.10.0",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-router": "^3.0.2"
  }
}

我的 webpack.config.js:

module.exports = {
  context: __dirname,
  entry: {
    app: '../src/index.jsx', 

  },
  output: {
    path: './build',
    filename: 'app.js',
  },
  module: {
    loaders: [{
    test: /\.html$/,
    loader: 'html-loader',
    query: {
      minimize: true
    }
  },{
      test: /(\.jsx?)$/,
      loader: 'babel-loader',
      exclude: /(node_modules)/,
      query: {
        presets: ['latest-minimal', 'react'],
      }
    }, {
      test: /\.css$/,
      exclude: /(node_modules)/,
      use: ['style-loader', 'css-loader']
    },{
      test: /\.svg$/,
      use: [{
        loader: 'file-loader'
      }, {
        loader: 'svgo-loader',
        options: {
          plugins: [{
            removeTitle: true
          }, {
            convertColors: {
              shorthex: false
            }
          }, {
            convertPathData: false
          }]
        }
      }]
    }]
  }
}

还有我的index.jsx:

import React, { Component } from 'react';
import { render } from 'react-dom';

import App from './App.jsx';

render(<App />, document.getElementByClass('App'));

最佳答案

create-react-app 是为 webpack 1 编写的。您已更新到一个月前才发布的 webpack 2。有一些语法更改会破坏版本 1 webpack.config.js 文件。这是迁移指南:

https://webpack.js.org/guides/migrating/

关于javascript - React.js 和 webpack 2,需要一个解决方案,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42184819/

相关文章:

javascript - 如何将所需的元素绑定(bind)到一个div中?

javascript - 从mapbox API获取geoJSON数据以确定多边形中的点

javascript - ExpressJS - 重复键错误集合

javascript - 有没有办法在浏览器选项卡之间共享套接字连接

javascript - socket.io 和 vue.js 获取数据

reactjs - 在react-select中自定义 `No data found`验证消息

javascript - 未捕获的 TypeError : (0 , _jquery2.default)(...).sortable 不是函数

javascript - 如何动态设置按钮id并绑定(bind)点击事件?

javascript - 如何在刷新时开始编号

reactjs - 如何修复 react 中的 "Uncaught Error: Invariant failed"react-router-dom 错误