Advanced entry

Multiple file types per entry

JavaScript의 스타일에 import를 사용하지 않는 애플리케이션(싱글 페이지 애플리케이션 혹은 다른 이유로인해)에서 CSS 및 JavaScript와 기타 파일에 대해 각각 별도의 번들을 얻기 위해 엔트리에 값 배열을 사용하여 다른 유형의 파일을 제공할 수 있습니다.

예를 들어 보겠습니다. 홈과 계정을 위한 두 가지 페이지 유형이 있는 PHP 애플리케이션이 있습니다. 홈 페이지는 다른 레이아웃을 갖고 있고, 나머지 애플리케이션(계정 페이지)과는 공유할 수 없는 JavaScript가 있습니다. 홈 페이지를 위해 애플리케이션 파일에서 home.js와 home.css를 출력하고, 계정 페이지를 위해 account.js와 account.css를 출력하려고 합니다.

home.js

console.log("home page type");

home.scss

// 홈 페이지의 개별 스타일

account.js

console.log("account page type");

account.scss

// 계정 페이지의 개별 스타일

Webpack은 CSS를 자체적으로 추출하므로 sass-loader만 필요합니다. 규칙에 CSS module 타입을 지정하면 나머지는 webpack이 처리합니다.

webpack.config.js

export default {
  mode: process.env.NODE_ENV,
  entry: {
    home: ["./home.js", "./home.scss"],
    account: ["./account.js", "./account.scss"],
  },
  output: {
    filename: "[name].js",
    cssFilename: "[name].css",
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ["sass-loader"],
        type: "css/auto",
      },
    ],
  },
  experiments: {
    css: true,
  },
};

위의 구성으로 webpack을 실행하면 다른 출력경로를 지정하지 않았기 때문에 ./dist로 출력됩니다. ./dist 디렉터리는 이제 4개의 파일이 포함됩니다.

• home.js
• home.css
• account.js
• account.css