javascript Webpack错误包,js：1未捕获语法错误：意外标记〈

t2a7ltrp 于 2023-01-19 发布在 Java

关注(0)|答案(7)|浏览(181)

我运行服务器localhost并得到错误**bundle. js：1未捕获语法错误：意外标记〈**在输出bundle.js中是index.html文件的html代码。这是设置我的webpack.config文件。您能告诉我设置出了什么问题吗？

import path from 'path';
import webpack from 'webpack';

export default {
  devtool: 'eval-source-map',
  entry: [
    'webpack-hot-middleware/client',
    path.join(__dirname, '/client/index.js' )
    ],
  output: {
    path: '/',
    publicPath: '/'
  },
  plugins: [
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ],
  module: {
    loaders: [
      {
        test: /\.js$/,
        include: path.join(__dirname, 'client'),
        loaders: ['react-hot-loader', 'babel-loader' ]
      }
    ]
  },
  resolve: {
    extensions: ['.js']
  }    
}

- 索引. html**

<html>

 <head>
   <meta charset="UTF-8">
   <title>Site</title>
   <meta content="width=device-width, initial-scale=1" name="viewport" />
 </head>

 <body>
   <h1>Hello bla bla bla</h1>
   <div id="app"></div>

   <script src="bundle.js"></script>
 </body>

 </html>

- 服务器/索引. js**

import express from 'express';
import path from 'path';

import webpack from 'webpack';
import webpackMiddeleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';
import webpackConfig from '../webpack.config';

let app = express();

const compiler = webpack(webpackConfig);

app.use(webpackMiddeleware(compiler, {
  hot: true,
  publicPath: webpackConfig.output.publicPath,
  noInfo: true
}));
app.use(webpackHotMiddleware(compiler));

app.get('/*', (req, res)=>{
  res.sendFile(path.join(__dirname, './index.html'));
});

app.listen('3000', ()=>{console.log('Running on port 3000')});

- 客户端/索引. js**

import React from 'react';
import { render } from 'react-dom';
import App from './components/App';

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

- 组件/应用程序js**

import React from 'react';

class App extends React.Component {
  render(){
    return (
      <h1>Hello</h1>
    );
  }
}

export default App;

- 包. json：**

{
  "name": "xxxxx",
  "version": "1.0.0",
  "description": "xxxxxxxxxx",
  "main": "index.js",
  "scripts": {
    "server": "nodemon --watch server --exec babel-node -- server/index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "xxxxxxxxxxxxx"
  },
  "keywords": [
    "
  ],
  "author": "xxxxxxxxx",
  "license": "ISC",
  "bugs": {
    "url": "xxxxxxxxxxxxxxxxxxxxxxx"
  },
  "homepage": "xxxxxxxxxxxxxxxxxxxx",
  "dependencies": {
    "babel-cli": "^6.24.1",
    "express": "^4.15.3",
    "react": "^15.5.4",
    "react-dom": "^15.5.4"
  },
  "devDependencies": {
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "nodemon": "^1.11.0",
    "react-hot-loader": "^1.3.1",
    "webpack": "^2.6.1",
    "webpack-dev-middleware": "^1.10.2",
    "webpack-hot-middleware": "^2.18.0"
  }
}

.巴伯尔中心*

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

谢谢你。

JavaScript

来源：https://stackoverflow.com/questions/44541165/webpack-error-bundle-js1-uncaught-syntaxerror-unexpected-token

7条答案

按热度按时间

e5nszbig1#

你的script标签中的bundle.js src是错误的。它返回了你的主index.html，这就是为什么你会得到那个错误-JS解析器正在尝试解析一个HTML文件。
您必须在脚本src中添加一个斜杠：<script src="/bundle.js"></script>
如果这不起作用，你必须仔细检查你的output配置。

赞(0）回复(0）举报 2023-01-19

bmp9r5qi2#

最后，我将bundle.js文件的显式路径放在index.html中：
发件人：<script src="bundle.js"></script>
至：<script src="public/bundle.js"></script>

赞(0）回复(0）举报 2023-01-19

jhkqcmku3#

Webpack版本5.46.0.节点14.x中有一个可能的修复程序。我发布这个程序是希望帮助其他人，以防他们到了这个地步，仍然没有找到修复程序。因此，与许多其他问题沿着，一个可能性是，如果您正在使用html-webpack-plugin，其中publicPath属性需要在属性中显式设置，这与之前的webpack〈5版本的插件不同，它应该是从output/devServer继承属性的.在将属性添加到插件后，它可以在webpack 5中使用最新的html-webpack-plugin.
以下是相关配置。

module.exports = {
  mode: 'development',
entry: ['@babel/polyfill', './config/polyfills', './src/index.js'],
  output: {
    hotUpdateMainFilename: '[id].hot-update.[fullhash].json',
    hotUpdateChunkFilename: '[id].hot-update.[fullhash].js',
    path: resolve(__dirname, '..', 'dist'),
    filename: '[name].[fullhash].js',
  },
  optimization: {
    moduleIds: 'named',
  },
  devtool: 'eval-cheap-module-source-map',
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      hash: true,
      publicPath: '/yourPath',
      template: resolve(__dirname, '..', 'src', 'index.html'),
      alwaysWriteToDisk: true,
    }),
    new HtmlWebpackHarddiskPlugin({
      outputPath: resolve(__dirname, '..', 'dist'),
    }),
  ],
};

赞(0）回复(0）举报 2023-01-19

ilmyapht4#

您正在使用多个入口点，但没有设置输出。
https://github.com/webpack/docs/wiki/configuration#entry

赞(0）回复(0）举报 2023-01-19

vsnjm48y5#

解决方案：使用中间件“app.use（express.static（'./'））;“以提供静态资源文件”bundle.js“的位置。包含此修复的server/index.js的简化版本为：

import express from 'express';
import path from 'path';
const __dirname = path.resolve();

let app = express();

app.use(express.static('./'));

app.get('/*', (req, res)=>{
    res.sendFile(path.join(__dirname, './index.html'));
});

app.listen('3000', ()=>{console.log('Running on port 3000')});

我可以重现这个问题。我已经用你提供的文件和目录结构测试了修复程序。但是，我禁用了babel，并注解掉了webpack相关的内容。

赞(0）回复(0）举报 2023-01-19

z31licg06#

在我的场景主页中：<path>已发出
package.json

{
    "homepage":  '<path>',  // removed this removed
    .....
}

赞(0）回复(0）举报 2023-01-19

uyhoqukh7#

我通过向对象输出添加filename item解决了这个问题：

output: {
 path: '/',
 filename: 'bundle.js'
},

赞(0）回复(0）举报 2023-01-19

我来回答

javascript Webpack错误包,js：1未捕获语法错误：意外标记〈

7条答案

相关问题

热门标签

最新问答