Question

使用webpack进行编译时出现此错误。使用标准加载器作为预加载器。自述文件为webpack 2指定了此配置：https://www.npmjs.com/package/standard-loader。测试中包含jsx，所以我很困惑为什么解析jsx时出现问题。

请注意，所有编译都很好，直到我为eslinting添加了标准加载器。

＆＃13;

ERROR in ./src/index.jsx
Module parse failed: /Users/kwokbk/Desktop/Apps/redux/react-redux-boiler/node_modules/standard-react-loader/index.js??ref--0!/Users/kwokbk/Desktop/Apps/redux/react-redux-boiler/src/index.jsx Unexpected token (11:2)
You may need an appropriate loader to handle this file type.
| 
| render(
|   <Provider store={store}>
|     <App />
|   </Provider>,
 @ multi webpack-hot-middleware/client ./src/
webpack: Failed to compile.

＆＃13;

index.jsx

＆＃13;

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import App from './components/App'
import reducer from './reducers'

const store = createStore(reducer)

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('react-root')
)

＆＃13;

webpack.config

const CONFIG = require('./webpack.base.js');
const webpack = require('webpack');

const { CLIENT_ENTRY, CLIENT_OUTPUT } = CONFIG;

module.exports = {
    entry: {
        main: [
            'webpack-hot-middleware/client',
            CLIENT_ENTRY
        ],
        vendor: [
            'react',
            'react-dom',
            'redux',
            'react-redux'
        ]
    },
    output: {
        path: CLIENT_OUTPUT,
        publicPath: CLIENT_OUTPUT,
        chunkFilename: '[name].chunk.js',
        filename: '[name].js'
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    module: {
        rules: [
            {
                enforce: 'pre',
                test: /\.jsx?$/,
                loader: 'standard-loader',
                exclude: /(node_modules)/,
                options: {
                    parser: 'babel-eslint'
                }
            }
        ],
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|server)/,
                loader: 'babel-loader'
            }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.optimize.CommonsChunkPlugin({name: 'vendor', filename: 'vendor.js', minChunks: 2})
    ]
}

的package.json

{
  "name": "react-redux-boiler",
  "version": "1.0.0",
  "description": "React Redux Boiler with webpack dev middleware, hot reloading, mocha-enzyme testing ",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "cross-env NODE_ENV=development nodemon -r 'babel-register' src/server"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/bkkwok/react-redux-boiler.git"
  },
  "author": "Benjamin Kwok",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/bkkwok/react-redux-boiler/issues"
  },
  "homepage": "https://github.com/bkkwok/react-redux-boiler#readme",
  "dependencies": {
    "cross-env": "^4.0.0",
    "express": "^4.15.2",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-redux": "^5.0.3",
    "redux": "^3.6.0"
  },
  "devDependencies": {
    "babel-core": "^6.24.0",
    "babel-eslint": "^7.2.1",
    "babel-loader": "^6.4.1",
    "babel-preset-airbnb": "^2.2.3",
    "babel-preset-es2015": "^6.24.0",
    "babel-preset-react": "^6.23.0",
    "babel-register": "^6.23.0",
    "chai": "^3.5.0",
    "enzyme": "^2.8.0",
    "eslint-config-standard": "^7.1.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-react": "^6.10.3",
    "mocha": "^3.2.0",
    "nodemon": "^1.11.0",
    "sinon": "^2.1.0",
    "standard": "^9.0.2",
    "standard-loader": "^6.0.1",
    "standard-react-loader": "^1.0.0",
    "webpack": "^2.3.2",
    "webpack-dev-middleware": "^1.10.1",
    "webpack-hot-middleware": "^2.17.1"
  },
  "standard": {
    "parser": ["babel-eslint", "eslint-plugin-react"]
  }
}

.babelrc

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

Answer 1

在webpack 2中，加载器必须位于rules下，因此请更改为：

module: {
        rules: [
            {
                enforce: 'pre',
                test: /\.jsx?$/,
                loader: 'standard-loader',
                exclude: /(node_modules)/,
                options: {
                    parser: 'babel-eslint'
                }
            },
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|server)/,
                loader: 'babel-loader'
            }
        ]
    },

webpack标准加载器，jsx的问题？

1 个答案: