Webpack4 구성 Loader

1.Module

module 모듈을 어떻게 처리하는지 설정합니다. 모듈의 값은 하나의 대상이고 자주 사용하는 값은 noParse rules입니다.그 중에서 noParse는 어떤 자원을 해석할 필요가 없는지 지정하고 컴파일 성능을 향상시키는 데 쓰인다.rules는 여러 개의 규칙을 정의하는 데 사용되며, 이 규칙들은 대응하는 모듈에 일치하는 다음에 대응하는 모듈에 지정한loader를 적용한다. rules는 하나의 수조를 수신하고, 수조는 rule 대상을 저장한다.
rule 대상에서 자주 사용하는 속성:test,use,include,exclude,loader,loaders,options,enforce...
간단한 활용 사례:

const path = require('path');
module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist'), //  node path 
  },
  // 1.Webpack  modules   
  module： {
    // 2. ， 
   	noParse: () => {
      return /jquery|chartjs/.test(content);  
    },
    // 3. ， loader    
    rules: [
    	{
            // 4. 
            test: '/\.js$/',
            // 5.use loader，  loaders
            use: [
                
            ]
            //....
            //....
        }
    ]
    
  }  
};

2. Loader 구성

rules 구성 모듈의 읽기 및 해석 규칙은 일반적으로 Loader를 구성하는 데 사용됩니다.유형은 각 Rule에서 파일 일부를 처리하는 방법을 설명하는 배열입니다.한 항목rules을 구성할 때는 다음과 같은 방법을 사용합니다.

조건 일치: test, include, exclude 세 가지 설정 항목을 통해 Loader가 규칙을 적용할 파일을 명중시킨다.

규칙 적용: 선택한 파일에 대해 use 설정 항목을 통해 Loader를 적용합니다. 하나의 Loader만 적용하거나 뒤에서 앞으로 이동하는 순서대로 Loader 그룹을 적용하고 각각 Loader에 매개 변수를 전달할 수 있습니다.

리셋 순서: 한 그룹의 로더의 실행 순서는 기본적으로 오른쪽에서 왼쪽으로 실행되며 enforce 옵션을 통해 로더의 실행 순서를 맨 앞이나 맨 뒤로 할 수 있습니다.

const path = require('path');
module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist'), //  node path 
  },
  // 1.Webpack  modules   
  module： {
    // 2. ， loader    
    rules: [
    	{
            // 3. 
            test: '/\.css$/',
            // 4. loader, loader， css-loader
            use: [
               'style-loader', 
    		   'css-loader'
            ]
            //....
            //....
        }
    ]
    
  }  
};

use: ['style-loader','css-loader']의 전체 쓰기는use: [{loader:'style-loader'}, {loader:'css-loader'}]

3. css Loader 구성

새 항목

|-- package.json
|-- src
|   |       `-- common.js
|   |       `-- index.html
|   |       `-- main.css
|           `-- main.js
`-- webpack.config.js

package.json

{
  "name": "testcssloader",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },
  "author": "liujun",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^3.0.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.35.3",
    "webpack-cli": "^3.3.6"
  }
}

1.scripts 속성에 3개의 스크립트가 작성되었습니다. 그 중에서 dev에 대응하는 스크립트는 테스트 버전을 구축하는 것입니다.그중build에 대응하는 스크립트는 게시판을 구축하는 것입니다.사용 중인 개발 의존도는 스타일-loader css-loader 웹팩 웹팩-cli
webpack.config.js

const path = require('path');
module.exports = {
  entry: './src/main.js',
  output: {
    // 1.  bundle.js (  main.js )
    filename: 'bundle.js',
    // 2.  （ dist ）
    path: path.resolve(__dirname, './dist'), //  node path 
  },
  module: {
    rules: [
      {
        test: /\.css$/, //   .css  , test ， 
        use: ['style-loader', 'css-loader'],
      }
    ]
  }
};

use는 하나 를 받아서 에 저장할 수 있고 use의 별명은loaders이다.
예를 들면 다음과 같습니다.

use: ['style-loader', 'css-loader']  
	  
use: [{ loader:'style-loader',options:{} }, 'css-loader']
	  
use: [ { loader:'style-loader',options:{} }, {loader:'css-loader', options: {} } ]

use: ['style-loader', 'css-loader']  
 	 
loaders: ['style-loader', 'css-loader']
 	 
loaders: ['style-loader', { loader:'css-loader', options: {} }]

main.css

body {
  background-color: pink;
}

main.js

// 1.  CommonJS   showHelloWorld  
const showHelloWorld = require('./common.js');
// 2.  showHelloWorld  
showHelloWorld('Webpack ');
// 3.  CommonJS   CSS  
require('./main.css');

index.html

<html>
<head>
  <meta charset="UTF-8">
head>
<body>
<div id="app">div>

<script src="../dist/bundle.js">script>
body>
html>

로컬로 웹 패키지 설치 및 사용할loader

npm install [email protected]  --save-dev
npm install [email protected]  --save-dev
npm install [email protected]  --save-dev
npm install [email protected]  --save-dev

프로젝트의 루트 디렉터리에서 스크립트 구축 프로젝트를 실행합니다npm run dev
패키지 결과

|-- dist
|   |-- bundle.js
|-- node_modules
|-- package-lock.json
|-- package.json
|-- src
|   |-- common.js
|   |-- index.html
|   |-- main.css
|   `-- main.js
`-- webpack.config.js

패키지 이후bundle.js 파일의 일부:

 (function(modules) { // webpackBootstrap
 	// The module cache
 	var installedModules = {};

 	// The require function
 	function __webpack_require__(moduleId) {
 		// Execute the module function
 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
 		// Flag the module as loaded
 		module.l = true;
 		// Return the exports of the module
 		return module.exports;
 	}
 	// Load entry module and return exports
 	return __webpack_require__(__webpack_require__.s = "./src/main.js");
 })
({
  //  main.css   
  "./node_modules/css-loader/dist/cjs.js!./src/main.css":(function(module, exports, __webpack_require__) {

      eval("exports = module.exports = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\")(false);
// Module
exports.push([module.i, \"body {\\r\
  background-color: pink;\\r\
}\", \"\"]);


//# sourceURL=webpack:///./src/main.css?./node_modules/css-loader/dist/cjs.js");

   }),  

  "./node_modules/css-loader/dist/runtime/api.js":(function(module, exports, __webpack_require__) {
    ......
  }),

  "./node_modules/style-loader/lib/addStyles.js":(function(module, exports, __webpack_require__) {
    .....
  }),
      
  // style-loader  
  "./node_modules/style-loader/lib/urls.js":(function(module, exports) {
    ........
 }),

  // 2.    
  "./src/common.js":(function(module, exports) {
	.....
  }),
      
  // 3.css-loader  
  "./src/main.css":(function(module, exports, __webpack_require__) {
	.....
 }),

  // 1.     
  "./src/main.js":(function(module, exports, __webpack_require__) {

    eval("// 1.  CommonJS   showHelloWorld  \r
const showHelloWorld = __webpack_require__(/*! ./common.js */ \"./src/common.js\");\r
// 2.  showHelloWorld  \r
showHelloWorld('Webpack ');\r
// 3.  CommonJS   CSS  \r
__webpack_require__(/*! ./main.css */ \"./src/main.css\");

//# sourceURL=webpack:///./src/main.js?");

  })

});

index.html

<html><head>
  <meta charset="UTF-8">
    
<style type="text/css">body {
  background-color: pink;
}style>head>
<body>
<div id="app">div>

<script src="../dist/bundle.js">script>

body>html>

요약:
Loader는 파일 변환 기능의 통역사로 볼 수 있다. 설정에 있는 module.rules 그룹은 하나의 규칙을 설정하여 Webpack이 어떤 파일을 만났을 때 어떤 Loader를 사용하여 불러오고 변환하는지 알려준다.
위와 같은 설정은 Webpack이 .css로 끝나는 파일을 만났을 때 css-loader로 CSS 파일을 읽고 style-loader에 건네주고 CSS 내용을 자바스크립트에 주입하는 것을 알려준다.Loader를 구성할 때 주의해야 할 사항은 다음과 같습니다.

use 속성의 값은 Loader 이름으로 구성된 그룹이어야 하며 Loader의 실행 순서는 뒤에서 앞까지이다.

원본 다운로드

4. css Loader 매개변수 구성

css Loader Options에서 수신할 수 있는 매개변수:
Name
Type
Default
Description
url {Boolean\|Function} true
Enable/Disable url() handling
import {Boolean\|Function} true
Enable/Disable @import handling
modules {Boolean\|String\|Object} false
Enable/Disable CSS Modules and setup their options
sourceMap {Boolean} false
Enable/Disable Sourcemaps
importLoaders {Number} 0
Number of loaders applied before CSS loader
localsConvention {String} asIs
Setup style of exported classnames
onlyLocals {Boolean}
webpack.config.js

const path = require('path');
module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/, 
        //  ：loaders   use  , loaders use
        loaders: [
          {
            loader: 'style-loader',
            options: {
              
            }
          },
          {
            loader: 'css-loader',
            //   loader    
            options: {
              url: true,
              import: true
            }
          }
        ]
      }
    ]
  }
};

원본 다운로드 주소

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Webpack4 구성 Loader

모듈의 값은 하나의 대상이고 자주 사용하는 값은 noParse 和 rules입니다.그 중에서 noParse는 어떤 자원을 해석할 필요가 없는지 지정하고 컴파일 성능을 향상시키는 데 쓰인다.rules는 여러 개의 규칙...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

Webpack4 구성 Loader

1.Module

2. Loader 구성

3. css Loader 구성

4. css Loader 매개변수 구성

좋은 웹페이지 즐겨찾기