August 31, 2021 https://joshua1988.github.io/webpack-guide/build/npm-module-install.html#npm-지역-설치-옵션-2가지

• 개발용 라이브러리와 배포용 라이브러리 구분하기

1. package.json 파일 설치

1. webpack 설치

1. webpack.config.js 파일 만들기

const path = require('path');
//노드에서 제공하는 패스 모드를 활용한다. 파일이나 폴더 작업을 위한 툴

const HtmlWebpackPlugin = require('html-webpack-plugin');
//

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

module.exports = {
	entry: './src/index.js',
	//entry는 시작점이고 사용하는 모듈들을 모두 파악한다
	output: {
	//output은 만들어지는 최종 파일을 내보내는 옵션
		filename: 'main.js',
		path: path.resolve(__dirname, 'dist');
		//현재 경로 하위에 dist 폴더를 의미함
	},
	module: {
		rules: [
			{
				test: /\\.css$/,
				use: [MiniCssExtractPlugin.loader, "css-loader"],
				//use: ["style-loader", "css-loader"],
				//css-loader로 읽고 style-loader로 불러온다
			},
			{
				test: /\\.jpg$/,
				use: ["file-loader"],
			}
		],
	},
	plugins: [
		new HtmlWebpackPlugin({
			template: './index.html'
			//template처럼 이름을 변경해서 저장하게함
		}),
		new MiniCssExtractPlugin({
			filename: 'common.css',
		}),
		new CleanWebpackPlugin(),
	],
	devServer: {
	//개발하기 쉽게 서버를 띄워주는 역할
		static: {
			directory: path.resolve(__dirname, 'dist);
		},
		port:8080
	}
}

1. 개발하기 쉽게 서버를 띄워주는 역할

1. npm start 사용 (모드 설정 development 중요!)

1. css 불러오기