webpack 빌드 - 독립 library로 만들기

 

독립 library로 만들기

https://webpack.kr/guides/author-libraries/    

webpack에 대한 기본적인 내용

 

예제

package.json

"scripts": {
  "build:alpha": "cross-env REACT_APP_PROFILES=alpha npm-run-all webpack-module react-build",
  "build:real": "cross-env REACT_APP_PROFILES=real GENERATE_SOURCEMAP=false npm-run-all webpack-module react-build"
},

• npm-run-all로 [react-build와, 별도 library를 만들기 위한 webpack-module] 두 작업 모두 실행

 

webpack-module.config.js

const path = require('path')
const webpack = require('webpack')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
    // 엔트리 파일 설정
    entry: './src/module/myModule.js',
    output: {
        filename: 'myModule.js',
        path: path.resolve(__dirname, './dist/js'),
    },
    // 번들링 모드 설정
    mode: 'production',
    plugins: [
        // cross-env 환경 변수 등록/관리 설정
        new webpack.EnvironmentPlugin({
            REACT_APP_PROFILES: 'real'
        }),
        new CleanWebpackPlugin({
            cleanAfterEveryBuildPatterns: ['*.LICENSE.txt']
        })
    ],
    module: {
        rules: [
            {
                test: /\.(js|mjs|jsx|ts|tsx)$/,
                loader: 'babel-loader',
                options: {
                    presets: ["@babel/preset-env"]
                }
            }
        ]
    }
}

• browserslist는 .browserslistrc에 따로 기입
• babel 설정은 .babelrc.json이나 babel.config.json으로 옮겨도 됨
• 디버깅은 번들링 모드 변경해서. 참고 링크