Question

使用下面定义的配置，运行webpack时会向控制台抛出错误：

TypeError：element.loader.split不是函数

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;数组没有split方法。

配置的module.loaders属性中的每个对象都需要将String设置为loader属性。来自documentation：

<强> module.loaders
    一系列自动应用的加载器。

每个项目都可以包含以下属性：

测试：必须满足的条件
    排除：不得满足的条件
    包括：必须满足的条件
    loader：一串“！”分离的装载机
    加载器：一组加载器作为字符串

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

TypeError：element.loader.split不是函数

1 个答案: