webpack如何打包css并将css引入index.html

1、在资源模块中 针对特定的文件 如.css文件，使用loader进行解析

css-loader: 会对 @import 和 url() 进行处理

style-loader:会将css 插入到dom中（将css以style标签的形式插入到head中）

 module:{
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],//顺序不能换
      },
    ],
  },

2、如何将css抽离 以link标签的形式引入呢？

        可以通过插件 mini-css-extract-plugin 

 plugins:[
    new MiniCssExtractPlugin({
      filename: 'css/[name].bundle.[contenthash:8].css',
      chunkFilename: 'css/[name].chunk.[contenthash:8].css',
    })
  ],
  module:{
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },

注意：一般正式环境做css抽离，可以减小单个文件的大小，但是需要做css样式隔离，详情见下文

开发环境不做css抽离 css抽离会降低编译速度；