ExtractTextPlugin是什麼

来源:9-5 webpack如何抽离压缩css文件

齊帥

2021-07-13 17:15:23

 老師請問使用extract-text-webpack-plugin也可以處理CSS的問題嗎?這個方法又是甚麼呢?



const ExtractTextPlugin = require('extract-text-webpack-plugin');
module: {
        rules: [
            //react(jsx)語法的處理
            {
                test: /\.m?jsx$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env', 'react']
                    }
                }
            },
            //css文件的處理
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
            },
            //sass文件的處理
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'sass-loader']
                })
            },
            //圖片的配置
            {
                test: /\.(png|jpg|gif)$/i,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 8192,
                        name: 'resource/[name].[ext]'
                    },
                }, ],
            },
            //字體圖標的配置
            {
                test: /\.(eot|svg|ttf|woff|woff2|otf)$/i,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 8192,
                        name: 'resource/[name].[ext]'
                    },
                }, ],
            },
        ]
    },
 plugins: [
        //處理html文件
        new HtmlWebpackPlugin({
            template: './src/index.html',
            favicon: './favicon.ico'
        }),
        //獨立css文件
        new ExtractTextPlugin("css/[name].css"),
        //提出公共模塊
        new webpack.optimize.CommonsChunkPlugin({
            name: 'common',
            filename: 'js/base.js'
        })
    ],




写回答

1回答

好帮手慕慕子

2021-07-13

同学你好,对于你的问题解答如下:

1、extract-text-webpack-plugin 与当前视频中讲解的mini-css-extract-plugin插件是功能类似。

2、因为webpack4+版本不再支持extract-text-webpack-plugin这个插件,使用mini-css-extract-plugin插件来替代它,所以可以简单的理解为mini-css-extract-plugin是extract-text-webpack-plugin升级版。

两者之间的差别,结合官网介绍简单了解下即可,如下:

http://img.mukewang.com/climg/60ed67f0090c3b6e08410442.jpg

综上可知:

webpack4以上的版本,需要使用mini-css-extract-plugin抽离css文件

webpack4以下的版本,需要使用extract-text-webpack-plugin抽离css文件

祝学习愉快~

0

0 学习 · 15276 问题

查看课程