4、处理css文件（css-loader加载器与mini-css-extract-plugin分离CSS文件插件）

处理css文件（css-loader加载器）

• 1、webpack默认只认识js文件，但是webpack可以使用loader来加载预处理文件，允许webpack也可以打包js之外的静态资源。所以webpack如果要处理其他文件类型，需要安装配置相对应的loader加载器。

• 2、安装依赖：yarn add style-loader css-loader -D

yarn add style-loader css-loader -D

• 3、配置加载器，这样就可以导入css文件，css文件会打包到js文件中

// 引入加载器
  module: {
    rules: [{ test: /\.css$/, user: ['style-loader', 'css-loader'] }]
  },

• 4、安装yarn add mini-css-extract-plugin -D插件，用来分离CSS文件和JS文件

yarn add mini-css-extract-plugin -D

• 5、引入依赖：const MiniCssExtractPlugin=require('mini-css-extract-plugin')
• 6、配置loader：loader:MiniCssExtractPlugin.loader

  // 引入加载器
  module: {
    rules: [{
      test: /\.css$/,
      user: [{ loader: MiniCssExtractPlugin.loader, options: { publicPath: '../' }, },
       'css-loader']
    }]
  }

• 7、配置插件plugins：

  // 引入插件
  plugins: [
    new HtmlWebpackPlugin({ template: './public/index.html' }),
    new MiniCssExtractPlugin({ filename: 'css/index.css' })
  ]