网页包错误反应

Question

我试着从babelify、watchify、browserify转到webpack、webpack服务器和babel。

我记得6个月前，我离开了webpack，因为它让我在尝试使用aws sdk时遇到了类似的问题。

出于某种原因，每次构建时都会出现以下错误：

哈希： 396f0bfb9d565b6f60f0版本： webpack 1.14.0时间： 61ms[0]。/src/index.js0字节[构建][失败]

错误/src/index。js模块解析失败：C:\Users\james\Documents\hyre\src\index。js意外标记（9:8）您可能需要适当的加载程序来处理此文件类型。SyntaxError:语法分析器处出现意外标记（9:8）。pp$4。在解析器中提升（C:\Users\james\Documents\hyre\node\u modules\webpack\node\u modules\acorn\dist\acorn.js:2221:15）。解析程序中的pp.unexpected（C:\Users\james\Documents\hyre\node\u modules\webpack\node\u modules\acorn\dist\acorn.js:603:10）。pp$3。parseExprAtom（C:\Users\james\Documents\hyre\node\u modules\webpack\node\u modules\acorn\dist\acorn.js:1822:12）位于解析器。pp$3。parsexprsubscripts（C:\Users\james\Documents\hyre\node\u modules\webpack\node\u modules\acorn\dist\acorn.js:1715:21）位于解析器。pp$3。解析器中的parsemaybeanary（C:\Users\james\Documents\hyre\node\u modules\webpack\node\u modules\acorn\dist\acorn.js:1692:19）。pp$3。parsexprops（C:\Users\james\Documents\hyre\node\u modules\webpack\node\u modules\acorn\dist\acorn.js:1637:21）。pp$3。在解析器中解析可能是有条件的（C:\Users\james\Documents\hyre\node\u modules\webpack\node\u modules\acorn\dist\acorn.js:1620:21）。pp$3。parseMaybeAssign（C:\Users\james\Documents\hyre\node\u modules\webpack\node\u modules\acorn\dist\acorn.js:1597:21）在解析器中。pp$3。parseExprList（C:\Users\james\Documents\hyre\node\u modules\webpack\node\u modules\acorn\dist\acorn.js:2165:22）位于解析器。pp$3。解析器上的parseSubscripts（C:\Users\james\Documents\hyre\node\u modules\webpack\node\u modules\acorn\dist\acorn.js:1741:35）。pp$3。parsexprsubscripts（C:\Users\james\Documents\hyre\node\u modules\webpack\node\u modules\acorn\dist\acorn.js:1718:17）位于解析器。pp$3。解析器中的parsemaybeanary（C:\Users\james\Documents\hyre\node\u modules\webpack\node\u modules\acorn\dist\acorn.js:1692:19）。pp$3。parsexprops（C:\Users\james\Documents\hyre\node\u modules\webpack\node\u modules\acorn\dist\acorn.js:1637:21）。pp$3。在解析器中解析可能是有条件的（C:\Users\james\Documents\hyre\node\u modules\webpack\node\u modules\acorn\dist\acorn.js:1620:21）。pp$3。parseMaybeAssign（C:\Users\james\Documents\hyre\node\u modules\webpack\node\u modules\acorn\dist\acorn.js:1597:21）在解析器中。pp$3。解析器上的parseExpression（C:\Users\james\Documents\hyre\node\u modules\webpack\node\u modules\acorn\dist\acorn.js:1573:21）。pp$1。解析器中的parseStatement（C:\Users\james\Documents\hyre\node\u modules\webpack\node\u modules\acorn\dist\acorn.js:727:47）。pp$1。解析器上的parseTopLevel（C:\Users\james\Documents\hyre\node\u modules\webpack\node\u modules\acorn\dist\acorn.js:638:25）。在对象上解析（C:\Users\james\Documents\hyre\node\u modules\webpack\node\u modules\acorn\dist\acorn.js:516:17）。在解析器处解析（C:\Users\james\Documents\hyre\node\u modules\webpack\node\u modules\acorn\dist\acorn.js:3098:39）。在DependenciesBlock处解析（C:\Users\james\Documents\hyre\node\u modules\webpack\lib\Parser.js:902:15）。（C:\Users\james\Documents\hyre\node\u modules\webpack\lib\NormalModule.js:104:16）位于DependenciesBlock。在下一个加载程序（C:\Users\james\Documents\hyre\node\u modules\webpack\node\u modules\webpack core\lib\NormalModuleMixin.js:310:10）（C:\Users\james\Documents\hyre\node\u modules\webpack\node\u modules\webpack core\lib\NormalModuleMixin.js:275:25）的C:\Users\james\Documents\hyre\node\u modules\webpack\node\u modules\webpack core\lib\NormalModuleMixin。js:259:5在仓库。在C:\Users\james\Documents\hyre\node\u modules\webpack\node\u modules\enhanced resolve\lib\CachedInputFileSystem.js:38:16完成（C:\Users\james\Documents\hyre\node\u modules\webpack\node\u modules\enhanced resolve\node\u modules\renced fs\renced fs）。js:78:16在FSReqWrap。readFileAfterClose[as oncomplete]（fs.js:445:3）

我相信我已经按要求做好了一切准备。请查看我的文件：

网页包。配置。js

module.exports = {
entry: './src/index.js',
  output: {
    path: __dirname + '/public/js',
    filename: 'bundle.js',
    resolve: {
      extensions: ['', '.js', '.jsx']
    },
    module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          cacheDirectory: true,
          presets: ['react', 'es2015']
        }
      }
    ]
  }
  }
}

package.json

{
  "name": "hyre",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "aws-sdk": "^2.4.4",
    "babelify": "^7.3.0",
    "browserify": "^13.0.1",
    "is-my-date-valid": "^0.1.0",
    "lodash": "^4.17.2",
    "moment": "^2.14.1",
    "react": "^15.1.0",
    "react-date-picker": "^5.3.26",
    "react-datepicker": "^0.28.1",
    "react-dom": "^15.1.0",
    "watchify": "^3.7.0"
  },
  "devDependencies": {
    "babel-core": "^6.10.4",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.11.1",
    "react-hot-loader": "^1.3.0",
    "transform-loader": "^0.2.3",
    "webpack": "^1.14.0"
  }
}

指数js

/*let message = 'Loaded----->';
console.log(message);*/

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

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

Answer 1

您在网页包配置中有错误<代码>解析、模块和加载程序属性不应嵌套在输出属性中，它们应处于同一级别。以下是有效配置：

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/public/js',
    filename: 'bundle.js'
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['react', 'es2015']
        }
      }
    ]
  }
}