웹팩에서 CSS 스타일을 추출하는 방법

이번에는 webpack에서 css 스타일을 추출하는 방법과 webpack에서 css 스타일을 추출할 때 주의사항이 무엇인지 보여드리겠습니다. 다음은 실제 사례입니다.

npm install extract-text-webpack-plugin --save-dev
# for webpack 2
npm install --save-dev extract-text-webpack-plugin
# for webpack 1
npm install --save-dev extract-text-webpack-plugin@1.0.1

먼저 프로젝트의 루트 디렉터리에 진입한 후, 위의 명령어를 실행하여 플러그인을 설치합니다. 플러그인 설치가 완료되면 다음으로 해야 할 일은 webpack에 플러그인을 도입하는 것입니다. .config.js

const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
 module: {
  rules: [
   {
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
     fallback: "style-loader",
     use: "css-loader"
    })
   }
  ]
 },
 plugins: [
  new ExtractTextPlugin("styles.css"),
 ]
}

const ExtractTextPlugin = require('extract-text-webpack-plugin');
// Create multiple instances 
const extractCSS = new ExtractTextPlugin('stylesheets/[name]-one.css');
const extractLESS = new ExtractTextPlugin('stylesheets/[name]-two.css');
module.exports = {
 module: {
  rules: [
   {
    test: /\.css$/,
    use: extractCSS.extract([ 'css-loader', 'postcss-loader' ])
   },
   {
    test: /\.less$/i,
    use: extractLESS.extract([ 'css-loader', 'less-loader' ])
   },
  ]
 },
 plugins: [
  extractCSS,
  extractLESS
 ]
};

플러그인에는 세 가지 매개변수 의미가 있습니다. 차이점은 다음과 같습니다

1. use: 파일을 컴파일하는 데 어떤 종류의 로더가 필요한지 나타냅니다. 소스 파일이 .css이므로 CSS를 선택합니다. -loader

2. fallback: 컴파일 후 CSS 파일을 추출하는 데 사용되는 로더

3. publicfile: 프로젝트 경로를 덮어쓰고 CSS 파일의 파일 경로를 생성하는 데 사용됩니다

이 기사의 사례를 읽은 후 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

ElTableColumn 콘텐츠 맞춤 설정 방법

작은 프로그램을 개발하고 페이지를 공유한 후 홈페이지로 돌아갑니다

위 내용은 웹팩에서 CSS 스타일을 추출하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!