웹팩은 스타일을 어떻게 처리해야 합니까?

이 글은 주로 webpack에 의한 스타일 처리를 소개하고 있습니다.

이 글에서는 webpack의 스타일 처리를 소개하고 모든 사람과 공유합니다. 자세한 내용은 다음과 같습니다.

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

require('myStyle.css')

이때 이를 구문 분석하는 데 도움이 되는 해당 webpack 로더를 도입해야 합니다. 암호.

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 파일을 구문 분석한 다음 style-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 스타일을 변환하는 데 사용되는 플러그인은 다른 플러그인과 함께 사용해야 합니다. 이는 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;
}

스타일 압축

webpack을 사용하여 코드를 압축할 수 있습니다. 내장 플러그인 UglifyJsPlugin은 js 및 css 코드를 모두 압축하는 데 사용됩니다.

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']
 }),
 ...
 ]
}

위는 제가 모든 사람을 위해 편집한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

노드의 child_process 모듈 정보(자세한 튜토리얼)

Node.js의 하위 프로세스 적용 시나리오는 무엇입니까

nodeJs의 파일 시스템 및 흐름에 대한 자세한 해석

위 내용은 웹팩은 스타일을 어떻게 처리해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!