Webpack 소개, 설치법
Webpack
이제 Webpack에 대해 알아보도록 하자.
Webpack을 공부하기전에 Webpack이 생겨나게된 배경과 역사에 대해서 간략하게 설명하겠다
JavaScipt는 2015년 ES6 문법이 등장하기 이전과 이후로 나뉘어진다. 2015년 이전에는 module 개념이 존재하지 않았었고 ES6 문법이 등장하면서부터 module 개념이 도입되기 시작했다. 그 이전에는 JavaScript에 module 개념이 없었기 때문에 module 형식으로 코드를 작성하고 사용하기 위해 webpack이라는 개념이 등장하게 되었다.
module은 쉽게말해서 파일을 나눠서 저장하는 것을 말한다. A와 B라는 파일을 나눠서 저장했을 때 A파일에서 B파일의 내용을 가져오고 싶을 때 module 코드를 이용해서 내용을 가져올 수 있다. 이렇게 보면 정말 편리한 기능으로 보일 수 있지만 단점이 있다. 바로 각 파일의 저장된 코드가 충돌이 일어날 수 있기 때문에 항상 코드를 작성할 때 두 파일이 충돌이 일어나지 않도록 유의하면서 작성해야한다. 이러한 단점을 해결해줄 수 있는 것이 바로 Webpack이다.
우리가 여기서 Webpack을 사용하게되면 여러개의 JS파일들을 하나의 파일로 묶어서 저장할 수 있다. 우리는 이 파일을 번들(bundle)파일이라고 부른다. 여러 js파일들을 코드가 충돌되지 않게 묶어서 하나의 파일로 만들어주는 것이 Webpack의 역할이다. 즉 Webpack은 여러개의 자바스크립트의 모듈을 하나의 파일로 묶어내는 번들러라고 생각하면 된다.
Webpack 설치에는 node.js가 필요로한다.
이제 웹팩을 수동으로 설치해보는 과정을 보도록 하자.
먼저 웹팩을 설치해주기에 앞서 package.json 파일을 생성해보도록 하자.
$ npm init -y
설치가 다 됐다면, 두개의 명령어를 통해서 설치해보도록 하자
$ npm install react react-dom
$ npm install -D webpack webpack-cli
-D 옵션은 Developers의 약자로 개발자용 모듈을 설치하겠다는 의미이다.
설치가 완료되었다면, 프로젝트 안에 webpack.config.js 라는 파일을 생성하고, 아래 명령어로 디렉토리를 만든다.
그 다음 src 폴더와 dist 폴더를 따로 만들어준다. 추가로 index.html파일을 전체폴더에 만들어준다.
$ mkdir src dist
아래의 명령어를 통해서 babel 에 관련된 패키지들을 설치해보도록 하자.
Webpack과 Babel을 연결해주는 라이브러리
$ npm install -D babel-loader
옛날 브라우저에서도 구동할 수 있게 바꿔주는 바벨 라이브러리이다.
$ npm install -D @babel/preset-env
JSX 문법을 사용할 수 있게 만들어주는 바벨 라이브러리이다.
$ npm install -D @babel/preset-react
자 이정도면 어느정도 설치가 완료되면 이제 Webpack dev server를 설치해보도록 하자.
우리가 nodejs를 사용할 때 코드가 수정되면 자동으로 수정된 것을 확인하고 적용시켜주는 서버가 있었다 (nodemon). Webpack은 src 디렉토리 안에 코드가 수정되면 npx webpack 명령어를 써서 dist 디렉토리 하위의 bundle.js 파일을 덮어쓰기 해야 한다. 이때 nodemon과 같이, 자동으로 src 안의 코드 변화를 감지하여 bundle.js를 덮어씌워주는 서버 패키지가 있다. 그것이 바로 webpack-dev-server이고, 아래의 명령어로 설치할 수 있다.
$ npm install -D webpack-dev-server
$ npm install -D @pmmmwh/react-refresh-webpack-plugin
$ npm install -D react-refresh
react-refresh과 @pmmmwh/react-refresh-webpack-plugin을 설치하면, 브라우저에서 새로고침(F5)을 하지 않아도 자동으로 수정된 화면이 반영되어 나타난다.
그리고 우리가 좀더 편리하게 명령어를 쓸 수 있게 package.json script로 가서
"dev":"webpack server --env development"를 추가해주면 앞으로 서버를 가동하고 싶을때 "npm run dev"를 치면 실행시킬 수 있다.
처음 npx webpack 같은 경우에도 package.json script로 가서 "webpack":"webpack" 을 작성하면 앞으로
"npm run webpack" 명령어로 실행시킬 수 있다.
$ npm install -D mini-css-extract-plugin css-loader
자 이제 webpack.config.js 파일을 구성해보도록 하자
주석처리된 설명을 보고 각각에 해당하는 설정이 뭔지 알아보자.
const path = require('path') // path는 내장모듈이기 때문에 따로 설치필요 X config에선 import 사용안됨
const webpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
name:'react-project', // webpack 이름 설정
mode:'development', // 모드 설정
resolve:{
extensions:['.js','.jsx'] // 이렇게 하면 뒤에 확장자명과 파일을 제거가능(줄일 수 있음)
},
// entry : 내가 앞으로 번들할 파일들, src폴더에 하나만 지정해도 나머지 파일들 알아서 적용
entry:{
app:['./src/index']
},
module:{
rules:[{
test:/\.jsx?/, // 확장자가 .js or .jsx
loader: 'babel-loader', // webpack과 babel을 연결해주는 라이브러리
options:{
presets:[
['@babel/preset-env',{
targets:{
browsers:['last 2 chrome versions','> 5% in KR'] // browserslist
},
debug:true,
}], // 옛날 브라우저에서도 환경에 맞게 실행해줌
'@babel/preset-react' // JSX를 사용하기 위해
],
plugins:[
'react-refresh/babel'
]
}
},{
test:/\.css$/,
use:[MiniCssExtractPlugin.loader,'css-loader']
}]
},
plugins:[
new webpackPlugin(),
new MiniCssExtractPlugin({ filename:'style.css'}) // 파일을 생성해줌
],
// output : 내가 내보낼 위치와 파일명
output:{
path: path.join(__dirname,'dist'),
filename:'bundle.js',
publicPath:'/dist',
},
devServer:{ // webpack-dev-server 패키지에 관련된 설정 아래 코드에서 정적 파일들을 '/public' 안에 두고,
// 서버 포트 번호를 3000번으로 하였다.
static: {
directory:path.join(__dirname,'public'),
},
compress:true,
port:3000,
hot:true,
historyApiFallback:true, // 새로고침
}
}