Webpack의 스타일 처리 공유

이 글은 주로 webpack의 스타일 처리에 대한 간략한 논의를 소개하고 있는데, 편집자는 꽤 괜찮다고 생각해서 지금부터 공유하고 참고용으로 제공하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

js에 스타일 파일을 도입할 수 있습니다

require('myStyle.css')

이제 이 코드를 구문 분석하는 데 도움이 되는 해당 웹팩 로더를 도입해야 합니다.

css-loader with style-loader

먼저 CSS 파싱을 처리하기 위해 css-loader와 style-loader를 소개할 수 있습니다. 그 중 css-loader는 CSS 파일을 파싱하는 데 사용되며, style-loader는 CSS 파일을 구문 분석하는 데 사용됩니다. CSS 파일은 js 파일에 포함되어 있습니다.

var path = require('path')
module.exports = {
 context: path.join(__dirname, 'src')
 entry: './',
 module: {
 rules: [
  {
  test: /\.css$/,
  include: [
   path.join(__dirname, 'src')
  ],
  use: ['style-loader', 'css-loader']
  }
 ]
 },
 output: {
  path: path.join(__dirname, 'dist'),
  filename: '[name].bundle.[hash].js'
 }
}

위 코드에서 구문 분석 순서는 오른쪽에서 왼쪽입니다. 먼저 css-loader를 사용하여 CSS 파일을 구문 분석한 다음 스타일을 사용합니다. -loader를 사용하여 js 코드에 삽입합니다.

less를 사용하여 스타일을 작성하는 경우 먼저 less-loader를 사용하여 스타일 파일을 CSS 파일로 컴파일한 다음 계속해서 css-loader 및 style-loader를 사용해야 합니다. 또한 로더 로더는 다음 -loader를 생략할 수 있습니다. 따라서 위의 코드는

module: {
 rules: [
 {
  test: /\.css$/,
  include: [
  path.join(__dirname, 'src')
  ],
  use: ['style', 'css', 'less']
 }
 ]
}

로 축약할 수 있습니다. 일반적으로 테스트 환경에서는 CSS를 더 빠르게 컴파일하기 위해 이 방법을 더 자주 사용하게 되지만, 이렇게 컴파일된 js 파일은 상대적으로 크기가 커지게 됩니다. 사용되는 프로덕션 환경에는 적합하지 않습니다.

별도의 파일로 컴파일

위의 접근 방식은 CSS와 js를 함께 패키징하여 실제 요청 수를 줄이지만, 컴파일된 js 파일이 상대적으로 크기 때문에 대역폭을 낭비합니다. 따라서 우리는 CSS 파일을 독립된 파일로 컴파일하기 위해 extract-text-webpack-plugin 플러그인을 사용합니다. CDN을 사용하여 이 파일을 노드 서버에 푸시하거나 필요에 따라 적절하게 로드하여 고객 요청 링크를 최적화하고 페이지 응답을 가속화할 수 있습니다.

var path = require('path'),
 ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = {
 context: path.join(__dirname, 'src'),
 entry: './',
 module: {
 rules: [{
  test: /\.css$/,
  include: [
  path.join(__dirname, 'src')
  ],
  use: ExtractTextPlugin.extract({
  fallback: 'style',
  use: 'css'
  })
 }]
 },
 output: {
  path: path.join(__dirname, 'dist'),
  filename: '[name].bundle.[hash].js'
 },
 plugins: [
 new ExtractTextPlugin('[name].css')
 ]
}

위 코드를 통해 extract-text-webpack-plugin 플러그인을 사용하여 src 디렉터리의 모든 CSS 파일을 처리합니다. 먼저 css-loader 플러그인을 사용하여 CSS 코드를 구문 분석합니다. .파싱이 실패하면 스타일 로더 플러그인을 사용하고 마지막으로 dist 디렉터리에 해당 js 파일을 생성합니다

이전 브라우저와 호환됩니다

과거에는 스타일을 작성할 때 일부 스타일이 필요했습니다. -webkit-과 같이 브라우저마다 다른 접두사를 사용합니다. 이제 빌드 도구가 있으므로 더 이상 이러한 접두사에 주의할 필요가 없습니다. 빌드 도구는 자동으로 이러한 접두사를 추가합니다.

웹팩의 경우 이러한 작업을 수행하려면 로더나 플러그인을 사용해야 한다고 자연스럽게 생각합니다. 확인 결과, autoprefixer-loader가 폐기되어 더 이상 유지 관리되지 않는 것으로 나타났습니다. posscss

postcss를 사용하는 것이 좋습니다. js에서 CSS 스타일을 변환하는 데 사용되는 js입니다. 플러그인은 다른 플러그인과 함께 사용해야 합니다. 이는 babel6과 동일하며 코드 구문 분석 기능을 제공하지 않습니다.

여기서 스타일에 접두사를 추가하려면 autoprefixer 플러그인이 필요합니다. 먼저 모듈을 다운로드하세요.

npm install -D autoprefixer

그런 다음 webpack을 구성할 수 있습니다

var autoprefixer = require('autoprefixer')
module.exports = {
 ...
 module: {
 loaders: [
  ...
  {
  {
   test: /\.css$/,
   loader: ExtractTextPlugin.extract(["css", "postcss"])
  },
  }
 ]
 },
 postcss: [autoprefixer()],
 ...
}

추출된 스타일 파일을 보면 접두사가 추가된 것을 확인할 수 있습니다

a {
 display: flex;
}
/*compiles to:*/
a {
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex
}

또한 autoprefixer는 다음에 따라 다른 버전을 생성할 수도 있습니다. 대상 브라우저 버전 접두사 수입니다. 예를 들어 대부분의 애플리케이션 사용자가 최신 버전의 브라우저를 사용하는 경우 다음과 같이 구성할 수 있습니다.

postcss: [autoprefixer({ browsers: ['last 2 versions'] })] 생성된 스타일은 약간 다르거나 위의 예

a {
 display: flex;
}
/*compiles to:*/
a {
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
}

스타일 압축

코드를 압축합니다. js 코드와 css 코드를 모두 압축할 수 있는 webpack 내장 플러그인 UglifyJsPlugin을 사용할 수 있습니다.

plugins: [
 ...
 new webpack.optimize.UglifyJsPlugin({
 compress: {
  warnings: false
 }
 }),
 ...
]

사실 CSS 코드를 압축한다고는 할 수 없습니다. 본질적으로 js 코드를 압축한 후 이 코드를 CSS 파일로 출력하는 것입니다.

CommonsChunkPlugin을 사용하여 공통 코드 추출

우선 여러 항목이 있을 때 CommonsChunkPlugin이 사용된다는 점을 분명히 해야 합니다. 즉, 여러 항목 파일이 있는 경우 이러한 항목 파일에는 일부 공통 코드가 있을 수 있으며, 이러한 공통 코드는 별도의 파일로 추출됩니다. 이것을 이해하는 것이 매우 중요합니다. (뭔가 이해하는 데 시간이 오래 걸렸네요 윽~~~)

여러 항목에 동일한 CSS 파일이 필요한 경우 CommonsChunkPlugin을 사용하여 이러한 공통 스타일 파일을 독립적인 스타일 파일로 추출할 수 있습니다.

module.exports = {
 entry: {
 "A": "./src/entry.js",
 "B": "./src/entry2.js"
 },
 ...
 plugins: [
 new webpack.optimize.CommonsChunkPlugin({
 name: "commons", filename: "commons.js"
 }),
 ...
 ]
}

물론 여기에서는 공통 CSS만 추출되는 것이 아니라, 공통 js 코드가 있으면 commons.js에도 추출됩니다. 여기서 흥미로운 현상이 발생합니다. 추출된 CSS 파일의 이름은 매개변수의 name 값이 되고, js 파일 이름은 filename 값이 됩니다.

CommonsChunkPlugin은 모든 청크에 공통적인 모듈만 추출하는 것 같습니다. 다음과 같은 종속성이 있는 경우

// entry1.js
var style1 = require('./style/myStyle.css')
var style2 = require('./style/style.css')

// entry2.js
require("./style/myStyle.css")
require("./style/myStyle2.css")

// entry3.js
require("./style/myStyle2.css")

플러그인을 사용한 후에는 commons.css 파일이 전혀 생성되지 않는 것을 확인할 수 있습니다.

처음 두 청크의 공통 코드만 얻으면 이렇게 할 수 있습니다

module.exports = {
 entry: {
 "A": "./src/entry.js",
 "B": "./src/entry2.js",
 "C": "./src/entry3.js"
 },
 ...
 plugins: [
 new webpack.optimize.CommonsChunkPlugin({
 name: "commons", filename: "commons.js", chunks: ['A', 'B']
 }),
 ...
 ]
}

관련 권장 사항:

webpack 외부 사용 방법

webpack을 사용하여 리소스 방법 및 기술을 최적화하는 방법

webpack 성능 최적화

위 내용은 Webpack의 스타일 처리 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!