webpack是用JS写的，运行在node环境，所以默认webpack打包的时候只会处理JS之间的依赖关系。因此针对.css这样不是一个JavaScript模块，需要配置webpack是用css-loader和style-loader去处理。

• css-loader：(识别转化.css)会处理import/require()引入内容，将css内容转化为数组类型
• style-loader：(加载.css到页面)通过一个js脚本创建一个style标签，将数组类型的加载到对应页面

demo

安装依赖

yarn install -D css-loader@^5.0.1
yarn install -D style-loader@^2.0.0

//安装成功后，package.json文件依赖
  "devDependencies": {
    "css-loader": "^5.0.1",
    "style-loader": "^2.0.0",
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.1.14"
  }

webpack配置文件设置

//webpack.dev.js
const path = require("path")
module.exports = {
    entry:{
        main:["./src/main.js"],
    },
    mode:"development",
    output:{
        filename:"[name]-bundle.js",
        path:path.resolve(__dirname, "../dist")
    },
    devServer:{
        contentBase:"dist",
        overlay:true  //将错误信息打印在前台
    },
    module:{
        rules:[
            {
                test:/\.css$/,//正则匹配css文件
                use:[
                    {loader:"style-loader"},  //使用style-loader
                    {loader:"css-loader"},    //使用css-loader
                ]
            }
        ]
    }
}

是用loader的基本格式为：

module:{
  rules:[
        {
          test :  //
          use : [
              {loader:"xxx-loader"}
          ]
        }
    ]
}