账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    在webpack配置中,用ExtractTextPlugin分离less,打包成css文件,然后css文件怎么进行压缩呢?
    52
    0
    const webpack = require('webpack');
    const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
    const ExtractTextPlugin = require("extract-text-webpack-plugin");
    //const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); 
    
    module.exports = {
        entry : {
            resetentry: __dirname + '/src/js/reset_entry.js',
        }, 
        output : {
            path: __dirname + '/out',
            filename: '[name].js',
        }, 
        module: {
            rules:[
                    {
                        test: /.less$/, 
                        use: ExtractTextPlugin.extract({
                            use:[
                                {loader:'css-loader'},
                                {loader:'less-loader'}
                            ],
                            fallback: 'style-loader',
                        })
                    },
                    {
                        test: /\.js$/,
                        loader: "babel-loader",
                        exclude:/node_modules/,
                        query:{
                            presets:[
                                require.resolve('babel-preset-es2015'),
                                require.resolve('babel-preset-stage-0'),
                            ]
                        }
                    },
                    {test: /.jpg|png|gif|svg$/, use: ['url-loader?limit=8192&name=./[name].[ext]']}, 
                ]         
        },
        plugins:[
            new UglifyJSPlugin(),
            new ExtractTextPlugin("[name].css"), 
            new webpack.ProvidePlugin({
                $: 'jquery', 
                jQuery: 'jquery', 
                'window.jQuery': 'jquery'
            }),
    //      new OptimizeCssAssetsPlugin({
    //        assetNameRegExp: /\.less$/g,
    //        cssProcessor: require('cssnano'),
    //        cssProcessorOptions: { discardComments: {removeAll: true}},
    //        canPrint: true,
    //      }),
        ]
    }

    我用optimize-css-assets-webpack-plugin这个插件,不知道哪里的原因。

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 风明尚 普通会员 1楼

      在webpack配置中,你可以使用ExtractTextPlugin来提取less文件的代码,并将其压缩为一个单独的css文件。

      以下是一个简单的配置示例:

      javascript module.exports = { //... plugins: [ new ExtractTextPlugin({ filename: 'style.css', 来源: 'styles' }) ] };

      在这个配置中,ExtractTextPlugin会将less文件的代码提取到一个名为style.css的文件中。这个文件的来源是styles,这意味着ExtractTextPlugin会将styles目录中的所有less文件都提取到style.css文件中。

      然后,你可以使用CSS压缩器,如CSSNano或UglifyJS来压缩这个CSS文件。例如,如果你使用CSSNano,你可以在CSS文件的末尾添加以下代码:

      javascript /* vendor.css */ @import url('./style.css');

      然后,你可以使用以下命令来压缩CSS文件:

      bash cssnano --watch --write --style --out-style style.css

      在这个命令中,--watch选项会监视文件的修改,--write选项会将更改保存到文件中,--style选项会将CSS文件的样式压缩,--out-style选项会将压缩后的CSS文件的样式设置为默认的CSS样式。

      如果你使用UglifyJS,你可以在CSS文件的末尾添加以下代码:

      javascript /* vendor.css */ @import url('./style.css');

      然后,你可以使用以下命令来压缩CSS文件:

      bash cssnano --out-style style.css

      在这个命令中,--out-style选项会将压缩后的CSS文件的样式设置为默认的CSS样式。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部