ExtractTextPlugin 是甚麼?

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

齊帥

2021-07-13 17:22:37

老師請問一下,下面的用法跟這裡的用法有甚麼差別嗎?

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

同学你好,在你的另一个问题下已经做出了解答,https://class.imooc.com/course/qadetail/296201  快去查看下吧~

0

0 学习 · 15276 问题

查看课程