webpack4 CSS 패키징 및 압축을 구현하는 방법

이번에는 webpack4 css 패키징 및 압축 구현 방법과 webpack4 css 패키징 및 압축 구현 시 주의 사항이 무엇인지 알아보겠습니다.

// webpack.config.js
module.exports = {
  // webpack会根据mode进行对Js打包，development压缩，production下面自动压缩，亲测没有问题
  mode: 'development' // production
}

그런데 js와 분리된 CSS를 어떻게 패키징하나요?

하루동안 관련 글을 찾아보니 웹팩이 CSS압축을 자동으로 지원한다는 이야기도 있고, 플러그인이 필수라는 이야기도 있습니다. 네, 플러그인입니다

optimize-css-assets. -webpack-plugin
그러나 공식 Npm 웹사이트를 읽어야 합니다

⚠️ webpack v3 이하의 경우optim-css-assets-webpack-plugin@3.2.0을 사용하세요. 0 버전 이상에서는 webpack v4를 지원합니다.

방법은 먼저 설치optim-css-assets-webpack-plugin

const optimizeCss = require('optimize-css-assets-webpack-plugin');
module.exports = {  
  .....,
  //
  plugins: [
    new optimizeCss({
      assetNameRegExp: /\.style\.css$/g,
      cssProcessor: require('cssnano'),
      cssProcessorOptions: { discardComments: { removeAll: true } },
      canPrint: true
    }),
  ],
  // 这个还待研究，看字面意思是优化的意思
  optimization: {
    // minimize: true,
    minimizer: [new optimizeCss({})],
  }  
}

저도 위의 다른 사람들이 작성한 코드를 읽었기 때문에 'cssnano'도 설치해야 합니다. package

그런 다음 프로덕션 환경 패키징 명령을 실행하면 아 그렇군요. CSS는 실제로 압축되어 있습니다. 하지만 js를 보면 압축되지 않았습니다. 위 코드가 추가되지 않으면 js는 실제로 기본적으로 압축되어 있으므로. 인터넷에서 해결 방법을 찾아보니 webpack4에서는 프로덕션 모드만 설정하면 된다고 하는데, 이제 문제가 생겼습니다. 압축 후 CSS JS를 압축할 수 없어서 uglify-webpack-plugin 플러그인을 계속 설치했습니다. 시도해 보려고 JS를 압축했습니다

드디어 문제가 해결되었음을 확인했습니다. 제 경험이기도 하고 우발적 사고이기도 했지만, 좋은 해결책이 있다면 긍정적인 메시지를 남겨주세요. 함께 계획하고, 진행하고, 웹팩을 철저하게 이해해보세요!

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

Node.js Buffer 사용에 대한 자세한 설명

JS를 사용하여 로컬 카메라를 호출하는 방법

위 내용은 webpack4 CSS 패키징 및 압축을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!