Webpack

yoosg·2020년 2월 2일
0

1. package.json

npm init

package.json 생성

2. react

npm install react react-dom
yarn add react react-dom

react : React Library
react-dom : browser, dom, webapp 관리

3. babel

npm install --save-dev @babel/core babel-loader @babel/preset-react @babel/preset-env 

yarn add --dev @babel/core babel-loader @babel/preset-react @babel/preset-env

@babel/core

  • React는 es6를 사용하므로 여러 브라우저에서 사용가능하도록 es5문법으로 바꿔준다.

@babel/preset-react

  • jsx -> javascript

@babel/preset-env

  • es6 -> es5
  • es6 뿐 아니라 브라우저에 따라 알아서 컴파일 해준다

babel-loader

  • 자바스크립트 파일을 babel preset/plugin과 webpack을 사용하여 es5로 컴파일 해주는 plugin
  • jsx -> javascript 로 컴파일
  • html webpack plugin

4. webpack

npm install --save-dev webpack webpack-dev-server webpack-cli html-webpack-plugin

webpack

  • 모든 리액트 파일을 하나의 컴파일된 하나의 자바스크립트 파일에 넣기 위함

webpack-dev-server

  • live reload

webpack-cli

  • build 스크립트를 통해 webpack 커맨드를 사용하기 위함
  • html-webpack-plugin
  • 나중에 webpack.config.js에서 사용할 플러그인

--save-dev : 개발환경에서만 사용되는 라이브러리라는 것을 명시

용어 설명

    1. Loaders
  • 코드 불러옴
  • transform the source code of a module.
    • style-loader css를 dom에 추가
    • sass-loader SASS파일을 CSS로 컴파일
    • babel-loader babel로 javascript 코드를 transpile
  • do the pre-processing transformation of virtually any file format when you use sth like require("my-loader!./my-awesome-module") in your code
    1. Plugins
  • 컴파일러
  • Webpack의 핵심 기능
  • Webpack은 기본적으로 대부분의 source 코드를 bundle파일로 변환한다.
  • loader가 부족하면 pluging을 사용하여 webpack의 기능을 추가한다.
    1. preset
  • plugin의 집합
  • plugin이 필요할 때마다 매번 webpack에서 설정하는 것은 귀찮은 일이므로 plugin들을 모아놓은 preset을 한번에 추가하여 관리할 수 있다.

webpack.config

  • webpack을 사용하기 위한 설정파일

webpack.config.js

const path = require('path')                                        // core nodejs 모듈 중 하나, 파일 경로 설정할 때 사용
const HtmlWebpackPlugin = require('html-webpack-plugin')            // index.html 파일을 dist 폴더에 index_bundle.js 파일과 함께 자동으로 생성

module.exports = {                                      // moduel export
    entry: './src/index.js',                            // 리액트 파일이 시작하는 곳
    output: {                                           // bundled compiled 파일
        path: path.join(__dirname, '/dist'),            //__dirname : 현재 디렉토리, dist 폴더에 모든 컴파일된 하나의 번들파일을 넣을 예정
        filename: 'index_bundle.js'
    },
    module: {                                           // javascript 모듈을 생성할 규칙을 지정 (node_module을 제외한.js 파일을 babel-loader로 불러와 모듈을 생성
        rules: [
            {
                test: /\.js$/,                          // .js, .jsx로 끝나는 babel이 컴파일하게 할 모든 파일
                exclude: /node_module/,                 // node module 폴더는 babel 컴파일에서 제외
                use:{
                    loader: 'babel-loader'                // babel loader가 파이프를 통해 js 코드를 불러옴
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'                // 생성한 템플릿 파일
        })
    ]
}

정리

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: 'index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'index_bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin()
  ]
}

위의 코드는 다음과 같이 dist/index.html파일을 생성한다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack App</title>
  </head>
  <body>
    <script src="index_bundle.js"></script>
  </body>
</html>

index_bundle.js가 webpack에 의해 컴파일, 번들화된 하나의 js 파일이다.

5. index.html

웹페이지의 가장 기본이 될 index.html 파일을 src/index.html 경로로 아래와 같이 생성한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My React App</title>
</head>
<body>
    <div id="app"></div>                // 템플릿
</body>
</html>

6. babelrc

  • babel-preset-env와 babel-preset-react와 같이 preset을 사용하고 싶으면 root폴더에 .babelrc을 생성하여 사용하고자할 preset을 설정하면 된다.
  • plugin들을 각각의 npm dependency를 가지고 있다. 하지만 설치시 매번 .bablrc에 설정을 해야하므로 그 두가지를 모두 해결해줄 preset을 사용하면된다. preset을 설치하면 preset이 가진 plugin들을 설정할 필요없이 사용할 수 있게 된다.
{
    "presets": [
        "@babel/env",
        "@babel/react"
    ]
}

@babel이 버전이 업데이트 되면서 더이상 babel-core 형태(-)의 dependency를 지원하지 않게되므로서 @babel/env 형태(/)를 사용해야 한다.

index.js

import React from 'react';
import ReactDOM from 'react-dome';
import App from './component/App'

ReactDOM.render(<App/>, document.getElementById('app'))                       // dom에 render학 메인 app component, rendering 할 곳

App.js

import React from 'react'

export default class App extends React.Component {
    render(){
        return(
            <div>
                <h1>My React App</h1>
            </div>
        )
    }
}

package.json

"scripts": {
    "start":"webpack-dev-server --mode development --open --hot",                    // webpack-dev-server, --open : 자동으로 브라우저 열어준다, --hot : hot realod 저장했을 때 자동적으로 reload 해준다
    "build":"webpack --mode production"                                              // dist 폴더에 컴파일된 파일 다 넣어준다
  },
profile
yoosg
.
이전 포스트

styled-components

다음 포스트

Webpack

0개의 댓글