Question

在使用webpack构建后，我收到了Uncaught SyntaxError：意外的令牌错误。我能够运行启动，它将以这种方式加载。所以我知道这一定是输出的问题，或者我可以想象。

index.html和bundle.js都正确生成。我将其作为index.html文件上的路径。我正在使用webpack 4，并具有以下webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports ={
    entry: './src/index.js',
    output: {
        path: path.join(__dirname, 'build'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                loader: 'babel-loader',
                test: /\.js$/,
                exclude: /node_modules/
            }
        ]
    },
    devServer: {
        host: 'localhost',
        port: '8080'
      },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),

    ]
}

我的.babelrc

    {
        "presets": [
          "@babel/preset-env",
          "@babel/preset-react"
        ],
        "plugins": [
            "@babel/plugin-proposal-class-properties"
        ]
      }

Index.html
<!DOCTYPE html>
<html>
<head>
        <title>Expensify</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">


</head>
<body>
    <div id="src"></div>
    <script type="text/javascript" src="bundle.js"></script></body>
  </body>
</html>

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { createStore, compose, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';

import reducer from './store/reducers/auth';

const composeEnhances = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose

const store = createStore(reducer, composeEnhances(
    applyMiddleware(thunk)
));

const app = (
    <Provider store={store}>
        <App />
    </Provider>
)

ReactDOM.render(app, document.getElementById('src'));

Packages.json

{
  "name": "reactboilerplate",
  "version": "1.0.0",
  "description": "React Webpack Redux Babel Boilerplate",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --mode development --open --hot",
    "build": "webpack --mode production"
  },
  "author": "Thomas Baric",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.2.2",
    "@babel/plugin-proposal-class-properties": "^7.3.0",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "@material-ui/core": "^3.9.2",
    "@material-ui/icons": "^3.0.2",
    "axios": "^0.18.0",
    "babel-cli": "^6.26.0",
    "babel-loader": "^8.0.5",
    "babel-plugin-lodash": "^3.3.4",
    "babel-plugin-react-transform": "^3.0.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "dateformat": "^3.0.3",
    "g": "^2.0.1",
    "help": "^3.0.2",
    "react": "^16.8.1",
    "react-dom": "^16.8.1",
    "react-redux": "^6.0.0",
    "react-router-dom": "^4.3.1",
    "react-slick": "^0.23.2",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0",
    "webpack": "^4.29.3",
    "webpack-cli": "^3.2.3"
  },
  "devDependencies": {
    "html-webpack-plugin": "^3.2.0",
    "webpack-dev-server": "^3.1.14"
  }
}

Answer 1

对于那些想知道这是关于静态文件的Django后端问题的人。这是我正在工作的webpack和babel。这在heroku上确实有效。 https://djreactboilertest.herokuapp.com

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports ={
    entry: './src/index.js',
    output: {
        path: path.join(__dirname, 'build', 'static'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                use: {loader: 'babel-loader'},
                test: /\.js$/,
                exclude: /node_modules/
            }
        ]
    },
    devServer: {
        host: 'localhost',
        port: '8080'
      },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),

    ]
}

{
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ],
    "plugins": [
      "transform-class-properties",
      ["transform-object-rest-spread", { "useBuiltIns": true }]

    ]
  }

webpack 4 react build导致令牌错误，但运行开始工作

1 个答案: