1. 프로젝트 생성하고 Webpack4 적용하기
1. 프로젝트 생성하고 Webpack4 적용하기
package.json 만들기
$ npm init -y $ vi package.json
{ "name": "react-redux-webpack4-babel7-material", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC"}
index.html, index.js 만들기
$ mkdir src$ cd src$ vi index.html
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Tutorial</title> </head> <body> <div id="root"></div> </body></html>
$ vi index.js
(function () { console.log("Hi!");}());
Webpack4 설치하기
개발 환경에 번들러를 설치합니다.
$ npm install --save-dev webpack webpack-cli webpack-dev-server
여기까지 하면, package.json 파일에 방금 설치한 dependency 값들을 들고있는 devDependencides 필드가 새로 생긴것을 확인할 수 있습니다.
추가로 프로젝트 하위에 package-lock.json 파일이 새로 생긴것을 볼 수 있는데요, 이 파일은 package.json 파일이 수정되면 자동으로 생성되는 파일입니다.
-
package-lock.json 파일은 의존성 트리에 대한 정보를 담고있는데요, 이는 파일이 작성된 시점의 의존성 트리가 다시 생성되도록 보장합니다.
조금 쉽게말해 이 파일을 git에 커밋을 해두면 해당 레포를 클론받아 작업하는 모든 개발자들이 동일한 버전의 dependency로 작업할 수 있음이 보장됩니다.
보통 node_modules 폴더는 git에 올리지 않기 때문에 package-lock.json 파일은 저장소에 커밋해주어야 합니다.
-
path 와 htmlWebpackPlugin 설치하기
path: devDependency 의 path 를 지정해주기 위해 필요합니다.
htmlWebpackPlugin: 이 도구는 서버를 띄울때마다 임시 index.html 파일을 만들어 사용할 수 있도록 해주는 툴입니다.
$ npm install --save-dev path
$ npm install --save-dev html-webpack-plugin
Webpack Config 작성하기
앱 하위에 webpack.config.js 파일을 생성해줍니다.
파일명은 이와 같이 설정해주어야 Webpack 이 자동으로 인식하여 실행하게 됩니다.
만약 다른 파일명을 원한다면 run 할때 flag를 사용하여 해당 파일의 위치를 알려주어 명령어를 실행해주어야 합니다.
$ vi webpack.config.js
Dev config 와 Production config 를 나누어 작성할 수도 있지만, Webpack4 에서는 mode 라는 옵션을 지원하기 때문에, 하나의 파일 (webpack.config.js) 에 작성하고 mode 로 분기하는 방식으로 진행했습니다.
즉, 커맨드라인에서 --mode 옵션으로 development or production 을 명시해주고, config 파일에서는 이를 파라미터로 받아 분기하도록 했습니다.
./webpack.config.js
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = (env, options) => {
const config = {
entry: {
app: ['./src/index.js']
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
if(options.mode === 'development') {
console.log('dev')
config.plugins = [
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
template: path.join(__dirname, 'src', 'index.html')
})
];
config.devtool = 'inline-source-map';
config.devServer = {
hot: true,
host: '0.0.0.0',
contentBase: './dist',
stats: {
color: true
}
};
} else {
console.log('prod')
}
return config;
}
package.json 의 scripts 에 명령어 추가하기
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build-dev": "webpack --mode development",
"build": "webpack --mode production",
"dev": "webpack-dev-server --open --mode development"
},
--open 옵션: 서버가 뜨면 자동으로 브라우저가 열리고 서버에 접속합니다.
개발 서버 띄우기
자, 이제 webpack 의 기본 설정이 끝났습니다. 이제 개발 서버를 띄워봅시다!
$ npm run dev
그럼 아래와 같이 8080 포트로 브라우저가 열리면서 index.html 과 app.bundle.js 파일이 <script> 로 삽입된 것을 확인할 수 있습니다.
나머지 build 명령어도 실행해봅시다.
Production 빌드하기
$ npm run build
Webpack이 src 하위의 index.js 파일을 compile 하고 그 결과로 dist/app.bundle.js 를 만들어낸걸 볼 수 있습니다.
Development 빌드하기
$ npm run build-dev
짝짝짝! 👏🏻👏🏻
지금까지 Webpack4 를 앱에 적용해보았습니다.
다음으로는 React, ReactDOM 그리고 Babel 을 사용해보겠습니다.
Last updated
Was this helpful?