2022년 기준 웹팩 설정하실 때

제 webpack.config.js 입니다 참고하세요

모듈 설정하실 때 js로드 할 babel-loader, css 로드 할 style-loader, css-loader를 설정하시고 플러그인에서 HtmlWebpackPlugin 객체에서 쓸 템플릿을 설정해주세요

그리고 엔트리포인트 js파일에서 css파일을 import하세요

import './index.css 혹은 require('./index.css') 이런 식으로해주세요.

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'development',
  entry: {
	  index: './src/index.js',
  },
  output: {
	  filename: '[name].entry.js',
	  path: path.join(__dirname, 'dist'),
  },
  module: {
	rules: [{
		test: /\.m?js$/,
		include: path.resolve(__dirname, 'src'),
		exclude: /node_modules/,
		use: {
			loader: 'babel-loader',
			options: {
				presets: [
					['@babel/preset-env', { 
						targets: ['last 2 versions'],
						debug: true
					}]
				],
				plugins: ['@babel/plugin-transform-runtime'],
			}
		}
	},
	{
		test: /\.css$/,
		use: ['style-loader', 'css-loader']
	}
	]},
	// devServer: {
	// 	port: 9000,
	// },
	plugins: [
		new HtmlWebpackPlugin({
			template: './src/index.html',
		}),
	],
};