使用 “mini-css-extract-plugin” 提取css到单独的文件

一、前言

我们在使用webpack构建工具的时候，通过style-loader，可以把解析出来的css通过js插入内部样式表的方式到页面中，插入的结果如下：

<style>

.wrapper {

  width:100%;

  height:50px;

}

.container {

  width:1200px;

  margin:0 auto;

}

...

</style>

如果不想使用这种方式，想用外部样式表的方式，那应该怎么做呢？

二、使用插件

这里有两个插件可以用，extract-text-webpack-plugin和mini-css-extract-plugin,使用之后，就可以把css提取到单独的文件。通过配合html-webpack-plugin插件的使用，生成的html就会自动引入css文件啦，开心。

/* 这是提取css的文件，main.css */

.index-wrapper-qpZko {

    width: 220px;

    height: 50px;

}

...

<!-- 这是通过‘html-webpack-plugin’生成的html，会自动加入提取出来的公共css文件 -->

<link href="../main.css?9310f73f2ea21a1d0717" rel="stylesheet"></head>

通过extract-text-webpack-plugin插件

在这里，extract-text-webpack-plugin不是重点，所以只介绍一下该插件需要注意的几个点：

如果是默认添加，不指定版本，则添加该插件只支持webpack 3
如果是需要需要添加其他webpack版本的支持，需要特别指定版本

# for webpack 4

npm install --save-dev extract-text-webpack-plugin@next

# for webpack 3

npm install --save-dev extract-text-webpack-plugin

# for webpack 2

npm install --save-dev extract-text-webpack-plugin@2.1.2

# for webpack 1

npm install --save-dev extract-text-webpack-plugin@1.0.1

接下来，来看看mini-css-extract-plugin插件，这个是官方推荐的。

通过mini-css-extract-plugin插件

mini-css-extract-plugin插件也是用来提取css到单独的文件的，该插件有个前提条件，只能用于webpack 4及以上的版本，所以如果使用的webpack版本低于4，,那还是用回extract-text-webpack-plugin插件。

直接来吧，优点啥的，自己上GitHub看看哈。

添加依赖

npm install --save-dev mini-css-extract-plugin

webpack配置

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

module.exports = {

    plugins: [

        new MiniCssExtractPlugin({

            filename: "[name].css",

            chunkFilename: "[id].css"

        })

    ],

    module: {

        rules: [

            {

                test: /\.css$/,

              use: [

                  MiniCssExtractPlugin.loader,

                  "css-loader"

              ]

            }

        ]

    }

}

这里还是要提醒一下，如果只有一个入口filename写不写硬编码都没关系，因为就只有一个入口，但如果有多个入口，那就不能使用硬编码了，不然后面入口生成的css文件会覆盖前面生成的。这是我之前在extract-text-webpack-plugin踩过的坑。

三、最后

是的，到此，mini-css-extract-plugin的基本使用就这么些了，要看更多的使用，还是看官方介绍哈。

好了，继续研究其他CSS相关的知识。rem、postcss、sass、less、...

秒客网