Question

我使用React + Webpack。我收到错误You may need an appropriate loader to handle this file type.之后，SyntaxError: Unexpected token at ../../acorn.js.

为什么它与acorn.js有关？另外，我不知道如何解决它。我想我已经安装了我需要的装载机。 webpack.config.dev.js运行良好，但在尝试构建webpack.config.prod.js时出现此错误。

让我展示我的代码......

webpack.config.prod.js

module: {
  loaders: [
    {
      test: /\.jsx$/,
      loader: 'babel',
      exclude: /node_modules/,
      query: {
        presets: ['react', 'es2015', 'stage-1']
      }
    },
    {
      test: /\.css$/,
      loaders: ['style', 'css']
    },
    {
      test: /\.png$/,
      loader: "url-loader?limit=100000"
    },
    {
      test: /\.jpg$/,
      loader: "file-loader"
    },
    {
      test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'url?limit=10000&mimetype=application/font-woff'
    },
    {
      test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'url?limit=10000&mimetype=application/octet-stream'
    },
    {
      test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'file'
    },
    {
      test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'url?limit=10000&mimetype=image/svg+xml'
    },
    {
      test: /\.gif$/i,
      loaders: [
        'file?hash=sha512&digest=hex&name=[hash].[ext]',
        'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
      ]
    },
    {
      test: /\.json?$/,
      loader: 'json'
    }
  ]
},

resolve: {
  root: [
    path.resolve('./src'),
    path.resolve('./style')
  ],
  extensions: ['', '.js', '.jsx', '.css']
},

plugins: [
  new HtmlWebpackPlugin({
    tempalte: './public/index.html'
  }),
  new webpack.DefinePlugin({
    'process.env':{
      'NODE_ENV': JSON.stringify('production')
    }
  }),
],

的package.json

"devDependencies": {
  "babel-core": "^6.22.1",
  "babel-loader": "^6.2.10",
  "babel-preset-es2015": "^6.22.0",
  "babel-preset-react": "^6.22.0",
  "babel-preset-stage-0": "^6.22.0",
  "css-loader": "^0.26.1",
  "file-loader": "^0.10.0",
  "html-webpack-plugin": "^2.28.0",
  "image-webpack-loader": "^3.2.0",
  "json-loader": "^0.5.4",
  "style-loader": "^0.13.1",
  "url-loader": "^0.5.7",
  "webpack": "^1.12.9",
  "webpack-dev-server": "^1.14.0"
},
"dependencies": {
  "axios": "^0.15.3",
  "bootstrap": "^3.3.7",
  "core-js": "^2.4.1",
  "lodash": "^4.17.4",
  "path": "^0.12.7",
  "react": "^15.4.2",
  "react-bootstrap": "^0.30.7",
  "react-bootstrap-table": "^3.1.7",
  "react-dnd": "^2.2.3",
  "react-dnd-html5-backend": "^2.2.3",
  "react-dom": "^15.4.2",
  "react-js-pagination": "^2.0.2",
  "react-modal": "^1.7.3",
  "react-redux": "^5.0.2",
  "react-router": "^3.0.2",
  "react-slick": "0.14.5",
  "react-toastr": "^2.8.2",
  "redux": "^3.6.0",
  "redux-form": "^6.5.0",
  "redux-promise": "^0.5.3",
  "redux-thunk": "^2.2.0",
  "slick-carousel": "^1.6.0"
}

Answer 1

您的模块加载器仅转换.jsx个文件，更改测试表达式以转换.js个文件

loaders: [
    {
      test: /\.jsx?$/,
      loader: 'babel',
      exclude: /node_modules/,
      query: {
        presets: ['react', 'es2015', 'stage-1']
      }
    },

[Webpack]：您可能需要一个合适的加载程序来处理此文件

1 个答案: