Question

我从头开始创建js应用程序，这是我的webpack配置文件

import path from 'path';

export default {

  entry: path.join(__dirname,'/client/index.js'),
  output: {
    path: '/'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        include: path.join(__dirname,'client'),
        loaders: ['babel-loader'],

      }
    ]
  },
  resolve: {
    extensions: ['*', '.js']
  }
}

这是我的.babelrc文件：

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

这是我的index.html file：

<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>
  <body>
    <div id="root"></div>

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

这是我的client/index.js

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

render(<App />, document.getElementById("root"));

这是我的App组件

import React from 'react';

export default () => {
  return <h1>Hello from react</h1>;
}

这是应用程序使用的依赖项

{
  "dependencies": {
    "express": "^4.15.3",
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  },
  "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "nodemon": "^1.11.0",
    "webpack": "^3.2.0",
    "webpack-dev-middleware": "^1.11.0",
    "webpack-dev-server": "^2.5.1"
  }
}

构建成功但运行应用程序后出现错误Unexpected token < bundle.js:1，有谁知道导致错误的原因是什么？感谢

Answer 1

在输出：

下的webpack.config中添加文件名

 entry: path.join(__dirname,'/client/index.js'),
  output: {
    path: '/'
  },
 filename: 'bundle.js',

基本上会发生这种情况，因为在index.html中导入的是bundle.js

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

但你的webpack正在输出index.js，通过添加filename属性，webpack现在将输出bundle.js

意外的令牌＆lt;在反应堆app中捆绑js

1 个答案: