类型错误：element.loader.split不是函数

Question

随着下面所定义的配置，一个错误被抛出到控制台时webpack已运行：

TypeError: element.loader.split is not a function

webpack.config.js

module.exports = { 
    devtool: 'eval', 
    entry: { 
    chiffr: getEntrySources([ 
     './src/index', 
    ]), 
    }, 
    output: { 
    path: path.join(__dirname, 'dist'), 
    filename: 'bundle.js', 
    publicPath: '/static/', 
    }, 
    module: { 
    loaders: [{ 
     test: /\.js$/, 
     loader: ['react-hot', 'jsx'], 
     include: path.join(__dirname, 'src'), 
     exclude: /node_modules/, 
    }], 
    }, 
}; 

安装的节点模块：

"dependencies": { 
    "react": "15.2.0", 
    "react-dom": "15.2.0" 
}, 
"devDependencies": { 
    "babel-eslint": "6.1.0", 
    "eslint": "2.13.1", 
    "eslint-config-airbnb": "9.0.1", 
    "eslint-plugin-jsx-a11y": "1.5.3", 
    "eslint-plugin-react": "5.2.2", 
    "jsx-loader": "0.13.2", 
    "node-sass": "3.8.0", 
    "react-hot-loader": "1.3.0", 
    "webpack": "1.13.1", 
    "webpack-dev-server": "1.14.1" 
} 

什么是错误的来源，它如何被修复？

Answer 1

发生此错误的原因是第一个加载程序的loader属性需要String而不是Array; Array没有split方法。

配置的module.loaders属性中的每个对象都需要一个设置为loader属性的字符串。从documentation：

module.loaders
An array of automatically applied loaders.

Each item can have these properties:

test: A condition that must be met
exclude: A condition that must not be met
include: A condition that must be met
loader: A string of “!” separated loaders
loaders: An array of loaders as string

由于配置需要装载机的Array，关键应设置为loaders代替：

module: { 
    loaders: [{ 
    test: /\.js$/, 
    // Change the key to 'loaders' for an Array of loaders 
    loaders: ['react-hot', 'jsx'], 
    include: path.join(__dirname, 'src'), 
    exclude: /node_modules/, 
    }], 
},