webpack4+学习笔记：8. CSS样式抽离之 mini-css-extract-plugin 插件

CSS样式抽离之 mini-css-extract-plugin 插件

mini-css-extract-plugin 插件是 webpack4+ 版本的，可以直接安装使用。这里只能把所有样式包括css、less都打包到一个css文件 common.css中，然后再 link 进页面。

1. 插件安装

npm install mini-css-extract-plugin -D

查看 package.json 文件显示已安装好

2. webpack.config.js 配置

let MiniCssExtractPlugin = require("mini-css-extract-plugin");

module: {
    rules: [
        {
            test: /\.css$/,
            use : [
                MiniCssExtractPlugin.loader,
                { loader: "css-loader" }
            ]
        },
        {
            test: /\.less$/,
            use : [
                MiniCssExtractPlugin.loader,
                { loader: "css-loader" },
                { loader: "less-loader" }
            ]
        }
    ]
},

plugins: [
    new MiniCssExtractPlugin({
        filename: "css/common.css"
    }),
]        

3. 页面效果及页面代码

//执行运行命令
npm run dev

4. 查看打包后的页面

//执行打包命令
npm run build

了解更多关于 mini-css-extract-plugin 插件，戳官网

上一篇和这篇已经介绍完CSS样式的抽离~~~

下一篇介绍CSS样式的处理，包括清除多余样式和给css属性自动追加前缀~~~