Webpack을 사용하여 독립된 컴포넌트를 Window에 있는 기존 모듈로 내보내기

Table of Contents

Toggle

Title: 웹팩을 이용하여 기존 모듈을 윈도우에 내보내기

소개

이 블로그 포스트에서는 웹팩을 사용하여 격리된 컴포넌트를 가정된 전역 객체에 내보내는 방법에 대해 알아보겠습니다. 목표는 기존 구조를 파괴하지 않고 격리된 모듈을 전역 객체에 추가하는 것입니다. 다양한 접근 방식을 살펴보고 웹팩의 설정 옵션을 활용한 해결책을 제공하겠습니다.

문제 이해하기

시작하기 전에 예제 코드를 살펴보고 문제를 이해해봅시다. 코드는 MyApp라는 전역 객체/모듈이 있다고 가정하고, 여기에는 다른 모듈이 연결되는 something이라는 속성이 있습니다.

var MyApp = window.MyApp || {};
MyApp.something = MyApp.something || {};

목표는 기존 구조를 변경하지 않으면서 격리된 모듈을 해당 구조에 연결하는 것입니다. 그 다음 웹팩이 이를 어떻게 도와줄 수 있는지 알아보겠습니다.

웹팩 설정

먼저 웹팩의 출력을 내보낼 모듈을 가정된 전역 객체로 설정해봅시다. 이를 위해 output.library 옵션을 사용할 수 있습니다. 단일 값을 할당하는 대신에 중첩된 구조를 나타내기 위해 배열을 사용할 수 있습니다:

output: {
  library: ['MyApp', 'something'],
  libraryTarget: 'var'
}

이 설정을 사용하면 웹팩은 window.MyApp.something 객체를 생성하거나 이미 존재하는 경우에는 모듈을 window.MyApp에 추가할 수 있습니다.

완전한 웹팩 설정

var webpack = require('webpack');
var UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');

module.exports = {
  target: 'web',
  context: __dirname + '/src/',
  entry: './main.jsx',
  output: {
    path: __dirname + '/dist/',
    filename: 'app.bundle.js',
    library: ['MyApp', 'something'],
    libraryTarget: 'var',
  },
  resolve: {
    extensions: ['', '.js', '.jsx'],
  },
  module: {
    loaders: [
      { test: /\.jsx$/, loader: '../node_modules/jsx-loader' },
    ],
  },
  externals: {
    react: {
      root: 'React',
      commonjs: 'react',
      commonjs2: 'react',
      amd: 'react',
    },
  },
  plugins: [
    new UglifyJsPlugin(),
  ],
};

결론

이 블로그 포스트에서는 웹팩을 사용하여 격리된 컴포넌트를 내보내고 가정된 전역 객체에 연결하는 방법을 설명했습니다. 이를 위해 필요한 설정 옵션을 통해 웹팩 설정을 상세히 살펴보았습니다.

output.library 옵션을 배열로 설정하여 가정된 전역 객체의 중첩 구조를 나타내면, 격리된 모듈을 기존의 MyApp 또는 MyApp.something에 문제없이 통합할 수 있습니다.

이제 웹팩을 사용하여 모듈을 효과적으로 관리하고 전역 네임스페이스 충돌을 피할 수 있습니다. 즐거운 코딩하세요!

참고 자료 : 

reactjs