Webpack提取文本Webpack插件和CSS加载程序最小化

Webpack

前端梅

2020-04-07

我在最小化extract-text-webpack-plugin输出的css文件时遇到问题 

/* webpack.config.js */
...
loader: [{test: /\.css$/, loader: ExtractTextPlugin.extract('css?minimize')}]
...
plugins: [new ExtractTextPlugin("styles.css")]
...

/* test.js */
require('./file1.css')

/* file1.css */
@import './file2.css';
body {color: green;}
body {font-size: 1rem;}

/* file2.css */
body {border: 1px solid;}
body {background: purple;}

/* the output styles.css */
body{color:green;font-size:1rem}body{border:1px solid;background:purple}

在生成的styles.css中，有2个body标签。缩小似乎是在文件内执行的（在file1.css之内和file2.css之内），但是当两个文件合并并提取到最终的styles.css中时却没有。

如何在最终的style.css中进行缩小？所以输出是

body{color:green;font-size:1rem;border:1px solid;background:purple}

第4105篇《Webpack提取文本Webpack插件和CSS加载程序最小化》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
十三小卤蛋 2020.04.07

您可以使用为解决此确切问题而创建的optimize-css-assets-webpack-plugin。

plugins: [
    new ExtractTextPlugin("styles.css"),
    new OptimizeCssAssetsPlugin()
]
小胖 2020.04.07

对于CSS缩小，您可以将Webpack的CSS加载器与“ minimize”选项一起使用。它解决了我的问题：

webpack.config.js

...
module: {
   rules: [
      {
         test: /\.css$/,
         use: [{
            loader: "css-loader",
            options: {
               minimize: true
            }
         }
      },
   ]
},
...

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android