Lit-setting-webpack5

안녕하세요 TriplexLab입니다.

오늘은 webpack5으로 Lit.js을 세팅하는 방법에 대해서 살펴보도록 하겠습니다.

먼저 Web Component에 대해서 궁금하신다면 아래 글을 참고하시고👇🏻👇🏻 이어서 글을 보시면 이해하는데 더 도움이 됩니다.

Web Component 정리

👉🏻Lit.js 소개

여러분 혹시 lit.js 라고 아시나요??

Playground – Lit

React, Vue 등등 SPA에서 사용하는때 처럼 html(element)을 컴포넌트화 시켜서 사용할수 있는 것중에 lit.js 라고 있습니다.
React와 lit을 비교한 글입니다. 참고하세요[참고링크]

React 개발자를 위한 Lit 안내  |  Google Codelabs

제 개인적인 생각에는 현대적인 웹 애플리케이션 개발은 DOM을 직접적으로 접근해서 제어하는것은 지양하는 방식으로 프로그래밍을 하고 있는것 같습니다. (DOM을 직접적으로 제어해서 제어하다보면 서비스가 작으면 상관이 없는데, 서비스가 커지면 커질수록 유지보수가 힘들어 집니다.)
그래서 React, Vue, Lit, Svelte...등등 기술들이 나오는것 같습니다.
이런 기술들은 DOM을 직접적으로 제어하는 API를 사용하지 않습니다.👍😃👏🏻

👉🏻webpack5-lit-setting 작업

// package.json
{
  "name": "webpack5-lit-setting",
  "version": "1.0.0",
  "main": "index.js",
  "repository": "git@github.com:younhoso/webpack5-default-setting.git",
  "license": "MIT",
  "scripts": {
    "start": "webpack serve --config config/webpack.dev.js --progress",
    "build": "webpack --config config/webpack.prod.js",
    "prod": "http-server ./dist -a localhost -p 8000 -o"
  },
  "devDependencies": {
    "@babel/core": "^7.12.1",
    "@babel/plugin-proposal-class-properties": "^7.12.1",
    "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
    "@babel/plugin-transform-arrow-functions": "^7.12.1",
    "@babel/plugin-transform-async-to-generator": "^7.12.1",
    "@babel/plugin-transform-runtime": "^7.12.10",
    "@babel/preset-env": "^7.12.1",
    "babel-loader": "^8.1.0",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^6.2.1",
    "cross-env": "^7.0.2",
    "css-loader": "^5.0.0",
    "css-minimizer-webpack-plugin": "^1.1.5",
    "html-webpack-plugin": "^5.0.0-alpha.7",
    "http-server": "^0.12.3",
    "mini-css-extract-plugin": "^1.0.0",
    "node-sass": "^4.14.1",
    "path": "^0.12.7",
    "postcss-loader": "^4.0.4",
    "postcss-preset-env": "^6.7.0",
    "sass-loader": "^10.0.3",
    "style-loader": "^2.0.0",
    "webpack": "^5.1.3",
    "webpack-cli": "^4.3.1",
    "webpack-dev-server": "^3.11.0",
    "webpack-merge": "^5.2.0"
  },
  "dependencies": {
    "@babel/runtime": "^7.12.5",
    "lit": "^2.7.2",
    "core-js": "^3.10.0"
  }
}

👉🏻webpack 설정

// config/webpack.common.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const paths = require('./paths');

module.exports = {
	resolve: {
		extensions: ['.js', '.css', '.scss'],
		alias: {
		  '@': paths.src,
		},
	},
  entry: {
		main: '/app.js',
	},
  module: {
		rules: [
			{
				test: /\.js$/,
				loader: 'babel-loader',
				exclude: /node_modules/
			},
			{ // images loader
				test: /\.(png|svg|jpg|jpeg|gif)$/i,
				type: 'asset/resource',
				generator: {
					filename: 'assets/images/[name][ext]',
				},
			},
			{ // fonts loader
				test: /.(ttf|otf|eot|woff(2)?)(\?[a-z0-9]+)?$/,
				type: 'asset/resource',
				generator: {
					filename: 'assets/fonts/[name][ext]',
				},
			},
			{  // css 또는 scss loader
				test: /\.s[ac]ss|css$/i,
				exclude: /node_modules/,
				use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
			},
		]
	},
  plugins: [
		new HtmlWebpackPlugin({
			template: './src/index.html',
			minify: process.env.NODE_ENV === 'production' ? {
				collapseWhitespace: true,
				removeComments: true,
			} : false
		}),
		new MiniCssExtractPlugin({
			filename: "assets/[name].min.css",
		}),
		new CleanWebpackPlugin()
	],
  output: {
		filename: 'assets/[name].min.js',
		path: paths.build
	},
}

// config/webpack.dev.js
const webpack = require('webpack')
const { merge } = require('webpack-merge')
const paths = require('./paths')
const common = require('./webpack.common.js')

module.exports = merge(common, {
  // 모드를 개발 또는 프로덕션으로 설정
  mode: 'development',
  // 소스 맵 생성 방법 제어
  devtool: 'inline-source-map',

  // devServer
  devServer: {
    historyApiFallback: true,
    contentBase: paths.build,
    open: true,
    compress: true,
    hot: true,
    port: 8080,
  },

  plugins: [
    // 핫 리로드에서 변경된 내용만 업데이트
    new webpack.HotModuleReplacementPlugin(),
  ],
})

// config/webpack.prod.js
const { merge } = require('webpack-merge')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
const paths = require('./paths')
const common = require('./webpack.common.js')

module.exports = merge(common, {
  mode: 'production',
  devtool: false,
  
  output: {
    path: paths.build,
    publicPath: '/',
    filename: 'js/[name].[contenthash].bundle.js',
  },
    
  // 프로덕션: IE11과 같은 이전 브라우저를 부분적으로 지원하기 위해 es5로 변환하는 마법이 여기서 발생합니다.
  target: ['web', 'es5'], 
  
  plugins: [
    // Extracts CSS into separate files
    // Note: style-loader is for development, MiniCssExtractPlugin is for production
    new MiniCssExtractPlugin({
      filename: 'styles/[name].[contenthash].css',
      chunkFilename: '[id].css',
    }),
  ],
  optimization: {
    minimize: true,
    minimizer: [new CssMinimizerPlugin(), "..."],
    runtimeChunk: {
      name: 'runtime',
    },
  },
  performance: {
    hints: false,
    maxEntrypointSize: 512000,
    maxAssetSize: 512000,
  },
})

👉🏻파일 공유

Node 버전 반드시 14버전으로 해주세요.!!

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

webpack5-lit-setting.zip

0.41MB

👉🏻vaadin/router를 이용한 router 기능 추가

// app.js

import { Router } from "@vaadin/router";
import '@/pages/main-page';
import '@/pages/sub-page';
import '@/pages/user-page';

window.addEventListener('DOMContentLoaded', () => {
  initRouter();
});

function initRouter() {
  const router = new Router(document.querySelector('main'));
  router.setRoutes([
    {path: '/', component: 'main-page'},
    {
      path: '/users',
      children: [
        {path: '/', component: 'sub-page'},
        {path: '/:user', component: 'user-page'}
      ]
    },
    {path: '/categole', component: "sub-page"},
  ])
}

lit.zip

0.30MB