본문 바로가기

Programming/[Node.js]

[Node.js] yarn 설치 및 webpack 설치

1. node.js 설치

https://nodejs.org/ko/

 

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

 

2. npm과 yarn의 차이점

- 기존에는 대부분 npm을 사용해 왔다. 이번에 새로 개발된 yarn을 써보려고 함 (패키지 관리 도구)

- npm : 여러 패키지를 설치할 때 패키지가 완전히 설치 될 때까지 기다린 후 다른 패키지를 설치 (패키지별 순차적 실행)

- yarn : 병렬로 설치하므로 퍼포먼스와 속도 증가

(ex : React 설치시 npm - 3.572 sec, yarn - 1.44 sec)

- yarn은 자동으로 lock 파일을 생성함

- npm은 다른 패키지를 즉시 포함시킬 수 있는 코드를 자동으로 실행하므로 보안 시스템에 여러 취약성 발생

- yarn은 yarn.lock 또는 package.json 파일이 있는 파일만 설치. (yarn이 npm 패키지보다 보안이 강화된 것으로 간주)

- yarn은 효율적인 캐시 시스템과 기타 부가 기능 제공

 

npm과 yarn에서 다른 명령어

Command npm yarn
Install dependencies npm install yarn
Install package npm install [package] yarn add [package]
Install dev package npm install --save-dev [package] yarn add --dev [package]
Uninstall package npm uninstall [package] yarn remove [package]
Uninstall dev package npm uninstall --save-dev [package] yarn remove [package]
Update npm update yarn upgrade
Update package npm update [package]  yarn upgrade [package]
Global install package npm install --global [package] yarn global add [package]
Global uninstall package npm uninstall --global [package] yarn global remove [package]

npm과 yarn에서 같은 명령어

npm yarn
npm init yarn init
npm run yarn run
npm test yarn test
npm login (and logout) yarn login (and logout)
npm link yarn link
npm publish yarn publish
npm cache clean yarn cache clean

 

3. yarn 설치 

npm install -g yarn

yarn --version 으로 제대로 설치되었는지 확인

 

원하는 경로에

 

yarn init
yarn init v1.22.17
question author:
question license (MIT):
question private:
success Saved package.json
Done in 119.58s.

yarn init만 해주고 나머지는 그냥 enter로 skip하면 package.json 파일이 생성 됨

 

4. Webpack 설치

yarn add webpack webpack-cli --dev

yarn add v1.22.17
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Saved lockfile.
success Saved 103 new dependencies.
info Direct dependencies
├─ webpack-cli@4.9.2
└─ webpack@5.68.0
info All dependencies
├─ @discoveryjs/json-ext@0.5.6
├─ @types/eslint-scope@3.7.3
├─ @types/eslint@8.4.1
├─ @types/json-schema@7.0.9
├─ @types/node@17.0.14
├─ @webassemblyjs/floating-point-hex-parser@1.11.1
├─ @webassemblyjs/helper-numbers@1.11.1
├─ @webassemblyjs/helper-wasm-section@1.11.1
├─ @webassemblyjs/wasm-edit@1.11.1
├─ @webassemblyjs/wasm-opt@1.11.1
├─ @webassemblyjs/wast-printer@1.11.1
├─ @webpack-cli/configtest@1.1.1
├─ @webpack-cli/info@1.4.1
├─ @webpack-cli/serve@1.6.1
├─ @xtuc/ieee754@1.2.0
├─ acorn-import-assertions@1.8.0
├─ acorn@8.7.0
├─ ajv-keywords@3.5.2
├─ ajv@6.12.6
├─ browserslist@4.19.1
├─ buffer-from@1.1.2
├─ caniuse-lite@1.0.30001307
├─ chrome-trace-event@1.0.3
├─ clone-deep@4.0.1
├─ colorette@2.0.16
├─ commander@7.2.0
├─ cross-spawn@7.0.3
├─ electron-to-chromium@1.4.64
├─ enhanced-resolve@5.8.3
├─ envinfo@7.8.1
├─ es-module-lexer@0.9.3
├─ escalade@3.1.1
├─ eslint-scope@5.1.1
├─ esrecurse@4.3.0
├─ estraverse@4.3.0
├─ events@3.3.0
├─ execa@5.1.1
├─ fast-deep-equal@3.1.3
├─ fast-json-stable-stringify@2.1.0
├─ fastest-levenshtein@1.0.12
├─ find-up@4.1.0
├─ function-bind@1.1.1
├─ get-stream@6.0.1
├─ graceful-fs@4.2.9
├─ has-flag@4.0.0
├─ has@1.0.3
├─ human-signals@2.1.0
├─ import-local@3.1.0
├─ interpret@2.2.0
├─ is-core-module@2.8.1
├─ is-plain-object@2.0.4
├─ is-stream@2.0.1
├─ isexe@2.0.0
├─ isobject@3.0.1
├─ jest-worker@27.4.6
├─ json-parse-better-errors@1.0.2
├─ json-schema-traverse@0.4.1
├─ loader-runner@4.2.0
├─ locate-path@5.0.0
├─ mime-db@1.51.0
├─ mime-types@2.1.34
├─ mimic-fn@2.1.0
├─ neo-async@2.6.2
├─ node-releases@2.0.1
├─ npm-run-path@4.0.1
├─ onetime@5.1.2
├─ p-limit@2.3.0
├─ p-locate@4.1.0
├─ p-try@2.2.0
├─ path-exists@4.0.0
├─ path-key@3.1.1
├─ path-parse@1.0.7
├─ picocolors@1.0.0
├─ pkg-dir@4.2.0
├─ punycode@2.1.1
├─ randombytes@2.1.0
├─ rechoir@0.7.1
├─ resolve-cwd@3.0.0
├─ resolve-from@5.0.0
├─ resolve@1.22.0
├─ safe-buffer@5.2.1
├─ schema-utils@3.1.1
├─ serialize-javascript@6.0.0
├─ shallow-clone@3.0.1
├─ shebang-command@2.0.0
├─ shebang-regex@3.0.0
├─ signal-exit@3.0.7
├─ source-map-support@0.5.21
├─ source-map@0.6.1
├─ strip-final-newline@2.0.0
├─ supports-color@8.1.1
├─ supports-preserve-symlinks-flag@1.0.0
├─ tapable@2.2.1
├─ terser-webpack-plugin@5.3.1
├─ terser@5.10.0
├─ uri-js@4.4.1
├─ watchpack@2.3.1
├─ webpack-cli@4.9.2
├─ webpack-merge@5.8.0
├─ webpack-sources@3.2.3
├─ webpack@5.68.0
├─ which@2.0.2
└─ wildcard@2.0.0
Done in 7.67s.

 

프로젝트 폴더에 webpack.config.js 파일 생성 (이 파일 기반으로 webpack 설정)

1
2
3
4
5
6
7
8
9
10
11
// webpack.config.js
 
const path = require('path');
 
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}
cs

path : Node에서 제공하는 경로작업을 위한 패키지 (path.resolve를 사용하면 인자로 넘겨준 값을 합쳐 경로 반환)

entry : 처음 시작하는 파일의 경로로 입력해주면 그와 연결된 모든 파일이 모여 하나의 파일로 생성

output : 만들어진 파일은 output의 filename에 적힌 이름은로 path에 적힌 경로에 저장

 

yarn add --dev webpack webpack-dev-server
yarn add @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript vue vue-loader vue-template-compiler babel-loader css-loader vue-style-loader html-webpack-plugin rimraf style-loader sass-loader node-sass -D

프로젝트에 의존성 설치 (필요한걸 골라서 설치하면 됨)

 

.babelrc.js 파일을 새로 생성하고 다음과 같이 입력

1
2
3
4
5
// .babelrc
 
module.exports = {
    'presets': ['@babel/preset-env']
}
cs

preset-env : 자바스크립트의 확정되지 않은 proposal 스펙의 모든 stage의 preset

 

webpack.config.js파일을 아래와 같이 수정

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// webpack.config.js
 
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
 
module.exports = {
    entry: './index.html',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.js$/i,
                use: 'babel-loader'
            },
            {
                test: /\.css/i,
                use: ['style-loader''css-loader']
            }
            , {
                test: /\.vue/i,
                use: 'vue-loader'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin()
    ]
}
cs

package.json 파일에 아래와 같이 추가

1
2
3
4
5
6
7
{
    "scripts": {
        "build""webpack -w",
        "serve""webpack-dev-server --mode development",
        "dev-server""webpack-dev-server --open"
    }
}
cs

 

index.html 파일을 만들고 실행하면 정상으로 실행 됨

 

서버 실행

yarn run serve

'Programming > [Node.js]' 카테고리의 다른 글

[Node.Js] Node.Js - Gulp & BrowserSync  (0) 2019.06.13
[Node.js] Node.JS  (0) 2019.06.12