CSSファイルをロードして最適化するようにwebpackを設定する方法

Question

フロントページで、サイト。サイト自体は改造されていますが、モジュールローディングシステム全体を行う準備がまだ整っていないので、現時点では、クライアントが最初にヒットするindex.htmlに相当するものがあります。

webpackを使用してそのグローバルCSSを取得し、PostCSSやその他のプラグインを使用して最適化したいと考えています。しかしwebpackのように見えるのは、実際のjavascriptベースのエントリポイントだけです。

webpackにグローバルなCSSをエントリーポイントとして使用させ、そのグローバルなCSS内のすべての@imported CSSで構成された最適化されバンドルされたCSSを作成するのはどうでしょうか？

PostCSSのようなファイルをそのファイルで個別に実行する必要がありますか？ PostCSSを明示的に読み込み、webpackの設定内で実行してください。もしそうなら、それを実現する最も良い方法は何ですか？

Answer 1

今のところ私はPostCSSウェブサイトのJS APIサンプルを使用して、グローバルCSSで読み込んで通常のCSSに変換してフロントページに含めることができます。

（JS API sampleから）

const fs = require('fs'); 
const postcss = require('postcss'); 
const precss = require('precss'); 
const autoprefixer = require('autoprefixer'); 

fs.readFile('src/app.css', (err, css) => { 
    postcss([precss, autoprefixer]) 
     .process(css, { from: 'src/app.css', to: 'dest/app.css' }) 
     .then(result => { 
      fs.writeFile('dest/app.css', result.css); 
      if (result.map) fs.writeFile('dest/app.css.map', result.map); 
     }); 
});