Plugin 사용

:raising_hand: 개인적인 Webpack 학습 및 공부 내용을 기록하기 위한 포스트입니다.

1. 플로그인 설정

우리는 다양한 플러그인들을 다양한 방법으로 개발에 사용하고 있다.

대부분의 플러그인들은 우리가 하는 개발을 조금 더 편하게하고 기본기능은 보존한채 추가적인 방향으로 바꿔서 편리하게 사용할 수 있게 하고 있다

이처럼 플러그인을 사용하는 방법도 알아두면 좋을것 같다.

이전에 modules 에서 loader 를 사용하여 css, style loader 를 직접 사용하는 방법 대신 Plugin 을 사용하여 가져와 보았다.

모듈을 사용하려면 아래와 같은 형태로 작성하여야 한다.

var path = require("path");
var MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  mode: "none",
  entry: "./index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [{ loader: MiniCssExtractPlugin.loader }, "css-loader"],
      },
    ],
  },
  plugins: [new MiniCssExtractPlugin()],
};

플러그인은 결과물의 정보를 변형해서 제공한다.

플러그인을 적용하여 build 를 하게 되면 dist 파일 내 bundle.js 외 추가적으로 main.css 가 build 된 것을 볼 수 있다.

image

image

하지만 실행해보면 css 가 적용되지 않는다. 이는 html 소스를 보면 이유를 알 수 있다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>hippo 실습</title>
  </head>

  <body>
    <header>
      <h3>Webpack 실습</h3>
    </header>
    <div>
      <!-- 웹팩 빌드 결과물이 잘 로딩되면 아래 p 태그의 텍스트 색깔이 파란색으로 표시됨 -->
      <p>이 글이 css 내용을 import 하여 파란색 style 이 적용됨</p>
    </div>
    <!-- 웹팩의 빌드 결과물을 로딩하는 스크립트 -->
    <script src="./dist/bundle.js"></script>
  </body>
</html>

우리는 bundle.js 를 불러와 로딩하여 css 를 불러오게 하였지만 base.css 가 main.css 로 결과물이 분리가 되었으므로 적용이 되지 않았고 적용하기 위해 link 태그를 이용하여 main.css 를 연결해 주어서 적용할 수 있다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>hippo 실습</title>
    <link rel="stylesheet" href="./dist/main.css" />
  </head>

  <body>
    <header>
      <h3>Webpack 실습</h3>
    </header>
    <div>
      <!-- 웹팩 빌드 결과물이 잘 로딩되면 아래 p 태그의 텍스트 색깔이 파란색으로 표시됨 -->
      <p>이 글이 css 내용을 import 하여 파란색 style 이 적용됨</p>
    </div>
    <!-- 웹팩의 빌드 결과물을 로딩하는 스크립트 -->
    <script src="./dist/bundle.js"></script>
  </body>
</html>

이처럼 분리하기 위해 모듈을 사용한다는것이 논점이 아니고 모듈을 사용하게 되면 다양한 방식으로 결과물을 도출할 수 있다 정도로 기억해놓으면 좋을 것 같다.

참고사이트 (Plugin)

https://joshua1988.github.io/webpack-guide/concepts/plugin.html

https://webpack.js.org/plugins/

참고사이트 (Loaders)

https://webpack.js.org/loaders/

You may also enjoy