web-dev-qa-db-ja.com

Webpack extract-text-webpack-pluginおよびcss-loader minification

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内）で実行されるようですが、2つのファイルが結合されて最終的なstyles.cssに抽出される場合はそうではありません。

最終的なstyle.cssで縮小を実行するにはどうすればよいですか？したがって、出力は

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

optimize-css-assets-webpack-plugin を使用できます。これは、この正確な問題を解決するために作成されました。

plugins: [
    new ExtractTextPlugin("styles.css"),
    new OptimizeCssAssetsPlugin()
]
48
Alexandre Kirszenberg

Cssを縮小するには、webpackのCSSローダーに「最小化」オプションを使用できます。それは私の場合の問題を解決しました：

webpack.config.js

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

Paulの答えは、1.0.0 Minimizeの重大な変更で機能しなくなり、他のオプションはオプションから削除されました。

推奨される解決策は、 optimize-cssnano-plugin を使用することです。このプラグインは、optimize-css-assets-webpack-pluginよりもソースマップでうまく機能します。

例：

plugins: [
    new ExtractTextPlugin("styles.css"),
    new OptimizeCssnanoPlugin({
        sourceMap: nextSourceMap,
        cssnanoOptions: {
        preset: ['default', {
            discardComments: {
            removeAll: true,
            },
        }],
        },
    }),
]
0
Black