extract-text-webpack-plugin 사용 및 설치 정보

이 글은 주로 extract-text-webpack-plugin의 사용법과 설치를 자세하게 소개하고 있습니다. 내용이 꽤 좋아서 참고용으로 올려드리겠습니다.

extract-text-webpack-plugin 이 플러그인의 주요 목적은 CSS 스타일을 추출하고 js의 패키징 스타일로 인해 발생하는 페이지 스타일 로딩 장애를 방지하는 것입니다. 먼저 이 플러그인의 설치 방법을 소개하겠습니다.

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

먼저 프로젝트의 루트 디렉터리에 진입한 후, 위의 명령어를 실행하여 플러그인을 설치합니다. 플러그인이 설치되면 다음으로 해야 할 일은 플러그인을 도입하는 것입니다. in in 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 중국어 홈페이지를 주목해주세요!

관련 추천:

webpack 스타일 로딩 구현 원리

Webpack의 CSS 모듈 혼합 방법

위 내용은 extract-text-webpack-plugin 사용 및 설치 정보의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!