Question

TypeError：element.loader.split 不是一个函数

2016-07-05

3272

javascript webpack

使用下面定义的配置，运行 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/,
    }],
  },
};

已安装的 Node 模块：

"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 属性需要的是字符串而不是数组；数组没有 split 方法。

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

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

由于配置需要一个加载器数组，因此应将键设置为 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/,
  }],
},