webpack

Seulyi Yoo·2022년 7월 28일
1
post-thumbnail

프로젝트 생성

npm init -y

npm i -D webpack webpack-cli webpack-dev-server@next

// package.json
{
  "name": "webpack-template-basic",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.0.0-rc.1"
  }
}

index.html 파일생성

https://www.jsdelivr.com/package/npm/reset-css (css 초기화)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">

js/main.js 생성

webpack.config.js 생성


entry, output

// webpack.config.js
// import
const path = require('path')

// export
module.exports = {
  // 파일을 읽어들이기 시작하는 진입점 설정
  entry: './js/main.js',
  // 결과물(번들)을 반환하는 설정
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  }
}

npm run build

dist/main.js 생성

// webpack.config.js
const path = require('path')

module.exports = {
  entry: './js/main.js',
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'app.js'
  }
}

npm run build

public/app.js 생성

// webpack.config.js
const path = require('path')

module.exports = {
  entry: './js/main.js',
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'main.js'
  }
}

npm run build

public/app.js 생성

⇒ public/main.js & public/app.js 모두 있어서 문제 발생!

// webpack.config.js
const path = require('path')

module.exports = {
  entry: './js/main.js',
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'main.js',
		clean: true,
  }
}

npm run build

public/app.js 삭제됨

// webpack.config.js
const path = require('path')

module.exports = {
  entry: './js/main.js',
  output: {
		// 생략해도 동일하게 동작! 
		// path: path.resolve(__dirname, 'dist'),
		// filename: 'main.js',
		clean: true,
  }
}

public, dist 폴더 삭제

npm run build

dist/main.js 생성

https://webpack.js.org/

⇒ DOCUMENTATION ⇒ Configuration

⇒ Entry and Context ⇒ entry

⇒ Output ⇒ output.path


plugins

npm i -D html-webpack-plugin

// webpack.config.js
// import
const path = require('path')
const HtmlPlugin = require('html-webpack-plugin')

// export
module.exports = {
  entry: './js/main.js',
  output: {
    clean: true
  },
	// 번들링 후 결과물의 처리 방식 등 다양한 플러그인들을 설정
  plugins: [
    new HtmlPlugin({
      template: './index.html'
    })
  ]
}

npm run dev

// webpack.config.js

],
  devServer: {
    host: 'localhost'
  }
}

npm run dev

http://localhost:8080/


정적파일연결

logo.png , favicon.icon ⇒ 프로젝트 폴더

static 폴더 생성

favicon.icon ⇒ static 폴더로 이동

static/images 생성

logo.png ⇒ static/images

<!-- index.html -->
<body>
  <h1>Hello Webpack!!</h1>
  <img src="./images/logo./png" alt="hamburger" />
</body>

npm i -D copy-webpack-plugin

// webpack.config.js
// import
const path = require('path')
const HtmlPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')

// export
module.exports = {
  entry: './js/main.js',
  output: {
    clean: true
  },
  // 번들링 후 결과물의 처리 방식 등 다양한 플러그인들을 설정
  plugins: [
    new HtmlPlugin({
      template: './index.html'
    }),
    new CopyPlugin({
      patterns: [
        { from: 'static' }
      ]
    })
  ],
  devServer: {
    host: 'localhost'
  }
}

npm run dev

npm run build

⇒ dist 폴더 안에 파일들 생성


module

<!-- index.html -->
<link rel="stylesheet" href="./css/main.css" />

static/css/main.css 생성

/* static/css/main.css */
body {
	background-color: orange;
}

css 폴더 ⇒ 최상위 경로로 이동

// js/main.js
import '..css/main.css';

npm i -D css-loader style-loader

// webpack.config.js
...
module.exports = {
	...
	},
	module: {
		rules: [
			{
				test: /\.css$/,
				use: [
					'style-loader',
					'css-loader'
				]
			}
		]
	},
	...
}

npm run dev


SCSS

css/main.css ⇒ scss/main.scss 이름변경

// js/main.js
import '../scss/main.scss';
// webpack.config.js
...
module.exports = {
	...
	},
	module: {
		rules: [
			{
				test: /\.s?css$/,
				use: [
					'style-loader',
					'css-loader',
					'sass-loader'
				]
			}
		]
	},
	...
}

npm i -D sass-loader sass

/* scss/main.scss */
$color--black: #000;
$color--white: #fff;

body {
  background-color: royalblue;
  h1 {
    color: $color--white;
    font-size: 40px;
  }
}

npm run dev


Autoprefixer(PostCSS)

npm i -D postcss autoprefixer postcss-loader

// webpack.config.js
...
module.exports = {
	...
	},
	module: {
		rules: [
			{
				test: /\.s?css$/,
				use: [
					'style-loader',
					'css-loader',
					'postcss-loader',
					'sass-loader'
				]
			}
		]
	},
	...
}
// package.json
"browserslist": [
  "> 1%",
  "last 2 versions"
]

.postcssrc.js 파일 생성

// .postcssrc.js
module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

npm run dev


babel

npm i -D @babel/core @babel/preset-env @babel/plugin-transform-runtime

.babelrc.js 파일 생성

// .babelrc.js
module.exports = {
  presets: ['@babel/preset-env'],
  plugins: [
    ['@babel/plugin-transform-runtime']
  ]
}
// webpack.config.js
...
module.exports = {
	...
	},
	module: {
		rules: [
			{
				test: /\.s?css$/,
				use: [
					'style-loader',
					'css-loader',
					'sass-loader'
				]
			},
			{
				test: /\.js$/,
				use: [
					'babel-loader'
				]
			}
		]
	},
	...
}

npm i -D @babel-loader


Netlify 배포

rm -rf .git git 삭제

git remote remove origin git 연결 해제

git remote -v git 연결된 저장소 확인

.gitignore 파일 생성

// .gitignore

.cache
.DS_Store
node_modules
dist

git init 버전 관리 초기화

git status 기본 목록 확인

git add . 버전 관리 시작

git status 변경내역 확인

git commit -m "Create project" 커밋 & 메시지

git log 확인

github 저장소 생성

git remote add origin 원격저장소주소 저장소 연결

git push origin master 저장소 업로드

https://app.netlify.com/

⇒ login

⇒ Add new site

⇒ Import an existing project

⇒ Github

⇒ pick a repository

⇒ Basic build settings

→ Build command(npm run build) / Publish directory(dist/)

⇒ Deploy site


NPX, Degit

VS code 새창으로 열기

터미널

ls

cd desktop

npx degit universe-ys/webpack-template-basic webpack-template-test

degit? github 에 있는 프로젝트를 (버전관리 없이) 가져옴 → 새로운 프로젝트를 만들 수 있음!

webpack-template-test 폴더가 생성됨

ls

cd webpack-template-test

code . -r현재 경로에 프로젝트를 오픈

또는

저장소 ⇒ code ⇒ download.zip

profile
성장하는 개발자 유슬이 입니다!

0개의 댓글