webpack4가 CSS를 처리하는 방법에 대해 이야기합시다

Webpack4 처리 CSS

머리말: Webpack 처리 CSS는 매우 기본적인 주제입니다. 단지 webpack4에서는 CSS 브라우저 호환성 문제를 해결하기 위해 autoprefixer를 사용할 때 이전과 다른 함정이 있을 뿐입니다. 그래서 나는이 지식에 대해 자세히 쓸 것입니다.

1. 필수 종속성

• style-loader: html 페이지의 스타일 태그에 CSS 파일을 삽입합니다. 참고: https://www.webpackjs.com/loa...
• css-loader: js로 가져온 CSS 파일을 구문 분석합니다. 참고: https://www.webpackjs.com/loa...
• less-loader: CSS 전처리 언어를 구문 분석하는 경우 해당 로더를 사용해야 합니다. 참고: https://www.html.cn/doc/webpa...

• postcss-loader: 프로젝트에서 작성한 CSS를 후처리:

  • CSS를 다음에서 작동할 수 있는 추상화로 구문 분석합니다. JavaScript 구문 트리 구조(Abstract Syntax Tree, AST),
  • 플러그인을 호출하여 AST를 처리하고 결과를 얻습니다.
• autoprefixer: 다양한 브라우저에 맞게 CSS 앞에 접두사를 붙이는 postcss-loader용 플러그인입니다.

참고: postcss-loader는 영화 및 TV 후반 제작 프로세스와 같은 기능을 하며 모든 원본 파일을 결합한 다음 플러그인을 사용하여 특수 효과를 추가하고 최종적으로 완성된 제품을 출력합니다. autoprefixer 플러그인은 postcss-loader로 구문 분석된 AST에서 사후 처리를 수행합니다.

둘째, 종속성 설치

npm install --save-dev less-loader less style-loader css-loader postcss-loader autoprefixer

셋, 더 적은 테스트 파일 style.less 생성

#world{
  display: flex;
}

넷째, 기본 파일 index.js에 style.less 가져오기

import './style.less';

다섯, 웹팩 구성 파일 webpack.config.js

module: {
    rules: [
        {
            test: /\.less$/,
            use: [
                'style-loader',
                {loader: 'css-loader', options: { importLoaders: 1 } },
                'less-loader',
                'postcss-loader'
            ]
        },
    ]
}

css-loader의 importLoaders: 1은 매우 중요한 설정입니다. 이렇게 하면 구문 분석된 모든 CSS가 하나의 스타일 태그에만 삽입됩니다. 이 구성이 없으면 각각의 새 CSS 파일이 삽입될 때 새 스타일 태그가 생성됩니다. 일부 브라우저에서는 스타일 태그 수에 제한이 있습니다.

여섯째, postcss 구성 파일 postcss.config.js를 생성하고 autoprefixer 플러그인을 도입합니다.

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

일곱째, package.json에 브라우저 목록 browserslist를 추가합니다. 이것이 서문에서 언급한 함정입니다. 그렇지 않으면 autoprefixer가 작동하지 않습니다

{
 "scripts": {
  "build": "webpack",
  "dev": "webpack-dev-server  --mode development"
 },
 "browserslist": [
  "defaults",
  "not ie < 11",
  "last 2 versions",
  "> 1%",
  "iOS 7",
  "last 3 iOS versions"
 ]
}

Eight, 명령을 실행하세요

npm run build

Nine, CSS 구문 분석이 성공합니다. 효과는 다음과 같습니다:

#world {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

권장 학습: "css 비디오 튜토리얼"

위 내용은 webpack4가 CSS를 처리하는 방법에 대해 이야기합시다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!