阅读 4224
『Webpack系列』—— MiniCssExtractPlugin插件用法详解

『Webpack系列』—— MiniCssExtractPlugin插件用法详解

一、插件的作用

This plugin extracts CSS into separate files. It creates a CSS file per JS file which contains CSS. It supports On-Demand-Loading of CSS and SourceMaps.

用某度翻译后:“该插件将CSS提取到单独的文件中。它为每个包含CSS的JS文件创建一个CSS文件。它支持CSS和SourceMap的按需加载。”

包含CSS的JS文件,JS文件不是指组件对应的JS文件,是指打包后生成的JS文件。
复制代码

二、插件的优点

在Webpack4.0之前,是用ExtractTextWebpackPlugin插件来提取css的,与其相比有如下优点

  • 异步加载
  • 没有重复的编译(性能)
  • 更容易使用
  • 特定于CSS

三、插件的简单用法

搭建个简单的Wenpack Demo,演示一下。

先安装MiniCssExtractPlugin插件。

npm install --save-dev mini-css-extract-plugin
复制代码

安装成功后,在webpack.config.js文件中配置。

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    entry: {
        main: "./src/main.js",
    },
    plugins:[
        new MiniCssExtractPlugin(),
    ],
    module:{
        rules:[
            {
                test: /\.css$/,
                use:[MiniCssExtractPlugin.loader,'css-loader']
            },
        ]
    }
}
复制代码

入口文件为main.js

import './css/main.css'
import './index'
console.log('main')
复制代码

index.js

import './css/index.css'
import './index'
console.log('main')
复制代码

main.cssindex.css内容一样

.class{
    color:red
}
复制代码

执行命令webpack,可以在dist文件夹中看到打包生成的三个文件

项目中有两个包含CSS的JS文件,但是只打包生成了一个CSS文件,证实了上面 “它为每个包含CSS的JS文件创建一个CSS文件”中的包含CSS的JS文件是指打包后生成的JS文件

在浏览器打开index.html,在开发者工具中可以看到如下图所示

打包生成的CSS文件用link标签引入

如果没有用MiniCssExtractPlugin插件呢,改一下webpack.config.js文件中配置。

module:{
    rules:[
        {
            test: /\.css$/,
            use:['style-loader','css-loader']
        },
    ]
}
复制代码

再执行webpack命令。在浏览器打开index.html,会发现样式在头部用<style></style>嵌入式引入。

看到这里也应该明白了MiniCssExtractPlugin插件的作用,就是提取JS中的CSS样式,用link外部引入,减少JS文件的大小,简称CCSS样式分离。

MiniCssExtractPlugin插件不能和style-loader共用
复制代码

四、插件的参数

filename

控制从打包后的入口JS文件中提取CSS样式生成的CSS文件的名称。

module.exports = {
    entry: {
        main: "./src/main.js",
    },
    plugins:[
        new MiniCssExtractPlugin({
            filename: '[name]-test.css',
        }),
    ]
}
复制代码

执行webpack命令,可以在dist文件夹中看到打包生成的CSS文件名称为main-test.css

chunkFilename

控制从打包后的非入口JS文件中提取CSS样式生成的CSS文件的名称。

module.exports = {
    entry: {
        main: "./src/main.js",
    },
    plugins:[
        new MiniCssExtractPlugin({
            filename: '[name]-test.css',
            chunkFilename: '[name]-test.css'
        }),
    ]
}
复制代码

main.js

import './css/main.css'
import(/*webpackChunkName: "index"*/ './index')
console.log('main')
复制代码

执行webpack命令,可以在dist文件夹中看到非入口JS文件index.bundle.js提取出来的CSS文件名为index-test.css

moduleFilename

该参数的值是个函数,主要应用多入口场景,控制从打包后的入口JS文件中提取CSS样式生成的CSS文件的名称。

如果和filename参数共用,filename将不起作用。

module.exports = {
    entry: {
        main: "./src/main.js",
        main1: "./src/main1.js",
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'css/[name].css',
            moduleFilename: (
                { name }) => {
                    return `${name}.css`
                },
        }),
    ],
}
复制代码

执行webpack命令,打包生成的文件如下图所示

ignoreOrder

控制css的引入顺序不一致是否警告,true表示警告,false表示不警告。

简单的说,就是在js里css的引入顺序导致的问题,多个css的在js里的引入顺序不同,就会有这个警告。例如,在1.js 里,引入的顺序是a.css, b.css; 在2.js里,引入顺序是b.css,a.css,出现了这种引入顺序不同,就导致了警告。在两个js里把引入顺序调成一致,就没问题了。在1.js和2.js里的引入顺序都调整成a.css, b.css 就没有那个警告了。

当然也可以设置ignoreOrder参数为false,关闭这些警告。

具体可以看官网的这个issue

五、插件loader的参数

publicPath

默认值是webpackOptions.output,如下面所示,默认值就是path.resolve(__dirname, 'dist')

module.exports = {
    output: {
        filename: "[name].bundle.js",
        path: path.resolve(__dirname, 'dist'),
    },
}
复制代码

作用是指定目标文件的定制公共路径。有点难理解,下面用一个实例来解释。

main.css

body{
    background: url('./LOGO.png');
}
复制代码

main.js入口文件

import './css/main.css'
console.log('main')
复制代码

因为main.css中引入图片,要用file-loader处理一下。在webpack.config.js中这么配置

module.exports = {
    module: {
        rules: [
            {
                test: /\.png$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: 'img/[name].[hash:8].[ext]'
                        }
                    }
                ]
            },
        ],
    },
};
复制代码

执行webpack命令,打包生成的CSS文件如下main.css如下所示 图片放在dist文件夹下img文件夹中,这时在浏览器打开index.html,图片是可以加载出来。

如果改一下生成的CSS文件路径。

module.exports = {
    plugins:[
        new MiniCssExtractPlugin({
            filename: 'css/[name].css',
        }),
    ]
}
复制代码

再执行webpack命令,打包生成的CSS文件如下main.css如下所示 图片还是放在dist文件夹下img文件夹中,但是在浏览器打开index.html图片无法加载出来

因为main.css 中图片的引用路径是img/LOGO.af6d901d.png,显然路径不对,所以图片无法加载出来,要把图片的引用路径改成../img/LOGO.af6d901d.png才可以加载出来。

但是不可能去修改打包生成的文件,那要如何解决这个错误呢?此时publicPath参数的作用就体现出来了,可以利用publicPath参数来修改图片的引用路径,修改一下webpack.config.js的配置。

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader:MiniCssExtractPlugin.loader,
                        options:{
                            publicPath:'../'
                        }
                    },
                'css-loader']
            },
        ],
    }
}
复制代码

再执行webpack命令,打包生成的CSS文件如下main.css如下所示

在浏览器打开index.html图片可以加载出来

publicPath的作用指定目标文件的定制公共路径,可以理解为指定../img/LOGO.af6d901d.pngimg前面的路径../

esModule

默认值为false,代表MiniCssExtractPlugin生成使用CommonJS模块语法的JS模块。

若为true,代表MiniCssExtractPlugin生成使用ES6模块语法的JS模块。

hmr

默认为false,为true时启动样式文件热更新。

在不启用样式文件热更新时,修改CSS源文件的时候,修改的样式不会自动在页面上显示,需要手动刷新页面,才会加载变化。启动样式文件热更新后,不再需要刷新整个页面,修改的样式就可以自动在页面上显示。

上面说到过MiniCssExtractPlugin插件不能和style-loader共用,一般在开发环境中配置style-loader,在生产环境中配置MiniCssExtractPlugin插件。其实style-loader也可以实现样式文件热更新。

HMR is an opt-in feature that only affects modules containing HMR code. One example would be patching styling through the style-loader. In order for patching to work, the style-loader implements the HMR interface; when it receives an update through HMR, it replaces the old styles with the new ones.

但是MiniCssExtractPlugin插件的样式文件热更新比style-loader更强大一些。比如说在public文件夹中的index.html引入一个CSS样式文件,如果修改了这个CSS样式文件的源码,使用style-loader是不会触发样式文件热更新,因为style-loader只热更新JS中引入的样式,但MiniCssExtractPlugin插件会热更新加载所有的样式。

一般只在生产环境中将hmr设置为true

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader:MiniCssExtractPlugin.loader,
                        options:{
                            publicPath:'../',
                            hmr: process.env.NODE_ENV === 'development',
                        }
                    },
                'css-loader']
            },
        ],
    }
}
复制代码

reloadAll

if hmr does not work, this is a forceful method.

一般配合hrm参数使用,为true时,表示样式文件热更新不起作用时重新加载全部样式。

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader:MiniCssExtractPlugin.loader,
                        options:{
                            publicPath:'../',
                            hmr: process.env.NODE_ENV === 'development',
                            reloadAll: true
                        }
                    },
                'css-loader']
            },
        ],
    }
}
复制代码

六、将所有CSS提取到一个文件中

用SplitChunks插件去实现。SplitChunks插件的具体用法可以看我另一篇文章:Webpack之SplitChunks插件用法详解

module.exports = {
    optimization: {
        splitChunks: {
            cacheGroups: {
                styles: {
                    name: 'styles',
                    test: /\.css$/,
                    chunks: 'all',
                    enforce: true,
                },
            },
        },
    },
}
复制代码

执行webpack命令,打包生成的文件如下如下所示

文章分类
前端
文章标签