-3

Package.json这是我的包 json 文件。我已经在我的应用程序中安装了 npm install --save-dev babel-loader babel-core /* Package.json*/

    {
    "name": "tripdetail",
    "version": "1.0.0",
    "main": "index.js",
    "scripts": {
        "dev": "webpack-dev-server",
        "prod": "webpack -p"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "babel": "^6.23.0",
        "babel-cli": "^6.24.1",
        "babel-core": "^6.25.0",
        "babel-loader": "^7.1.1",
        "babel-preset-env": "^1.6.0",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-react": "^6.24.1",
        "css-loader": "^0.28.4",
        "extract-text-webpack-plugin": "^3.0.0",
        "html-webpack-plugin": "^2.30.1",
        "node-sass": "^4.5.3",
        "react": "^15.6.1",
        "react-dom": "^15.6.1",
        "sass-loader": "^6.0.6",
        "style-loader": "^0.18.2",
        "webpack": "^3.5.4",
        "webpack-dev-server": "^2.7.1"
    },
    "dependencies": {
        "eslint": "^4.4.1"
    },
    "description": ""
}

.babelrc这是我的 babelrc 文件。我也通过这段代码配置了它 - /*.babelrc */

{
        "presets": ["es2015", "es2016", "react"]
    }

webpack.config.js这是我的 webpack 配置 js 文件。我也配置了模块并进行了测试，但它不起作用。

/webconfig.js代码/

    'use strict';
var HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
var path = require('path');
module.exports = {
    entry: './src/app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.bundle.js'
    },
    module: {
        rules: [{
            test: /\.scss$/,
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: ["css-loader", "sass-loader"],
                publicPath: '/dist',
            },
            {
                test: /\.jsx?$/,
                exclude:  /(node_modules|bower_components)/,
                loader: 'babel',
                query: {
                    presets: ['react', 'es2015']
                }
            }           
        )
        }]
    },
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 9000,
        stats: 'errors-only',
        open: true

    },
    plugins: [new HtmlWebpackPlugin({
        title: 'tripDetailPage',
        hash: true,
        minify: {
            collapseWhitespace: false

        },
        template: './src/index.html'
    }), new ExtractTextPlugin({
        filename: "tripDetail.css",
        disable: false,
        allChunks: true
    })]
}

应用程序.js

const css = require('./app.scss');


    import React from 'react';
    import ReactDOM from 'react-dom';
    ReactDOM.render(
       <div>Hello</div>,
     //e('div', null, 'Hello Worlddddd'),
      document.getElementById('root')
    );

编译错误

ERROR in ./src/app.js
Module parse failed: E:\trip-react\src\app.js Unexpected token (10:3)
You may need an appropriate loader to handle this file type.
|
| ReactDOM.render(
|    <div>Hello</div>,
|  //e('div', null, 'Hello Worlddddd'),
|   document.getElementById('root')
 @ multi (webpack)-dev-server/client?http://localhost:9000 ./src/app.js
webpack: Failed to compile.
4

2 回答 2

0

此错误与webpack.config.js相关。规则被错误地放入此文件中。这是我正确的网络配置。

'use strict';
var HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
var CleanWebpackPlugin = require('clean-webpack-plugin');
var path = require('path');
module.exports = {
    entry: './src/app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.bundle.js'
    },
    resolve: {
     extensions: ['.js', '.jsx']
    },
    module: {
        rules: [{
            test: /\.scss$/,
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: ["css-loader", "sass-loader"],
                publicPath: '/dist',
            })
            },
            {
            test:/\.js$/,
            use:'babel-loader',
            exclude:/node_modules/
            },
            {
                test:/\.jsx$/,
                use:'babel-loader',
                exclude:/node_modules/
            }
            ]
    },
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 9000,
        stats: 'errors-only',
        open: true

    },
    plugins: [new HtmlWebpackPlugin({
        title: 'tripDetailPage',
        hash: true,
        minify: {
            collapseWhitespace: false

        },
        template: './src/index.html'
    }), new ExtractTextPlugin({
        filename: "tripDetail.css",
        disable: false,
        allChunks: true
    }),]
}
于 2017-08-17T12:09:04.490 回答
0

./src/app.js 中的错误

您是否尝试过将该文件重命名为 /src/app.jsx ？

查看 webpack.config.js 文件中的 resolve.extensions 和 module.loaders——两者都应该引用 .jsx 文件。

于 2017-08-16T10:48:19.293 回答