控制台出现的错误如下：
webpack.config.js中的配置如下：
module.exports={
entry:'./src/main.js',
output:{
path:__dirname,
filename:'dist/app.js'
},
module:{
rules:[
{test:/\.js/,loader:'babel-loader',exclude:/node_modules/},
{test:/\.css/,loader:'css-loader!style-loader'},
{test:/\.(png|jpeg|jpg|ttf|gif)/,loader:'file-loader'}
]
},
devServer:{
disableHostCheck:true
}
}
package.json中安装信息如下：
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^2.0.2",
"file-loader": "^3.0.1",
"style-loader": "^0.23.1",
"webpack": "^4.28.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.13"
},
插件页面是这样引入css文件的：
import './index.css';
解决方法：
1、注意以上css-loader和style-loader的顺序。
2、这样引入css文件：require('!style-loader!css-loader!./index.css');
完美解决！
可以参考：https://github.com/webpack-contrib/css-loader/issues/352