开发者问题收集

运行webpack报错信息:element.loader.split is not a function

2017-06-01
495

在项目中我使用了babel-plugin-import,是用来实现ant design的按需加载的,但是我在运行webpack的时候,出现了错误的信息

以下是错误信息

/usr/local/lib/node_modules/webpack/node_modules/webpack- core/lib/LoadersList.js:58

if(element.loader) return element.loader.split("!");

TypeError: element.loader.split is not a function

以下是我的代码

webpack-config.js

module.exports = {
    entry:  __dirname + "/src/main.js",
    output: {
        path: __dirname + "/dist/js",
        filename: "weitac-visual-layout.js"
    },
    module: {
        loaders: [
            {
                test: /\.js?$/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015','stage-1'],
                    plugins: [
                        ["import", {"libraryName": "antd", "style": "css"}]
                    ]
                },
            },
            {
                test: /\.css?$/,
                loader: ['style-loader','css-loader'],
            }

        ]
    }
}

package.json

 "devDependencies": {
    "babel-loader": "^7.0.0",
    "babel-plugin-import": "^1.2.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-1": "^6.24.1",
    "babel-preset-stage-3": "^6.24.1",
    "react-router-dom": "^4.1.1",
    "webpack": "^2.5.1",
    "webpack-dev-server": "^2.4.5"
  },
  "dependencies": {
    "antd": "^2.10.1",
    "babel-core": "^6.24.1",
    "prop-types": "^15.5.10",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-router": "^4.1.1"
  }
1个回答

我发现流程问题

下面是正确的代码

 {
    test: /\.css?$/,
    loader: 'style-loader!css-loader',
 }

我太粗心了,祝大家儿童节快乐~

Da.Xin
2017-06-01