WEbpack 설정
February 01, 2020
웹팩 개념잡기
모듈 번들러
모듈 번들러란 여러개의 나누어져 있는 파일들을 하나의 파일로 만들어주는 라이브러리를 말한다. 모듈 번들러 라이브러리는 웹팩(webpack), Parcel 등이 있다.
실습하기
프로젝트 설정하기
yarn init -y디렉터리 만든 후 초기화
yarn add -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 node-sass react react-dom sass-loader style-loader webpack webpack-cli webpack-dev-server필요한 라이브러리 설치
const path = require('path')
module.exports = {
entry: './src/test.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname + '/build'),
},
mode: 'none',
}webpack.config.js 파일 작성 entry는 웹팩이 빌드할 파일을 알려주는 역할 src/test.js파일을 기준으로 import되어 있는 모든 파일들을 찾아 하나의 파일로 합친다. output은 웹팩에서 빌드를 완료하면 output에 명시되어 있는 정보를 통해 빌드 파일을 생선한다. mode는 웹팩 빌드 옵션이며 production은 최적화되어 빌드되어지는 특징을 가지고 있고 development는 빠르게 빌드하는 특징, none 같은 경우는 아무 기능 없이 웹팩으로 빌드한다.
웹팩으로 HTML 파일 빌드하기
웹팩은 자바스크립트 파일뿐만 아니라 자바스크립트가 아닌 파일들도 모듈로 관리 할 수 있다. 로더라는 기능을 이용해서 자바스크립트가 아닌 파일도 웹팩이 이해할 수 있게 해준다.
module : {
rules: {
test: '가지고올 파일 정규식',
use: [
{
loader: '사용할 로더 이름',
options: { 사용할 로더 옵션 }
}
]
}
}webpack.config.js
const path = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/test.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname + '/build'),
},
mode: 'none',
module: {
rules: [
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
options: { minimize: true },
},
],
},
],
},
plugins: [
new HtmlWebPackPlugin({
template: './public/index.html', // public/index.html 파일을 읽는다.
filename: 'index.html', // output으로 출력할 파일은 index.html 이다.
}),
],
}yarn build 명령어를 실행하면 build/index.html 파일이 생성 되어 있고 minimize옵션이 켜져 있어서 파일 내용이 한줄로 되어있다.
리액트 빌드하기
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}최상위 디렉터리에서 .babelrc 파일을 만든 후 위와 같은 내용을 입력한다. 바벨은 최신 문법들을 브라우저가 이해할 수 있게 ES5로 자바스크립트를 변환해주는 역할을 한다.
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: "/node_modules",
use: ['babel-loader'],
},webpack.config.js 파일에 babel-loader 추가
{
test: /\.css$/,
use: ['css-loader']
}css 로더 추가 이상태에서는 웹브라우저에 css가 적용이 안되어 있다. 웹팩에서 css파일을 읽은 후 어딘가에 저장을 해야하기 떄문이다. css를 index.html에 합치는 방법도 있고 파일을 추출하는 방법도 있다. 여기 use에 있는 loader 순서는 오른쪽에서 왼쪽 순서로 실행된다. 위에 있는 코드의 의미는 css-loader로 css파일을 읽고 MiniCssExtractPlugin.loader로 읽은 css를 파일로 추출해낸다.
plugins: [
new HtmlWebPackPlugin({
template: './public/index.html', // public/index.html 파일을 읽는다.
filename: 'index.html' // output으로 출력할 파일은 index.html 이다.
}),
new MiniCssExtractPlugin({
filename: 'style.css'
})webpack.config.js에 플러그인 적용
module.exports = {
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname + "/build")
},
devServer: {
contentBase: path.resolve("./build"),
index: "index.html",
port: 9000
},devServer 추가 소스코드를 수정할 때마다 직접 빌드하지 않고 알아서 웹팩이 빌드해주는 것
