在webpack配置中,用ExtractTextPlugin分离less,打包成css文件,然后css文件怎么进行压缩呢?

发布于 2022-09-06 20:26:21 字数 1912 浏览 16 评论 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这个插件,不知道哪里的原因。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

书信已泛黄 2022-09-13 20:26:21

执行npm run build不就打包了吗?

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文