Webpack library build

🦿 Webpack library build

안녕하세요 TriplexLab입니다.
오늘은 webpack으로 library를 직접 만들 수 있는 환경 세팅에 관해서 이야기를 해보겠습니다.

본격적인 이야기를 들어가기 앞서 먼저 배경 이야기를 해보자면 npm에 있는 수많은 플러그인, 또는 라이브러리가 있는데...
그런 것들을 가져다가 사용할 때는 몰랐습니다... 정말 좋은 시대에서 우리가 개발을 하고 있구나라는 사실을... 어떻게 생각지도 못했던 라이브러기들을 미리 만들어 놓고 무료로 배포까지 해주셨다니... 정말 외국에 개발자들의 마인드를 보고 배우고 싶다...라는 생각이 듭니다.

그래서 저도 대단한 플러그인은 아니지만, 서비스를 만드는 과정에서 자주 쓰는 기능들을 나만의 플러그인(모듈)을 만들고 싶어졌습니다.
그래서 시작했고, 1년전 전 즘인가 어설프게 만들긴 했습니다. (2021/04 말경에 첫 배포)👇👇 

triplexlab

근데 계속 만들다 보니 욕심이 나서, 나중에 TypeScript를 배워서 제대로 만들어야겠다.라는 생각에 일단 지금은 보류해놓은 상태입니다.

이렇게 공부 삼아 직접 모듈식으로 기능들을 만들다 보니, 머릿속에 javascript es6 class의 개념이 완전히 잡혔습니다.
뿐만 아니라, 이미 npm에 있는 플러그인을 내 모듈로 가져와서 또 커스텀마이징이 가능 해서 너무 신기하고, 가슴이 먹차 올랐습니다.

마치 이제 뭐든지 만들수 있겠는데? 라는 착각이 들었네요.. 여튼 이야기는 여기까만 하고...

저같이 직접 플러그인, 혹인 라이브러리를 직접 기능을 만들어 보고 싶으신 분들을 위해서 
webpack default setting module 환경세팅을 소계하겠습니다.

🎯 webpack default setting module 환경세팅

(webpack.config.js 파일에 주석으로 설명을 해놓긴 했지만 부족한것들이 있습니다.
그것들은 직접 검색해서 찾아보는것도 좋을것 같습니다.)

//webpack.config.js

const path = require('path'); //path 라이브러리 불러오기
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
// const { merge } = require('webpack-merge');
require('@babel/polyfill');
module.exports = {
    resolve: {
        extensions: ['.js', '.css', '.scss'], //확장자 명칭을 생략 가능한 것들을 설정해준다!
        alias: { // 별칭을 써줌으로써 절대경로를 설정해준다!
            '@': path.join(__dirname, 'src'),
        },
    },
    entry: {
      app: [
        '@babel/polyfill',
        path.join(__dirname, '/src/app.js')
      ]
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
                  presets: [['@babel/preset-env', { modules: false, useBuiltIns: 'entry', corejs: 3, shippedProposals: true, targets: { browsers: ['last 3 versions', 'ie >= 11'] } }]],
                  plugins: ['@babel/plugin-proposal-class-properties', '@babel/plugin-proposal-private-methods'],
                },
            },
            {  // scss 또는 css loader
                test: /\.s[ac]ss$/i,
                exclude: /node_modules/,
                use: ExtractTextPlugin.extract({
                    fallback:'style-loader',              // style-loader는 읽어들인 내용을 html에 추가해줍니다. 2)
                    use: ['css-loader', 'sass-loader']    // css-loader와 sass-loader는 app.js에서 css 내용을 읽어들이고, 1)
                })
            },
            { // images css에서 background-image 속성 loader
                test: /\.(png|svg|jpe?g|gif)$/,
                use: [
                    {
                      loader: 'file-loader',
                      options: {
                          name: '[path][name].[ext]',
                      }
                    }
                ]
            },
            { // fonts loader
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    {
                      loader: 'file-loader',
                      options: {
                        name: '[name].[ext]',
                        outputPath: 'fonts/',
                        publicPath: url => `../fonts/${url}`
                      }
                    }
                ]
              }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(), //이전 dist 빌드 폴더안에 파일을 지워주는 플러그인
        new ExtractTextPlugin({
            filename: '[name].css',
            disable: false,
            allChunks: false,
        }),
        new CopyPlugin({
            patterns: [
                { from: 'src/assets', to: '' }
            ]
        })
    ],
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].js',
        libraryTarget: 'umd', // 라이브러리 타겟 설정
        library: 'md', // 라이브러리 네임스페이스 설정
    }
}

webpack.config.js파일에서 설정해 놓은 대로 @시작점으로 절대경로 파일들을 import 합니다.
참고로 css, scss들은 from 명칭을 작성할 필요없이, 그냥 불러오기만 하면 됩니다.

// src/app.js

import Storage from '@/js/Storage/index'
import '@/styles/index';

export {Storage}

package.json 파일에서 의존하는 모듈들 버전을 관리하고 있으니 참고 하시면 됩니다.

이제 이것을 사용하는 방법은 간단 합니다. 먼저 Node 버전을 v14로 해주셔야 합니다.

저는 Node.js v14.17.6으로 진행했습니다.

다음 명령어로 모든 의존 모듈들을 불러오면 됩니다.

// 티미널
npm install

그리고 다음 명령어로 실행을 시키면 됩니다. 
그럼 dist라는 디렉토리가 생성될것이고, 그것이 개발용 배포 파일입니다.

// 티미널
npm run watch

그리고 examples이라는 파일이 있는데 거기가서 index.html파일을 서버를 돌려 실행시키면
dist라는 기능 개발했던 코드를 new md라는 인스턴스로 생성해서 접근 할수가 있습니다. 

무슨 말인지 모르겠다라고 생각하는 분들은 그냥 제가 파일 첨부해드리는것 다운로드 받아서,
examples라는 폴더에서 index.html파일을 실행시켜 콘솔을 확인해보시면 이해할수 있습니다.

🎯 webpack default setting module 파일제공

webpack-default-setting-module.zip

0.01MB