Webpack 5 - 2022에서 Pug 및 Sass를 사용하는 방법 🐶

이 게시물에서 HMR이 완전히 작동하는 Webpack 5에서 Sass & Pug.js(이전에는 JADE로 알려짐)를 구성하는 데 필요한 단계별 절차를 확인하세요.

👨🏻‍💻 Webpack 5로 프로젝트 초기화:

1- 프로젝트에 대한 package.json을 만듭니다.yarn init -y
2- CLI 및 dev-server와 함께 webpack을 설치합니다.yarn add webpack webpack-cli webpack-dev-server -D

/* ☝🏽 The -D flag install these as a devDependency. 
Since webpack already compiles & bundle our app for build. */

🎨 Webpack에서 Sass 및 Pug.js 구성:

1- 필요한 Sass 종속성을 설치합니다.yarn add sass sass-loader css-loader -D
2- 필요한 Pug 종속성을 설치합니다.yarn add pug pug-plugin -D
3- 'pug-plugin'을 사용하면 모든 pug 파일에 이미지, 스타일, 글꼴 및 스크립트를 삽입할 수 있습니다. href 또는 src 경로 앞에 "require()"를 사용하십시오.


4- 모든 것이 작동하도록 하려면 프로젝트의 루트에 "webpack.config.js"파일을 만들고 다음 설정을 추가하십시오.

//webpack.config.js
const path = require('path');
const PugPlugin = require('pug-plugin');

module.exports = {
  entry: {
    index: './src/views/index.pug',
    about: './src/views/about.pug'
    //☝🏽 Insert your PUG HTML files here
  },
  output: {
    path: path.join(__dirname, 'dist/'),
    publicPath: '/',
    filename: 'assets/js/[name].[contenthash:8].js'
    //☝🏽 Output filename of files with hash for unique id
  },
  plugins: [
    new PugPlugin({
      pretty: true,
      //☝🏽 Format HTML (only in dev mode)
      extractCss: {
        filename: 'assets/css/[name].[contenthash:8].css'
      }
    })
  ],
  module: {
    rules: [
      {
        test: /\.pug$/,
        loader: PugPlugin.loader
        //☝🏽 Load Pug files
      },
      {
        test: /\.(css|sass|scss)$/,
        use: ['css-loader', 'sass-loader']
        //☝🏽 Load Sass files
      },
      {
        // To use images on pug files:
        test: /\.(png|jpg|jpeg|ico)/,
        type: 'asset/resource',
        generator: {
          filename: 'assets/img/[name].[hash:8][ext]'
        }
      },
      {
        // To use fonts on pug files:
        test: /\.(woff|woff2|eot|ttf|otf|svg)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'assets/fonts/[name][ext][query]'
        }
      }
    ]
  },
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist')
    },
    watchFiles: {
      paths: ['src/**/*.*', 'assets/scss/**/*.*'],
      //☝🏽 Enables HMR in these folders
      options: {
        usePolling: true
      }
    }
  },
  stats: 'errors-only'
  //☝🏽 For a cleaner dev-server run
};

5- 항목(module.exports 내부)에 Pug 파일을 추가하면 준비가 된 것입니다! (나중에 더 많은 파일을 추가할 수 있습니다). 🎆 HMR은 1개 이상의 Js 파일을 가져오는 모든 Pug와 'src' 또는 'assets' 폴더 내의 모든 Sass 파일에서 작동합니다❗ 🙌🏼

📚 마지막으로 중요한 것은 다음과 같습니다.

You can customize your webpack.config.js and delete or insert anything you like. The code up here it's based on the pug-plugin instructions.