2017-02-12 66 views
0

我做與創造 - 反應 - 應用程序和的WebPack 2樣本教程,但我收到此錯誤:react.js和的WebPack 2,需要一個解決方案

enter image description here

這是我的包。 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')); 
+0

您正在運行作出反應的節點,但你必須運行在瀏覽器的代碼。 – Frxstrem

+0

您需要在節點中使用Webpack構建包,然後在瀏覽器中查看應用程序。在控制檯上,您需要運行Webpack命令來構建並運行Webpack dev服務器。 –

+0

運行webpack命令 –

回答

1

create-react-app是爲webpack 1編寫的。您已更新爲僅在一個月前纔出現的webpack 2。有一些語法更改會破壞版本1的webpack.config.js文件。這裏是一個遷移指南:

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

0

如果你還沒有找到一個我覺得this是相當不錯的