Webpack4로 JS 라이브러리 빌드하기

// package.json
{
  "name": "webpack-test",
  "version": "1.0.15",
  "description": "",
  "main": "./index.js",
  "dependencies": {
    "@babel/polyfill": "^7.4.3", // 이게 있어야 syntax 관련 에러가 안난다.
    "jquery": "^3.4.1"
  },
  "devDependencies": {
    // 개발시에만 사용되는 의존성
    "@babel/core": "^7.4.3",
    "@babel/plugin-proposal-class-properties": "^7.4.0",
    "@babel/plugin-proposal-export-default-from": "^7.2.0",
    "@babel/plugin-proposal-export-namespace-from": "7.0.0",
    "@babel/preset-env": "7.1.0",
    "babel-loader": "^8.0.5",
    "webpack": "4.26.1",
    "webpack-cli": "3.1.2"
  },
  "scripts": {
    "build": "webpack -p"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

const process = require('process');

module.exports = {
  devtool: 'source-map', // 소스맵을 통해 디버깅이 가능하게 해준다.
  mode: 'production', // 배포 모드로 번들링을 하니까, 미니파이 된다.
  entry: { lib: './src/index.js' }, // lib라는 이름의 js 번들링 파일을 생성.
  module: {},
  plugins: [],
  optimization: {
    concatenateModules: true, // 성능 최적화
  },
  output: {
    path: process.cwd(), // js library가 떨어지는 현재 절대 경로
    library: 'MyLib', // library 이름
    libraryTarget: 'umd', // library module 형식 : AMD, CommonJS2 둘 다 지원
    umdNamedDefine: true, // 이 값이 설정 되어야 AMD 모듈의 이름이 지정된다.
    filename: '[name].min.js',
    sourceMapFilename: '[name].min.map',
  },
};

babel 설정 중 module에 아래 내용 추가

{
  loader: 'babel-loader',
  test: /\.js$/,
  exclude: [new RegExp(`${__dirname}/node_modules`)], // node_modules는 빌드 안한다. 코드에서 import 할 때 minify 된 버전을 사용해야 한다.
  options: {
    presets: [
      [
        '@babel/preset-env',  // 바벨 문법 지원 -> 최신
        {
          modules: false, // 트리 쉐이킹 관련 최적화 옵션
          debug: true,  // 디버깅 옵션 켜서 바벨 관련 경고를 확인한다.
          useBuiltIns: 'usage', // babel-polyfill 이 자동으로 포함된다.
        },
      ],
    ],
    plugins: [
      '@babel/plugin-proposal-class-properties',
      '@babel/plugin-proposal-export-default-from',
      '@babel/plugin-proposal-export-namespace-from',
    ],
  },
},

// @babel/plugin-proposal-class-properties
// https://babeljs.io/docs/en/babel-plugin-proposal-class-properties
class Bork {
  //Property initializer syntax
  instanceProperty = 'bork';
  boundFunction = () => {
    return this.instanceProperty;
  };

  //Static class properties
  static staticProperty = 'babelIsCool';
  static staticFunction = function() {
    return Bork.staticProperty;
  };
}

// @babel/plugin-proposal-export-default-from
// https://babeljs.io/docs/en/babel-plugin-proposal-export-default-from
export v from 'mod';

// @babel/plugin-proposal-export-namespace-from
// https://babeljs.io/docs/en/next/babel-plugin-proposal-export-namespace-from.html
export * as ns from 'mod';

// MyLib.js
import $ from 'jQuery/dist/jquery';

import App from './App';
import * as Utils from './Utils';
import * as Storage from './Storage';

const _mergeNamespaceAndModule = module => {
  console.warn('MyLib depends jquery. so we append jquery to window $ object.');
  console.warn('jquery:', $.fn.jquery);
  window.$ = $;

  return typeof window.MyLib === 'object'
    ? Object.assign({}, window.MyLib, module)
    : module;
};

export default _mergeNamespaceAndModule({
  version: '1.0.0',
  App,
  Utils,
  Storage,
});

// index.js
module.exports = require('./MyLib').default;

$ make build;
$ npx serve .