이번에는 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 도서:
위 내용은 webpack4 CSS 패키징 및 압축을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!