웹팩 설정하기
웹팩
웹팩이란 ?
- 여러개의 나누어져 있는 자바스크립트 파일들을 하나의 파일로 만들어주는 라이브러리
- 자바스크립트 코드들을 압축하고 최적화 할 수 있기 때문에 로딩 속도를 높일 수 있다.
실습
필요 라이브러리를 먼저 설치
npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader clean-webpack-plugin css-loader html-loader html-webpack-plugin mini-css-extract-plugin css-loader file-loader style-loader webpack webpack-cli webpack-dev-server
웹팩으로 자바스크립트 파일 빌드하기
- webpack.config.js 파일 생성 및 작성
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
outout: {
filename: 'bundle.js',
path: path.resolve(__dirname + '/build'),
},
};
- entry : 웹팩이 빌드할 파일을 알려주는 역할
- output : 웹팩에서 빌드를 완료하면 output에 명시되어 있는 정보를 통해 빌드 파일을 생성
- mode : 웹팩 빌드 옵션
- production : 최적화되어 빌드함
- development : 빠르게 빌드
- none : 아무 기능 X
package.json 파일에서 스크립트 추가
"scripts": {
"build": "webpack"
}
웹팩으로 HTML 파일 빌드하기
- 웹팩은 자바스크립트 파일뿐만 아니라 자바스크립트가 아닌 파일들도 모듈로 관리할 수 있다.
module: {
rules: {
test: '가지고올 파일 정규식',
use: [
{
lodaer: '사용할 로더 이름',
options: {사용할 로더 옵션}
}
]
}
}
- 프로젝트에서 사용한 모듈들
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: '/node_modules/',
loader: 'babel-loader',
options: {
configFile: './babel.config.js',
},
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
{
test: /\.(png|gif|svg|jpe?g)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]',
publicPath: '/',
},
},
],
},
- babel-loader : 최신 사양의 자바스크립트 코드를 구형 브라우저에서도 동작하는 ES5 이하의 코드로 변환(트랜스파일링)
- file-loader : 파일을 로딩
- MiniCssExtractPlugin.loader : 자바스크립트에 포함된 CSS를 별도의 파일로 추출해준다.
- css-loader : css 파일을 자바스크립트로 변환
plugin 적용
- 웹팩으로 변환한 파일에 추가적인 기능을 더하고 싶을 때 사용한다.
- loader vs plugin 차이점
- loader는 파일을 해석하고 변환하는 과정에 관여하여 모듈을 처리
- plugin은 해당 결과물의 형태를 바꾸는 역할을 하므로 번들링된 파일을 처리한다는 점
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: './public/index.html'
}),
new MiniCssExtractPlugin({ filename: 'app.css' })
]
- CleanWebpackPlugin : 빌드 이전 결과물을 제거하는 플러그인으로 빌드 결과물은 웹팩에서 아웃풋 경로에 설정한 곳으로 폴더 및 파일들이 모이는데 빌드 했을시 이전 빌드내용이 삭제되지 않고 그대로 남아있는 경우도 있는데, 이를 해결해주는 플러그인
- HtmlWebpackPlugin : 번들한 CSS, JS 파일을 각각 HTML 파일에 Link, Script 태그로 추가해줘야하는데, 이 부분을 자동화 해주는 플러그인
- MiniCssExtractPlugin : CSS를 별도의 파일로 추출하는 플러그인
webpack-dev-server
-
빠른 실시간 리로드 기능을 가진 개발 서버
- 디스크에 저장되지 않는 메모리 컴파일을 사용
-
동작 원리
- 서버 실행 시 소스 파일들을 번들링하여 메모리에 저장소스 파일을 감시
- 소스 파일이 변경되면 변경된 모듈만 새로 번들링
- 변경된 모듈 정보를 브라우저에 전송
- 브라우저는 변경을 인지하고 새로고침되어 변경사항이 반영된 페이지를 로드
-
속성
- host : 사용될 호스트
- hot : webpack HMR 기능 활성화
- HMR : 브라우저를 새로 고치지 않아도 웹팩으로 빌드한 결과물이 웹 애플리케이션에 실시간으로 반영될 수 있게 도와주는 설정입니다.
- port : 접속 포트
- overlay : 에러가 발생했을때 브라우저에 풀스크린으로 에러 내용을 오버레이로 표시해주는 옵션
- historyApiFallback : HTML5의 History API를 사용하는 경우에 설정해놓은 url 이외의 url 경로로 접근했을때 404 responses를 받게 되는데 이때도 index.html을 서빙할지 결정하는 옵션
resolve
- 웹팩이 알아서 경로나 확장자를 처리할 수 있게 도와주는 옵션
resolve: {
extensions: ['.js', '.jsx'],
},
출처
- https://velog.io/@jeff0720/React-%EA%B0%9C%EB%B0%9C-%ED%99%98%EA%B2%BD%EC%9D%84-%EA%B5%AC%EC%B6%95%ED%95%98%EB%A9%B4%EC%84%9C-%EB%B0%B0%EC%9A%B0%EB%8A%94-Webpack-%EA%B8%B0%EC%B4%88
- https://medium.com/@yoohl/%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%9B%B9%ED%8C%A9-%EC%84%B8%ED%8C%85-c1faee344735
- https://velog.io/@adam2/webpack-dev-server-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0%EC%82%BD%EC%A7%88%ED%9B%84%EA%B8%B0
- https://www.zerocho.com/category/Webpack/post/58aa916d745ca90018e5301d
Author And Source
이 문제에 관하여(웹팩 설정하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@shmallow/웹팩-설정하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)