本文共 2803 字，大约阅读时间需要 9 分钟。

此插件在webpack中文官网的地址：

https://webpack.docschina.org/plugins/extract-text-webpack-plugin/

说明：

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

如果直接安装的话，会安装"extract-text-webpack-plugin": “^3.0.2”，执行webpack打包命令时会报错,因为extract-text-webpack-plugin支持webpack3.x版本的，面对webpack4.0版本，只能安装：

$ npm install extract-text-webpack-plugin@next --save-dev//会下载到4.0的//"extract-text-webpack-plugin": "^4.0.0-beta.0",

代码：

var path = require("path");// 1、引入ExtractTextWebpackPluginvar ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');module.exports = {
       entry: {
           index: "./src/index.js"    },    output: {
           path: path.resolve(__dirname, "dist"),        publicPath: "dist/",        filename: '[name].bundle.js',        chunkFilename: "[name].bundle.js"// 指定打包文件的块名称    },    module: {
           rules: [            {
                   test: /\.css$/,                use: ExtractTextWebpackPlugin.extract({
                        // 2、使用ExtractTextWebpackPlugin                    // 不提取的时候，使用什么样的配置来处理css                    // fallback是指编译后用什么loader编译代码                    fallback: {
                           loader: 'style-loader',                        options: {
                               //此属性一般是在style-loader中使用，                            //是指将多个css文件的代码统一合并到一个style标签中                            singleton: true                        }                    },                    use: [                         // 提取的时候，继续用下面的方式处理                        {
                               loader: 'css-loader',                            options: {
                                   //是否开启压缩功能                                minimize: true                            }                        }                    ]                })            }        ]    },    plugins: [        new ExtractTextWebpackPlugin({
                //3、 在plugins中配置属性            filename: '[name].min.css', // 配置提取出来的css名称            //true表示会把所有的css都提取出来，false只会把初始化的提取，默认是false            allChunks:false,            //                    })    ]}

extract-text-webpack-plugin多实例应用：

const ExtractTextPlugin = require('extract-text-webpack-plugin');// 创建多个实例const extractCSS = new ExtractTextPlugin('stylesheets/[name]-one.css');const extractLESS = new ExtractTextPlugin('stylesheets/[name]-two.css');module.exports = {
       module: {
           rules: [            {
                   test: /\.css$/,                use: extractCSS.extract(['css-loader', 'postcss-loader'])            },            {
                   test: /\.less$/i,                use: extractLESS.extract(['css-loader', 'less-loader'])            },        ]    },    plugins: [        extractCSS,        extractLESS    ]};

此外，extract-text-webpack-plugin插件的优缺点分析，

转载地址：https://blog.csdn.net/shenshulong/article/details/104127046 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！