오류

$ npx webpack --config webpack.config.js
assets by status 1.07 KiB [cached] 1 asset
runtime modules 663 bytes 3 modules
cacheable modules 85 bytes
  ./src/loader.js 46 bytes [built] [code generated]
  ./src/loader.css 39 bytes [built] [code generated] [1 error]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

ERROR in ./src/loader.css
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
CssSyntaxError

(2:7) /home/cloudcoke/my/react/230227/practice/webpack_practice/src/loader.css Unknown word

  1 | 
> 2 |       import API from "!../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";
    |       ^
  3 |       import domAPI from "!../node_modules/style-loader/dist/runtime/styleDomAPI.js";
  4 |       import insertFn from "!../node_modules/style-loader/dist/runtime/insertBySelector.js";
 @ ./src/loader.js 1:0-22

webpack 5.75.0 compiled with 1 error and 1 warning in 214 ms

원인

webpack.config.js

const path = require("path");

module.exports = {
  entry: "./src/loader.js",
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["css-loader", "style-loader"],
      },
    ],
  },
  output: {
    filename: "loader_output.js",
    path: path.join(__dirname, "dist"),
  },
};

• webpack.config.js에서 module.rules.use 부분을 ["css-loader", "style-loader"]로 작성하니 오류가 발생했다.
• webpack loader는 오른쪽에서 왼쪽으로(또는 아래에서 위로)평가 / 실행되기 때문에 style-loader가 먼저 실행이 되고 css-loader가 실행이 되게 된다.
• style-loader는 HTML 문서에 CSS 스타일을 주입하는 로더이고 css-loader는 CSS 파일을 해석하고 JavaScript 모듈로 변환하는 것을 담당한다.
• 위 순서대로라면 HTML 문서에 CSS 스타일을 주입하고 CSS 파일을 해석해 JavaScript 모듈로 변환하게 된다.
• 만들어지지 않은 CSS 스타일을 주입하려고 하다보니 오류가 난 것으로 보인다.

해결

const path = require("path");

module.exports = {
  entry: "./src/loader.js",
  module: {
    rules: [
      {
        test: /\.css$/,
        // use: ["css-loader", "style-loader"],
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  output: {
    filename: "loader_output.js",
    path: path.join(__dirname, "dist"),
  },
};

• webpack.config.js에서 module.rules.use 부분을 ["style-loader", "css-loader"]로 순서를 바꿔주면 동작한다.
• 이렇게 되면 css-loader로 CSS 파일을 JavaScript 모듈로 변환하고 style-loader로 HTML 문서에 스타일을 적용하게 된다.

참고

webpack 공식 문서 - Loaders