玖叶教程网

之前我们用style-loader将js中的样式放入到了一个style标签中，访问html的时候会把style标签通过js的方式插入到了head里，此时，css是与js混在一起的。这样不仅会增加js的体积，而且css内容多的话，访问html还会出现闪屏的情况。为了解决这个问题，我们需要引入一个插件来把样式文件分离出来。

npm i mini-css-extract-plugin -D

webpack.config.js配置如下：

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const miniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    entry: './src/main.js',
    output: {
        filename: 'bundle.js',
        path: resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [miniCssExtractPlugin.loader, 'css-loader']
            },
            {
                test: /\.less$/,
                use: [miniCssExtractPlugin.loader, 'css-loader', 'less-loader']
            },
            {
                test: /\.scss$/,
                use: [miniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/assets/index.html',
            hash: true,
            filename: 'index.html',
            favicon: './src/assets/favicon.ico'
        }),
        new miniCssExtractPlugin({
            filename:'index.css'
        })
    ],
    mode: 'development'
}

此时打包后（npm run build）的dist文件夹中会出现一个index.css文件。

package.json的配置如下：

{
  "name": "wpk5-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "npx webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^5.2.0",
    "html-webpack-plugin": "^5.3.1",
    "less": "^4.1.1",
    "less-loader": "^8.0.0",
    "mini-css-extract-plugin": "^1.4.0",
    "node-sass": "^5.0.0",
    "sass-loader": "^11.0.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.28.0",
    "webpack-cli": "^4.5.0"
  }
}

git仓库地址：

https://gitee.com/seimin/xiaoming2qianduan-webpack5/tree/v5.3/