Question

我正在尝试构建Webpack捆绑包。

运行时：

webpack --config webpack.config.js

我收到此错误：

./ templates / components / lobby / index.js中的错误13:20 模块解析失败：意外的令牌（13:20）

这似乎是人们在使用webpack时遇到的常见错误。我已经查阅了许多描述该问题的stackoverflow页面，以及诸如此类的github讨论：https://github.com/babel/babel-loader/issues/173

大多数人似乎通过更改Webpack版本来解决此问题。我尝试过Webpack版本从4.28.0到4.42.0递增，但从未成功。我还尝试进行全新安装，并使用yarn而不是npm来安装软件包。这也不起作用。

这使我相信我的问题不在于构建工具的版本控制，而在于我的webpack.config.js或package.json本身。

这是我的webpack.config.js：

// load the needed node modules
var path = require("path");
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');

// webpack project settings
module.exports = {
  context: __dirname,
  entry: {
          lobby: './templates/components/lobby/index',
  },
  output: {
      path: path.resolve('./static/bundles/'),
      filename: "[name]-[hash].js"
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(), // don't reload if there is an error
    new BundleTracker({path: __dirname, filename: './webpack-stats.json'})

  ],

    module: {
  rules: [
    {
      test: /\.jsx$/,
      exclude: /(node_modules)/,
      loader: 'babel-loader', // 'babel-loader' is also a legal name to reference
      query: {
        presets: ['es2015', 'react']
      },
      //options: {
      //  presets: ['@babel/preset-env','@babel/preset-react']
      //}
    },

  ]
},

  resolve: {
    modules: ['node_modules'],
    extensions: ['*', '.js', '.jsx']
  },
  mode: 'development'
}

这是我的package.json：

{
  "name": "name",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "acorn-dynamic-import": "^4.0.0",
    "webpack-cli": "^3.3.11"
  },
  "devDependencies": {
    "babel": "^6.23.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.1.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "jquery": "^3.4.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-websocket": "^2.1.0",
    "webpack": "^4.42.0",
    "webpack-bundle-tracker": "^0.4.3"
  }
}

这是我运行webpack --config webpack.config.js时出现的全部错误：

./ templates / components / lobby / index.js中的错误13:20 模块解析失败：意外的令牌（13:20）您可能需要适当的加载程序来处理此文件类型，当前没有配置任何加载程序来处理此文件。参见https://webpack.js.org/concepts#loaders | //渲染基本组件 |函数render_component（）{ ReactDOM.render（，document.getElementById（'lobby_component'）） | } |

我是Web开发的新手，真的不知道问题可能是什么。我花了整整一天的时间在网上浏览，以寻找潜在的解决方案，但无济于事。任何提示或建议将不胜感激。谢谢！

Webpack捆绑包生成错误-模块解析失败：意外的令牌

0 个答案: