Question

我试图从babelify，watchify，browserify转移到webpack，webpack服务器和babel。

我记得6个月前离开webpack因为它给了我类似的问题试图使用aws-sdk。

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

哈希：396f0bfb9d565b6f60f0版本：webpack 1.14.0时间：61ms [0]   ./src/index.js 0字节[建立] [失败]
      ./src/index.js中的错误模块解析失败：   C：\ Users \ james \ Documents \ hyre \ src \ index.js意外的令牌（9：8）你   可能需要一个合适的加载器来处理这种文件类型。语法错误：   意外的令牌（9：8）       在Parser.pp $ 4.raise（C：\ Users \ james \ Documents \ hyre \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：2221：15）       在Parser.pp.unexpected（C：\ Users \ james \ Documents \ hyre \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：603：10）       在Parser.pp $ 3.parseExprAtom（C：\ Users \ james \ Documents \ hyre \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：1822：12）       在Parser.pp $ 3.parseExprSubscripts（C：\ Users \ james \ Documents \ hyre \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：1715：21）       在Parser.pp $ 3.parseMaybeUnary（C：\ Users \ james \ Documents \ hyre \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：1692：19）       在Parser.pp $ 3.parseExprOps（C：\ Users \ james \ Documents \ hyre \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：1637：21）       在Parser.pp $ 3.parseMaybeConditional（C：\ Users \ james \ Documents \ hyre \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：1620：21）       在Parser.pp $ 3.parseMaybeAssign（C：\ Users \ james \ Documents \ hyre \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：1597：21）       在Parser.pp $ 3.parseExprList（C：\ Users \ james \ Documents \ hyre \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：2165：22）       在Parser.pp $ 3.parseSubscripts（C：\ Users \ james \ Documents \ hyre \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：1741：35）       在Parser.pp $ 3.parseExprSubscripts（C：\ Users \ james \ Documents \ hyre \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：1718：17）       在Parser.pp $ 3.parseMaybeUnary（C：\ Users \ james \ Documents \ hyre \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：1692：19）       在Parser.pp $ 3.parseExprOps（C：\ Users \ james \ Documents \ hyre \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：1637：21）       在Parser.pp $ 3.parseMaybeConditional（C：\ Users \ james \ Documents \ hyre \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：1620：21）       在Parser.pp $ 3.parseMaybeAssign（C：\ Users \ james \ Documents \ hyre \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：1597：21）       在Parser.pp $ 3.parseExpression（C：\ Users \ james \ Documents \ hyre \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：1573：21）       在Parser.pp $ 1.parseStatement（C：\ Users \ james \ Documents \ hyre \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：727：47）       在Parser.pp $ 1.parseTopLevel（C：\ Users \ james \ Documents \ hyre \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：638：25）       在Parser.parse（C：\ Users \ james \ Documents \ hyre \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：516：17）       在Object.parse（C：\ Users \ james \ Documents \ hyre \ node_modules \ webpack \ node_modules \ acorn \ dist \ acorn.js：3098：39）       在Parser.parse（C：\ Users \ james \ Documents \ hyre \ node_modules \ webpack \ lib \ Parser.js：902：15）       在DependenciesBlock。（C：\用户\詹姆斯\文件\ hyre \ node_modules \的WebPack \ lib中\ NormalModule.js：104：16）       在DependenciesBlock.onModuleBuild（C：\ Users \ james \ Documents \ hyre \ node_modules \ webpack \ node_modules \ webpack-core \ lib \ NormalModuleMixin.js：310：10）       在nextLoader（C：\ Users \ james \ Documents \ hyre \ node_modules \ webpack \ node_modules \ webpack-core \ lib \ NormalModuleMixin.js：275：25）       在C：\ Users \ james \ Documents \ hyre \ node_modules \ webpack \ node_modules \ webpack-core \ lib \ NormalModuleMixin.js：259：5       在Storage.finished（C：\ Users \ james \ Documents \ hyre \ node_modules \ webpack \ node_modules \ enhanced-resolve \ lib \ CachedInputFileSystem.js：38：16）       在C：\ Users \ james \ Documents \ hyre \ node_modules \ webpack \ node_modules \ enhanced-resolve \ node_modules \ graceful-fs \ graceful-fs.js：78：16       在FSReqWrap.readFileAfterClose [as oncomplete]（fs.js：445：3）

我相信我已根据需要设置了所有内容。请参阅我的文件：

webpack.config.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"
  }
}

index.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

webpack 配置中有错误。 resolve，module和loaders属性不应嵌套在output道具中，它们应位于同一级别。这是有效的配置：

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']
        }
      }
    ]
  }
}

Webpack Error React＆amp; ES6以前在Babelify下工作

1 个答案: