msyz188明仕亚洲官方网站webpack & babel 打包react项目错误

this is Error:

ERROR in ./app/main.jsx
Module parse failed: /home/liudong/Public/proj/Homepage/app/main.jsx Unexpected token 8:7
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token 8:7
    at Parser.pp$4.raise /home/liudong/Public/proj/Homepage/node_modules/acorn/dist/acorn.js:2221:15
    at Parser.pp.unexpected /home/liudong/Public/proj/Homepage/node_modules/acorn/dist/acorn.js:603:10
    at Parser.pp$3.parseExprAtom /home/liudong/Public/proj/Homepage/node_modules/acorn/dist/acorn.js:1822:12

package.json中

"dependencies": {
    "react": "^15.4.0-rc.4",
    "react-dom": "^15.4.0-rc.4",
    "react-router": "^2.8.1"
  },
  "devDependencies": {
    "babel-core": "^6.17.0",
    "babel-loader": "^6.2.5",
    "babel-preset-es2015": "^6.16.0",
    "babel-preset-react": "^6.16.0",
    "css-loader": "^0.25.0",
    "json-loader": "^0.5.4",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.16.2"
  }

webpack.config.js 中:

module.exports = {
    devtool: eval-source-map,
    entry : __dirname + /app/main.jsx,
    output: {
        path: __dirname + /public,
        filename: [name]-[hash].js
    },
     resolve: {
        extensions: [, .js, .jsx]
    },
    moudle: {
        loaders:[
            {
                test: /\.json$/,
                loader:"json"
            },
            {
                test: /\.jsx?$/,
                exclude:/node_modules/,
                loader:babel,
                query: {
                    presets: [es2015, react]
                }
            },
            {
                test: /\.css$/,
                loader: style!css?modules
            }
        
        ]
    }
}

main.js//

//main.jsx
import React from react
import {render} from react-dom
import Greeter from ./Greeter.jsx

import ./main.css

render<Greeter />, document.getElementByIdcontainer;//这里为什么会有题目?

//Greeter.jsx

import React, {Component} from react
import config from ./config.json


class Greeter extends Component {
    render {
        return 
            <div>
                {config.greetText}
            </div>
        
    }
}

export default Greeter 

要打逝世,webpack.config.json 用 js 语法?另有那个教程里边说要把 js 配置 改成 json 配置的。。。

留意你的webpack配置文件,应该是webpack.config.js,是nodejs的一个模块,前往json款式的配相信息东西,修正返来应该没什么大题目~~

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

这个中央 exclude:/node_modules/, 要改成 exclude: /node_modules/

RegExp 和 String 纷比方样。

好吧,真是抱歉,耽搁大家工夫,题目找到了。是webpack.config.json中的module单词拼写错误。。。真是太大意了。

(看完/读完)这篇文章有何感想! msyz188明仕亚洲官方网站的分享…

发表评论

姓名 *
电子邮件 *
站点