[WebPack] 시작하기 (Step2)

티스토리 뷰

[웹]/WebPack

[WebPack] 시작하기 (Step2)

삼손스 2019. 11. 27. 14:28

lodash의존성을 번들로 묶으려면 index.js라이브러리를 로컬로 설치해야합니다.

npm install --save lodash

자바스크립트 유틸리티 라이브러리 lodash
array, collection, date, number, object등을 다룰 수 있는 라이브러리
배열 안의 객체들의 값을 핸들링할때 유용

자주 사용되는 기능
filter
- 배열 안에 요소들 중 특정 값만 filter할때

map
- 배열 안에 객체 요소 중, 특정 요소만 빼서 배열로 만들고 싶은 경우

uniqBy
- 배열 안에 객체 요소 중 중복을 제거하고 싶을 때

src / index.js

+ import _ from 'lodash';
+
  function component() {
    const element = document.createElement('div');

-   // Lodash, currently included via a script, is required for this line to work
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    return element;
  }

  document.body.appendChild(component());

dist / index.html

  <!doctype html>
  <html>
   <head>
     <title>Getting Started</title>
-    <script src="https://unpkg.com/lodash@4.16.6"></script>
   </head>
   <body>
-    <script src="./src/index.js"></script>
+    <script src="main.js"></script>
   </body>
  </html>

npx webpack 입력

npx 는 현재 프로젝트에 설치된 디펜던시를 마치 Path로 잡아 놓은 것 마냥 바로 사용할 수 있게 해주는 명령이다. npm에 포함되어 있다.

구성 사용

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

npx webpack --config webpack.config.js 입력

구성 파일은 단순한 CLI 사용법보다 훨씬 더 융통성이 있습니다.

이 방법으로 로더 규칙, 플러그인, 분석 옵션 및 기타 여러 개선 사항을 지정할 수 있습니다

NPM 스크립트

CLI에서 웹팩의 로컬 사본을 실행하는 것이 불편하다면 단축키를 설정할 수 있습니다.

npm 스크립트 를 추가하여 package.json 을 조정 해 봅시다.

package.json

  {
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
    "scripts": {
- "test": "echo \"Error: no test specified\" && exit 1"
+ "test": "echo \"Error: no test specified\" && exit 1",
+ "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "webpack": "^4.20.2",
      "webpack-cli": "^3.1.2"
    },
    "dependencies": {
      "lodash": "^4.17.5"
    }
  }

이제 이전에 사용한 명령 npx명령 대신 npm run build 명령어로 간편하게 사용할 수 있습니다

'[웹] > WebPack' 카테고리의 다른 글

[WebPack] 코드분할 방법 (0)	2019.11.29
[WebPack] webpack-dev-server 서버 구축 (Step5) (0)	2019.11.27
[WebPack] HtmlWebpackPlugin (Step4) (0)	2019.11.27
[WebPack] 자산관리 Asset (Step3) CSS, IMG, FONT, DATA (0)	2019.11.27
[WebPack] 시작하기 (Step1) (0)	2019.11.27

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

티스토리 뷰