Webpack "html-webpack-plugin" 사용팁

Webpack "html-webpack-plugin" 사용팁

html-webpack-plugin 을 이용하여, 작업하다보니 2가지 사용 방법이 궁금해졌다.

1번. html-webpack-plugin loader를 교체할 수 없나?

방법)

webpack.config.js

const HtmlPlugin = require('html-webpack-plugin');

...

const webpackConfigs = {
  plugins: [
    new HtmlPlugin({
      // 원래 코드
      // template: 'index.ejs',
      // 변경할 코드
      template: `${path.resolve(
        __dirname,
        'html-my-loader',
        'index.js'
      )}?param1&param2=foo&param3=bar!index.ejs`
    })
  ]
};

html-my-loader/index.js

const loaderUtils = require('loader-utils');

module.exports = function myLoader(source) {
  const options = loaderUtils.getOptions(this) || {};
  ...
  return source.replace(options.from, options.to);
};

2번. block 제거 혹은 string replace 와 같은 것을 선행적으로 적용하고 나서 처리되게 할 수 없나?

webpack.config.js

const HtmlPlugin = require('html-webpack-plugin');

...

const webpackConfigs = {
  module: {
    rules: [
      {
        enfore: 'pre',
        test: /(\.html|\.ejs)$/,
        use: [
          {
            loader: 'my-remove-string-block-loader',
            options: {
              param1: 'foo',
              param2: 'bar'
            }
          },
          {
            loader: 'my-string-replace-loader',
            options: {
              param1: 'foo',
              param2: 'bar'
            }
          }
        ]
      }
    ],
  },
  plugins: [
    new HtmlPlugin({
      template: 'index.ejs'
    })
  ]
};

실행 순서가, 등록된 순서로 작동하게 된다. 즉, "my-remove-string-block-loader" ==> "my-string-replace-loader" ==> "html-webpack-plugin"와 같은 순서로 작업이 진행된다.