본문 바로가기
프론트엔드 개발환경

webpack 의 기본

by 안자바먹지 2021. 1. 5.
728x90

웹팩의 등장 배경

자바스크립트에서 문법 수준으로 모듈을 지원하기 시작한 것은 ES2015 부터이다. import 와 export 구문이 없었던 때는 어떻게 모듈을 구현했을까?

 

html 에서 로딩하기

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="src/math.js"/></script>
    <script src="src/app.js"/></script>
</body>
</html>
// math.js

function sum(a, b) {
  return a + b
}
// app.js
sum(1, 2)

 

위의 방법은 index.html 에서 모두 로딩이 된다. 그러므로 sum 같은 경우 전역변수가 오염될 여지가 다분하다. 다른 파일에서 sum 이란 이름을 사용하게 되면 충돌하기 때문이다.

 

 

IIFE 방식 (즉시실행 함수)

위에서 발생했던 문제를 예방하기 위해 스코프를 사용한다. 즉시실행 함수를 사용하여 외부에서 안으로 접근못하도록 하는 것이다. 

 

// math.js

var math = math || {}

(function () {
  function sum(a, b) {
    return a + b
  }
  math.sum = sum
})()

 

이렇게 전역으로 등록한 math를 사용하면 sum은 충돌하지 않을 것이다 (math.sum)

 

 

CommonJS

export 키워드 대신 require() 함수를 사용하여 모듈을 불러들이는 방식이다. 주로 Node.js 에서 사용하고 있다.

 

// math.js
exports function sum(a, b) { 
  return a + b
}
// app.js
const math = require('./math.js')
math.sum(1, 2)

 

 

ES2015 표준 모듈 시스템

import와 export를 사용하여 모듈을 내보내고 가져올 수 있다.

// math.js
export function sum(a, b) {
  return a + b
}
// app.js
import * as math from "./math.js"
math.sum(1, 2)

 

하지만 모든 브라우저에서 모듈 시스템을 지원하지는 않는다. IE는 모듈 시스템을 사용하지 못한다. 크롬 같은 경우 <script> 태그로 로딩할 때 type="module"을 사용해야 한다. 

 

<script type="module" src="src/app.js"/></script>

 

그럼 브라우저에 상관없이 모듈을 사용하려면 어떻게 해야할까? 이때 웹팩이 필요하다.

 

 

 

 

웹팩 설치

npm install -D webpack webpack-cli 

webpack과 webpack을 터미널에서 사용할 수 있게 하는 webpack-cli를 설치한다. 두 패키지는 개발할 때만 필요하므로 -D 커맨드를 추가하였음.

 

node_modules/.bin/webpack --help 명령어를 통해 웹팩의 도움말을 볼 수 있다.

Options:
  -c, --config <value...>    Provide path to a webpack configuration file e.g. ./webpack.config.js. 
  --config-name <value...>   Name of the configuration to use.
  -m, --merge                Merge two or more configurations using 'webpack-merge'.
  --env <value...>           Environment passed to the configuration when it is a function.
  --progress [value]         Print compilation progress during build.
  -j, --json [value]         Prints result as JSON or store it in a file.
  --entry <value...>         The entry point(s) of your application e.g. ./src/main.js.
  -o, --output-path <value>  Output location of the file generated by webpack e.g. ./dist/.
  -t, --target <value>       Sets the build target e.g. node.
  -d, --devtool <value>      Determine source maps to use.
  --no-devtool               Do not generate source maps.
  --mode <value>             Defines the mode to pass to webpack.
  --name <value>             Name of the configuration. Used when loading multiple configurations.  
  --stats [value]            It instructs webpack on how to treat the stats e.g. verbose.
  --no-stats                 Disable stats output.
  -w, --watch                Watch for files changes.
  --no-watch                 Do not watch for file changes.
  --watch-options-stdin      Stop watching when stdin stream has ended.
  --no-watch-options-stdin   Negative 'watch-options-stdin' option.

Global options:
  --color               Enable colors on console.
  --no-color            Disable colors on console.
  -v, --version         Output the version number of 'webpack', 'webpack-cli' and
                        'webpack-dev-server' and commands.
  -h, --help [verbose]  Display help for commands and options.

Commands:
  bundle|b [options]    Run webpack (default command, can be omitted).
  help|h                Display help for commands and options.
  version|v             Output the version number of 'webpack', 'webpack-cli' and
                        'webpack-dev-server' and commands.
  serve|s               Run the webpack dev server. To see all available options you need to        
                        install 'webpack-dev-server'.
  info|i [options]      Outputs information about your system.

To see list of all supported commands and options run 'webpack --help=verbose'.

Webpack documentation: https://webpack.js.org/.
CLI documentation: https://webpack.js.org/api/cli/.
Made with ♥ by the webpack team.

 

이 중 주로 사용하는 것은 아래와 같다.

  • --mode : 다음 옵션을 선택할 수 있다. "development", "production", "none" 개발,운영
  • --entry : 모듈의 시작점이라고 할 수 있다. 
  • --output-path : 엔트리를 통해서 모든 모듈을 합치고 결과물을 저장하는 경로를 설정

 

node_modules/.bin/webpack --mode development --entry ./src/app.js --output-path dist

명령어로 웹팩 설정을 하면 dist 폴더에 main.js 가 생긴것을 볼 수 있다.

 

 

그 후 index.html에서 src/app.js 가 아니라 dist/main.js 을 가리키도록 수정하고 module 프로퍼티는 지운다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="dist/main.js"/></script>
</body>
</html>

 

 

웹팩 설정 파일

웹팩을 설정값들을 매번 터미널에 입력하면 불편하기 때문에 webpack.config.js 로 웹팩 설정파일을 만들어서 관리할 수 있다. (--help 문서 참조)

 

// webpack.config.js

const path = require('path')

// node.js의 모듈 시스템
module.exports = {
  mode: 'development',
  entry: {
    main: './src/app.js', // 해당 명칭이 output의 [name] 변수에 동적으로 할당된다.
  },
  output: {
    path: path.resolve('./dist'), // node 의 path 모듈을 사용하여 절대경로를 넣어준다.
    filename: '[name].js',
  },
}

 

그 후 웹팩으로 코드를 번들링 하는 과정을 npm 명령어로 등록해보자. (build)

 

// package.json

{
  "name": "npm_sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.44.2",
    "webpack-cli": "^4.3.1"
  }
}

 

터미널에서 npm run build 를 입력하면 위에 입력했던 node_modules/.bin/webpack --mode development --entry ./src/app.js --output-path dist 명령어를 사용하지 않아도 webpack.config.js 파일을 읽어 간단하게 웹팩으로 빌드할 수 있다. 

 

 

 

 

로더

웹팩은 모든 파일을 모듈로 바라본다.(자바스크립트, stylesheet, 이미지, 폰트) 그러기 때문에 import 구문을 사용하면 자바스크립트 코드 안으로 가져올수 있다. 이것이 가능한 이유는 웹팩의 로더 때문이다. 로더는 타입스크립트 같은 다른 언어를 자바스크립트 문법으로 변환해주고, 이미지를 data URL 형식의 문자열로 변환 한다. 또한 CSS 파일을 자바스크립트에서 로딩할수 있도록 해준다. 

 

// my-webpack-loader.js

module.exports = function myWebpackLoader(content) {
  console.log(content)
  return content
}

// webpack.config.js

const path = require('path')

// node.js의 모듈 시스템
module.exports = {
  mode: 'development',
  entry: {
    main: './src/app.js', // 해당 명칭이 output의 [name] 변수에 동적으로 할당된다.
  },
  output: {
    path: path.resolve('./dist'), // node 의 path 모듈을 사용하여 절대경로를 넣어준다.
    filename: '[name].js',
  },
  // 로더는 module의 rules에 정의한다.
  module: {
    rules: [
      {
        test: /\.js$/, // 로더를 적용할 파일을 지정한다. (여기서는 모든 js파일에 대해서 적용)
        use: [path.resolve('./my-webpack-loader.js')], // 위 패턴에 해당하는 파일들에 사용할 로더를 명시
      },
    ],
  },
}

 

이렇게 자신이 만든 로더를 webapck.config.js 파일에 추가해줄 수 있다.

추가한 로더를 아래처럼 수정하면 모든 .js 파일에서 console.log가 alert로 변경되어 alert창이 뜨게 된다.

 

module.exports = function myWebpackLoader(content) {
  return content.replace('console.log(', 'alert(')
}

 

 

 

 

자주 사용하는 로더

css-loader

import './app.css'

웹팩의 로더를 사용하지 않으면 위의 코드가 정상적으로 돌아가지 않는다. es6의 import 구문을 사용하려면 app.css 가 모듈이 되어야 하는데 웹팩의 로더가 이를 가능하게 해준다. app.css 내용을 작성하고 npm run build로 확인을 해보면 

 

이처럼 웹팩이 css 읽다가 무슨말인지 모르기 때문에 에러를 던진 것이다. 그럼 css를 모듈화 해주는 css-loader 설치와 세팅 방법을 알아보도록 하겠다.

1. npm install css-loader 로 css-loader를 설치한다.

2. webpack.config.js 에 적용한다. 

// webpack.config.js

... 생략
module: {
    rules: [
      {
        test: /\.css$/, // 로더를 적용할 파일을 지정한다.
        use: ['css-loader'], // 위 패턴에 해당하는 파일들에 사용할 로더를 명시
      },
    ],
  },

다시 빌드를 돌리고 dist/main.js 를 확인해보면 app.css 에 작성한 내용을 볼 수 있다.

 

 

 

stlye-loader

css-loader를 적용하고 브라우저 화면을 띄워보면 아직 작성한 css가 적용이 되지 않았다. 그 이유는 모듈로 변경된 스타일 시트는 DOM에 추가되어야만 브라우저가 해석 할 수 있다고 한다. css-loader를 사용하면 자바스크립트 코드로만 변경되었고 아직 돔에 적용되지 않아서 브라우저에 보이지 않는 것이다.

 

이 때 style-loader를 사용하면 자바스크립트로 변경된 스타일을 동적으로 돔에 추가해준다. 즉 css-loader와 style-loader는 한 세트라고 보면 된다. 

 

npm install style-loader 로 설치후 웹팩 설정에 로더를 추가해 준다. 

 

// webpack.config.js

... 생략
module: {
    rules: [
      {
        test: /\.css$/, 
        use: ['style-loader', 'css-loader'], // 적용되는 순서는 뒤에서부터 앞으로 적용된다.
      },
    ],
  },

단, 주의할 점은 로더가 적용되는 순서는 뒤에서부터 앞으로 적용되므로 css-loader를 뒤에 위치시켰다. 

 

 

file-loader

/* app.css */

body {
  background-color: url(bridge.png);
}

 

별도의 로더 설정 없이 app.css 에서 body의 백그라운드를 해당 파일로 가져오려고 하면 에러가 발생한다. 

npm install file-loader 로 설치후 마찬가지로 웹팩 설정에 로더를 추가해 준다.

 

// webpack.config.js

module: {
    rules: [
      {
        test: /\.css$/, 
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.png$/,
        use: ['file-loader'],
      },
    ],
  },

 

하지만 브라우저로 index.html을 띄워보면 이미지를 제대로 로딩하지 못한다.

 

개발자도구로 확인해보면 파일 명이 해시값으로 변경되었고, 웹팩으로 빌드했기 때문에 빌드한 이미지 파일은 dist 폴더 아래로 이동하여 찾을 수 없다. 그래서 fild-loader 옵션을 수정해 주어야 한다.

 

// webpack.config.js

module: {
    rules: [
      {
        test: /\.css$/, 
        use: ['style-loader', 'css-loader'], 
      },
      {
        test: /\.png$/,
        loader: 'file-loader',
        options: {
          publicPath: './dist', // prefix를 아웃풋 경로로 지정한다.
          name: '[name].[ext]?[hash]', // 파일명 형식
        },
      },
    ],
  },

publicPath 옵션은 file-loader가 처리하는 파일을 모듈로 사용할 때 경로 앞에 추가되는 문자열이다. ouput에 설정한 dist 폴더에 이미지 파일을 옮길것 이기 때문에 ./dist로 설정했다. 파일을 사용하는 측에서는 'bridge.png'를 'dist/bridge.png'로 변경하여 사용할 것이다.

 

name 옵션은 로더가 파일을 output에 복사할 때 사용하는 파일 이름이다. 기본적으로 설정된 해시값을 쿼리스트링으로 옮겨서 'bridge.png?1230947821309421374cf0a58f26aeaeff12ea9e60d18fb036' 형식으로 파일을 요청하도록 했다.

 

그렇다면 이미지뒤에 해시값을 사용하는 이유는 무엇일까?

브라우저는 html과 여기 포함된 정적리소스(js, css, image, font)등을 추가로 다운로드 한다. 이렇게 브라우저에 다운로드 하는 파일들은 캐시 정책을 따른다.  만약 24시간동안 캐시하도록 설정되어있고 24시간 이내에 해당 사이트에 접속하면 서버에 리소스 요청을 하지 않는다. 즉 이미 다운받은 파일을 이용하는 것이다. 

 

즉 웹팩에서 빌드한 파일을 서버에 배포 했는데 캐시 정책에 의해 브라우저가 이미 다운로드한 이전 버전의 파일을 사용하게 되면 새로 배포한 파일을 볼수 없기 때문이다. 브라우저는 파일명 + 쿼리스트링 (uri 라고 한다.) 기준으로 캐시하기 때문에 쿼리스트링이 변경되면 새로운 파일이라고 판단한다. 이렇게 되면 브라우저에 다운로드한 파일을 무시하고 서버로 새로운 요청을 보낸다.

 

 

url-loader

만약 사용하는 이미지의 개수가 많다면 네트워크 리소스 사용부담이 있고 사이트 성능에 영향을 줄 수도 있다. 만약 한 페이지에서 작은 이미지를 여러개 사용한다면 이미지를 Base64로 인코딩하는 Data URI Scheme를 이용하는 방법이 더 낳다. url-loader는 이러한 처리를 자동화 해주는 로더이다.

 

npm install url-loader 로 설치하고 웹팩 설정을 추가한다.

 

// webpack.config.js

module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'url-loader',
        options: {
          publicPath: './dist',
          name: '[name].[ext]?[hash]', 
          // url-loader가 위 파일들을 처리 할 때 2kb 미만일 경우 url-loader로 처리하고 그 이상일 경우 file-laoder가 실행한다.
          limit: 2000, 
        },
      },
    ],
  },

 

이제 2kb 미만인 파일들은 main.js 안에서 확인할 수 있을 것이다. 

 

 

 

 

 

플러그인

로더가 파일 단위로 처리하는 반면, 플러그인은 번들된 결과물 단위로 처리한다. 주로 번들된 자바스크립트를 난독화 하거나 특정 텍스트를 추출하는 용도로 사용한다. 

 

웹팩 문서인 webpack.js.org/contribute/writing-a-plugin/ 를 보면 커스텀 플러그인 작성 방법에 대해 나와있다.

실습을 위해 my-webpack-plugin.js 를 만들어서 실습해보도록 하겠다. 

 

// my-webpack-plugin.js

class MyWebPackPlugin {
  apply(compiler) {
    // 작업이 완료되는 (done) 시점에 로그를 찍는 코드
    compiler.hooks.done.tap('My Plugin', (stats) => {
      console.log('MyPlugin: done')
    })
  }
}

module.exports = MyWebPackPlugin

 

이렇게 작성하였으면 webpack.config.js 에 로더와 마찬가지로 등록을 해 주어야 한다.

 

// weback.config.js

const path = require('path')
const MyWebPackPlugin = require('./my-webpack-plugin')

module.exports = {
  mode: 'development',
  entry: {
    ... 생략
  },
  output: {
    ... 생략
  },
  
  module: {
    ... 생략
  },
  plugins: [new MyWebPackPlugin()],
}

 

npm run build로 빌드된 결과를 확인해 보면 MyPlugin: done 이라는 문자열이 찍힌 것을 볼 수 있다.

 

파일은 여러개 지만 로그는 한 번만 찍힌것을 볼 수 있는데, 설명한 것 처럼 로더와 다르게 플러그인은 번들링된 결과물을 대상으로 동작하기 때문이다. 

 

그러면 어떻게 번들 결과에 접근할 수 있을까? 웹팩 내장 플러그인 BannerPlugin 코드를 참조해보자.

github.com/lcxfs1991/banner-webpack-plugin/blob/master/index.js

 

// my-webpack-plugin.js

class MyWebPackPlugin {
  apply(compiler) {
    // 작업이 완료되는 (done) 시점에 로그를 찍는 코드
    compiler.hooks.done.tap('My Plugin', (stats) => {
      console.log('MyPlugin: done')
    })
    
    // compiler.plugin() 함수로 후처리한다
    compiler.plugin("emit", (compilation, callback) => {
      const source = compilation.assets["main.js"].source()
      console.log(source)
      callback()
    })
  }
}

module.exports = MyWebPackPlugin

 

compiler.plugin() 함수의 두번째 인자 콜백함수는 emit 이벤트가 발생하면 실행되는 것으로 보인다. 번들된 결과는 compilation 객체에 들어있는데 compilation.assets['main.js'].source() 함수로 접근할 수 있다. 이를 실행하면 터미널에 번들링된 결과물을 확인할 수 있다. 

 

이것을 사용하여 번들 결과 상단에 배너를 추가하는 플러그인을 만들어 보도록 하겠다. 

 

// my-webpack-plugin.js

class MyWebPackPlugin {
  apply(compiler) {
    compiler.plugin('emit', (compilation, callback) => {
      const source = compilation.assets['main.js'].source()
      compilation.assets['main.js'].source = () => {
        const banner = [
          '/**',
          ' * 이것은 BannerPlugin이 처리한 결과입니다.',
          ' * Build Date: 2021-01-06',
          ' */',
          '',
        ].join('\n')
        return banner + '\n' + source
      }

      callback()
    })
  }
}

module.exports = MyWebPackPlugin

my-webpack.plugin.js 파일을 위와 같이 수정하고 빌드후 번들된 소스파일을 보면 주석이 달린것을 볼 수 있다.

 

 

 

 

 

자주 사용하는 플러그인

BannerPlugin

위에 커스텀으로 만든 MyPlugin과 비슷한것이 바로 BannerPlugin 이다. 번들된 결과물에 빌드 정보나 커밋 버전같은 것을 추가할 수 있다. BannerPlugin은 webpack에서 기본으로 제공하는 플러그인이다. 

 

// webpack.config.js

const path = require('path')
const webpack = require('webpack')

module.exports = {
  ... 생략
  plugins: [
    new MyWebPackPlugin(),
    new webpack.BannerPlugin({
      banner: '이것은 배너 입니다',
    }),
  ],
}

 

생성자 함수에 전달하는 옵션 객체의 banner 속성에 문자열을 전달하면 번들된 소스 상단에 해당 문자열이 주석처리되어 추가 된다. 

 

const MyWebPackPlugin = require('./my-webpack-plugin')
const path = require('path')
const webpack = require('webpack')
const childProcess = require('child_process')

module.exports = {
  ... 생략
  
  plugins: [
    new MyWebPackPlugin(),
    new webpack.BannerPlugin({
      banner: `
        Build Date : ${new Date().toLocaleString()}
        Commit Version: ${childProcess.execSync('git rev-parse --short HEAD')}
        Author: ${childProcess.execSync('git config user.name')}
      `,
    }),
  ],
}

 

빌드된 날짜나, git의 커밋버전, Author 등 추가정보를 추가하였는데, childProcess는 터미널 명령어를 실행시키는 라이브러리 이다. 

 

 

DefinePlugin

보통 어플리케이션은 개발환경과 운영환경으로 나누어서 운영한다. API주소도 개발과 운영이 다른 경우도 많다. 이렇게 같은 소스를 다른 두 환경에 배포하기 위해서는 환경 의존적인 정보를 소스가 아닌 곳에서 관리하는 것이 좋은데 웹팩의 DefinePlugin이 이 기능을 제공한다.

 

 

// webpack.config.js

plugins: [
    new webpack.DefinePlugin({}),
  ]

 

생성자에 빈 객체를 넘겨도 기본적으로 넣어주는 값이 있는데 바로 노드의 환경정보인 process.env.NODE_ENV 이다. 웹팩 설정의 mode에 설정한 값이 여기에 들어간다.

 

// webpack.config.js

plugins: [
    new webpack.DefinePlugin({
      TWO: '1+1', // 1+1의 값 2가 출력된다.
      SUMSTR: JSON.stringify('1+2'), // 1+2 문자열 자체가 출력된다.
      'api.domain': JSON.stringify('http://dev.api.domain.com'),
    }),
  ],

 

다른 값을 주고싶다면 이렇게 추가하면 되는데 '1+1' 라는 코드가 들어가므로 어플리케이션에서 console.log(TWO)를 확인해보면 해당 코드의 결과값인 2가 출력된다. 값 자체를 넘기고 싶다면 JSON.stringfy로 한번 감싸주면 된다.  또한 'api.domain' 처럼 객체형태로 넣어줄 수 있는데 이는 어플리케이션에서 console.log(api.domain) 으로 확인해 볼 수 있다.

 

 

HtmlWebpackPlugin

해당 플러그인은 webpack에서 지원하는 것은 아니고 써드파트 패키지 이다. 

HtmlWebpackPlugin은 HTML 파일을 후처리하는데 사용한다. 빌드 타임의 값을 넣거나 코드를 압축할수 있다.

 

npm install html-webpack-plugin 으로 설치하고 플러그인에 추가한다.

 

plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      templateParameters: {
        env: process.env.NODE_ENV === 'development' ? '(개발용)' : '',
      },
      minify:
        process.env.NODE_ENV === 'production'
          ? {
              collapseWhitespace: true, // 공백 제거
              removeComments: true, // 주석 제거
            }
          : false,
    }),
  ],

 

index.html 파일을 src 밑으로 옮기고 그 안에서 dist/main.js 불러오는 부분을 지우고 다시 빌드해보면 dist 폴더에 index.html 파일이 생긴것을 볼 수 있다. 뿐만아니라 안에 내용을 살펴보면 웹팩으로 빌드한 결과물을 자동으로 로딩하는 코드를 주입해 준다. 그래서 기존에 있던 dist/main.js 불러오는 부분을 지운 것이다.

 

 

또한 minify 옵션을 추가하여 html의 주석과 공백을 제거할 수 있다. (minify 옵션을 운영일 때만 적용하고 싶다면 위와 같이 설정하면 된다.)

 

 

 

CleanWebpackPlugin

이전 빌드 결과물을 제거해주는 플러그인 이다. 빌드의 결과물은 output 경로에 모이는데 과거 파일이 남아 있을 수도 있기 때문에 이 플러그인을 사용한다.

 

npm install clean-webpack-plugin 으로 설치한다.

 

// webpack.config.js

const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
  ... 생략
  plugins: [
    
    new CleanWebpackPlugin(),
  ],
}

 

 

 

MiniCssExtractPlugin

스타일시트가 많아지면 하나의 자바스크립트 결과물로 만드는 것이 부담이 될 수 있다. 그러기 때문에 번들 결과에서 스타일 시트 코드만 뽑아서 별도의 CSS 파일로 만들어 역할에 따라 파일을 분리하는 것이 좋다. 이 플러그인이 CSS를 별도 파일로 분리시켜주는 역할을 한다. 

 

npm install mini-css-extract-plugin 으로 설치한다.

 

const MyWebPackPlugin = require('./my-webpack-plugin')
const path = require('path')
const webpack = require('webpack')
const childProcess = require('child_process')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {

  ... 생략
  
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          // MiniCssExtractPlugin 를 사용하려면 로더에도 이렇게 추가해줘야 한다.
          process.env.NODE_EVN === 'production'
            ? MiniCssExtractPlugin.loader
            : 'style-loader',
          'css-loader',
        ],
      },
      
      ... 생략
      
    ],
  },
  plugins: [
    // 개발환경일땐 굳이 사용할 필요가 없음
    ...(process.env.NODE_ENV === 'production'
      ? [
          new MiniCssExtractPlugin({
            filename: '[name].css',
          }),
        ]
      : []),
  ],
}

 

위와같이 MiniCssExtractPlugin을 설정해주고, MiniCssExtractPlugin을 사용하기 위해선 로더에도 추가해 주어야 한다. 운영환경일 때에는 MiniCssExtractPlugin.loader를 사용하고 아닐 때에는 style-loader를 사용한다. 

728x90
저작자표시 비영리 변경금지

'프론트엔드 개발환경' 카테고리의 다른 글

autoprefixer  (0) 2021.05.10
Prettier  (0) 2021.01.12
ESLint  (0) 2021.01.12
바벨을 웹팩과 통합하기  (0) 2021.01.07
바벨 개념 및 사용법  (0) 2021.01.07

관련글

댓글

티스토리툴바