labels description
typescript
utils
webpack
웹팩 설정 뮤테이터.

webpack 구성 개체를 둘러싼 작은 래퍼. 이 래퍼는 연결 가능한 방식으로 웹팩 구성을 변경하는 데 도움이 됩니다. 일반적으로 플러그인 추가 또는 항목 추가와 같은 구성에서 공통 작업을 수행하는 것은 설탕 구문입니다. 또한 배열에 대한 추가 및 앞에 추가 및 개체에 대한 재정의, 무시, throw(충돌의 경우)와 같은 다양한 옵션을 제공합니다.

mutator.raw 에 액세스하여 원시 구성 자체를 변경할 수도 있습니다 .

'./config-mutator'에서 { WebpackConfigMutator } 가져오기; 'json-formatter-js'에서 JSONFormatter 가져오기;

() => {
  const config = new WebpackConfigMutator({});
  class MyPlugin {
    apply(compiler) {}
  }

  const cssRule = {
    test: /\.css$/,
    exclude: /\.module\.css$/,
    use: ['style-loader', 'css-loader'],
  };

  config
    .addEntry('./entry1.js')
    .addEntry('./entry2.js', { position: 'prepend' })
    .addPlugin(new MyPlugin())
    .addAliases({ react: 'custom-react-path' })
    .addTopLevel('output', { publicPath: { publicPath: 'my-public-path' } })
    .addModuleRule(cssRule);

  const dataContent = new JSONFormatter(config.raw, 2);
  return (
    <div>
      <div
        ref={(nodeElement) => {
          nodeElement && nodeElement.replaceWith(dataContent.render());
        }}
      />
    </div>
  );
};