CSS 파일을로드하고 최적화하도록 webpack을 구성하는 방법은 무엇입니까?

Question

첫 페이지에는 전역 CSS 스타일로로드 할 CSS 파일 인 "느슨한"CSS 파일 (그 @imports 다른 CSS 파일)이 있습니다. 대지. 사이트 자체가 개편되고 있지만 전체 모듈 로딩 시스템을 수행 할 준비가되지 않았기 때문에 현재로서는 클라이언트가 먼저 방문 할 index.html과 동일한 기능을 제공합니다.

Webpack을 사용하여 전역 CSS를 가져 와서 PostCSS 및 기타 플러그인을 통해 최적화 할 수 있기를 원합니다. 하지만 webpack은 실제 자바 스크립트 기반 엔트리 포인트 만 좋아합니다.

webpack이 글로벌 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); 
     }); 
});