11 ---＞提取css成单独文件

1.新建文件夹

2.文件内容

a.css

#box1 {
  width: 100px;
  height: 100px;
  background-color: pink;
}

b.css

#box2 {
  width: 200px;
  height: 200px;
  background-color: deeppink;
}

index.js

/*
 * @Author: zyl
 * @Date: 2021-07-29 10:13:40
 * @LastEditors: zyl
 * @LastEditTime: 2021-07-29 10:15:24
 */
import '../css/a.css'
import '../css/b.css'

webpack.config.js

/*
 * @Author: zyl
 * @Date: 2021-07-29 10:17:50
 * @LastEditors: zyl
 * @LastEditTime: 2021-07-29 10:21:54
 */
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { resolve } = require('path')
module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.csss$/,
        use: [
          'style-loader', 'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode:'development'

}

3.使用webpack运行

4.查看构建后的文件目录

5.打开build下面的index.html文件并运行

呈现效果：

虽然样式成立，但是样式依旧是在在js中

6.下载插件提取css

npm i mini-css-extract-plugin -D

7.引入css提取插件

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    //插件处理这里添加词代码
    new MiniCssExtractPlugin(),
  ],

module: {
    rules: [
      {
        test: /\.csss$/,
        use: [
          //创建style标签将样式放上去
          // 'style-loader',
          //这个loader取代style-loader，作用是:提取js中的css成单独文件
          MiniCssExtractPlugin.loader,
          //将css文件整合到js中
          'css-loader'
        ]
      }
    ]
  },

7.使用webpack运行

8.查看build文件夹目录

发现多了一个main.css文件

打开index.html

查看main.css，将我们之前的a.css和b.css融合到一起了

9.再次运行index.html

10.指定main.css输出文件夹

更改配置

new MiniCssExtractPlugin({
//对输出的css文件进行重命名
      filename:'css/build.css'
    }),

11.重新运行查看目录结构

12.F12检查

是通过link引入的，可以解决闪屏和js过大问题