webpack의 핵심 패키지

npm install

의존성 모듈 설치

패키지의 배포 시 포함될 의존성 모듈을 지정합니다.

$ npm install --save MODULE_NAME
# or
$ npm i MODULE_NAME

개발용 의존성 모듈 설치

패키지의 개발 시 사용될 의존성 모듈을 지정합니다.(배포 시 포함되지 않습니다)

$ npm install --save-dev MODULE_NAME
# or
$ npm i -D MODULE_NAME

webpack

webpack은 웹팩(Webpack)의 핵심 패키지이며, webpack-cli는 터미널에서 웹팩 명령(Commands)를 실행할 수 있게 해주는 도구입니다.

$ npm i -D webpack webpack-cli

개발용으로 실시간 Reload 서버를 실행하기 위해 webpack-dev-server를 설치합니다.

$ npm i -D webpack-dev-server

webpack-merge : 웹팩 Config 객체를 병합(merge)하기 위해 설치합니다. 웹팩을 개발용(dev)과 배포용(build)으로 구분해 실행할 수 있습니다.

$ npm i -D webpack-merge

html-webpack-plugin : 나중에 webpack.config.js에서 사용할 플러그인

$ npm i -D html-webpack-plugin

Babel

바벨(Babel)은 ES6 이상의 코드를 ES5 이하 버전으로 변환하기 위해 사용합니다.

• @babel/core: 리액트는 es6를 사용하므로 여러 브라우저에서 사용가능하도록 es5문법으로 바꿔줌

• @babel/preset-env: 바벨의 지원 스펙을 지정합니다.

• babel-loader: 웹팩(Webpack) 지원을 위해 사용합니다. ( 자바스크립트 파일을 babel preset/plugin과 webpack을 사용하여 es5로 컴파일 해주는 plugin )

$ npm i -D @babel/core @babel/preset-env babel-loader 

.babelrc 파일을 수동으로 생성하고 다음 옵션을 추가합니다.

// .babelrc
{
    "presets": [
      ["@babel/preset-env", { "targets": { "browsers": ["last 2 versions", ">= 5% in KR", "not ie <= 9"] } }]
    ]
}

구형 및 일부 브라우저에서 지원하지 않는 기능들을 지원할 수 있도록 @babel/polyfill을 의존성 모듈로 설치합니다.(-D(--save-dev)가 없어야 합니다!)

$ npm i @babel/polyfill

설치 후 webpack.config.js 파일을 수동으로 생성후 다음과 같이 설정합니다.

// webpack.config.js

// ...
require('@babel/polyfill')

const config = {
  // ...
  entry: {
    app: [
      '@babel/polyfill',
      path.join(__dirname, 'main.js')
    ]
  }
  // ...
}

css-loader

• css-loader : 웹팩은 모든 것을 모듈로 다루기 때문에 CSS 파일을 자바스크립트로 변환해서 로딩해야 합니다.

$ npm i -D css-loader 

copy-webpack-plugin

• copy-webpack-plugin : 파일이나, 폴더들을 복사해서 어디론가 넣어줄수 있는 역할을 합니다.

$ npm i -D copy-webpack-plugin

clean-webpack-plugin

• clean-webpack-plugin : 빌드 충돌 최소화를 위한 플러그인

$ npm i -D clean-webpack-plugin

package.json 파일 정리

// package.json

{
  "name": "React",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "prod": "webpack --mode=production",
    "dev": "webpack --mode=development",
    "watch": "webpack-dev-server --mode development --open --hot"
  },
  "keywords": [
    "webpack"
  ],
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.10.5",
    "@babel/preset-env": "^7.10.4",
    "babel-loader": "^8.1.0",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^6.0.3",
    "css-loader": "^3.6.0",
    "html-webpack-plugin": "^4.3.0",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.11.0",
    "webpack-merge": "^5.0.9"
  },
  "dependencies": {
     "@babel/polyfill": "^7.10.4"
  }
}

// webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const { merge } = require('webpack-merge');
require('@babel/polyfill');

module.exports = {
    resolve: {
        extensions: ['.js', '.css'],
        alias: {
            '@': path.resolve(__dirname, 'resource'),
        },
    },
    entry: {
        app: [
            '@babel/polyfill',
            path.join(__dirname, 'main.js')
        ]
    },
    module: {
        rules: [
            {
               //React , Vue 프로젝트 마다 다른 옵션을 이곳에 넣어 줍니다.
            },
            {
                test: /\.js$/,
                loader: 'babel-loader'
            },
            {
                test: /\.css$/,
                use: [
                  'css-loader'
                ]
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            template: path.join(__dirname, 'index.html')
        }),
        new CopyPlugin({
            patterns: [
                { from: 'resource/images', to: 'images' }
            ]
        }),
        new CleanWebpackPlugin()
    ],
    output: {
        filename: '[name].js',
        path: path.join(__dirname, 'dist')
    },
}

이후부터 선택 사항입니다.

React 프로젝트 환경 Vue 프로젝트 환경