1.安装

MiniCssExtractPlugin

  1. npm i mini-css-extract-plugin -D

2.box1.less

src\css\box1.less

#box1{
  width: 100px;
  height: 100px;
  background: pink;
  backface-visibility: hidden;
  display: flex;
}

3.box2.css

src\css\box2.css

#box2 {
    width: 100px;
    height: 100px;
    background: deepskyblue;
    backface-visibility: hidden;
    display: flex;
}

4.index.html

src\index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>

5.index.js

src\index.js

import "./css/box1.less"
import "./css/box2.css"

6.webpack.config.js

webpack.config.js

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            // style-loader 将样式添加到style标签中
            // MiniCssExtractPlugin.loader 将样式添加到样式文件中，并加入html
            { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] },
            { test: /\.less$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'] }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
        }),
        new MiniCssExtractPlugin({
            // 默认是main.css
            filename: 'css/build.css'
        }),
    ],
}