Webpack 환경구성 및 webpack.config.js

프동프동·2022년 10월 15일

목록 보기

1/1

webpack 테스트를 하기 위한 기본 세팅

npm이 설치되어 있는 상태
lodash 설치

npm i --save lodash

[index.html]

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Webpack Demo</title>
</head>
<body>
  <!-- <script src="./index.js"></script> -->
  <script src="./dist/main.js"></script>
</body>
</html>

[src/index.js]

import _ from 'lodash';

function component() {
  var element = document.createElement('div');

  element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  return element;
}

document.body.appendChild(component());

webpack 설치

npm i webpack webpack-cli -D

package.json 파일 수정

"scripts":{
	"build": "webpack"
}

명령 실행

npm run build

webpack -mode 옵션

mode에는 development와 production이 존재한다.

위와 같이 mode를 설정하지 않고 npm run build를 실행하면 아래와 같은 WARNING이 출력된다.

package.json에 webpack 명령어만 입력했을 경우 터미널 창에 출력되는 결과

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: [https://webpack.js.org/configuration/mode/](https://webpack.js.org/configuration/mode/)

출력결과

[dist/main.js]

/*! For license information please see main.js.LICENSE.txt */
(()=>{var n={486:function(n,t,r){var e;n=r.nmd(n),function(){var u,i="Expected a function",o="__lodash_hash_undefined__",f="__lodash_placeholder__",a=32,c=128,l=1/0,s=9007199254740991,h=NaN,p=4294967295,v=[["ary",c],["bind",1],["bindKey",2],["curry",8],["curryRight",16],["flip",512],["partial",a],["partialRight",64],["rearg",256]],_="[object Arguments]",g="[object Array]",y="[object Boolean]",d="[object Date]",b="[object Error]",w="[object Function]",m="[object GeneratorFunction]",x="[object Map]",j="[object Number]",A="[object Object]",k="[object Promise]",O="[object RegExp]",I="[object Set]",R="[object String]",E="[object Symbol]",z="[object WeakMap]",S="[object ArrayBuffer]",L="[object DataView]",W="[object Float32Array]",C="

dist/main.js의 내용이 알아볼 수 없을 정도로 출력된다.

Mode: none으로 변경 후 재빌드

"scripts":{
	"build": "webpack --mode=none"
}

변경 후 npm run build

package.json에 webpack --mode=none 명령어 입력했을 경우

/******/ (() => { // webpackBootstrap
/******/ 	var __webpack_modules__ = ([
/* 0 */,
/* 1 */
/***/ (function(module, exports, __webpack_require__) {

/* module decorator */ module = __webpack_require__.nmd(module);
var __WEBPACK_AMD_DEFINE_RESULT__;/**
 * @license
 * Lodash <https://lodash.com/>
 * Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
 * Released under MIT license <https://lodash.com/license>
 * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
 * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
 */

webpack 옵션 관리(webpack.config.js)

package.json에 매번 "webpack --옵션A, --옵션B..." 하는 것은 가독성에도 좋지 않을 뿐더러 수정시에도 많은 어려움이 따른다.

[package.json]

webpack —mode=none —entry=src/index.js —output=public/output.js ... ... ...

이에 대한 방법으로
최상위 폴더 하위에 "webpack.config.js"폴더를 만들어 관리하면 편해진다.

[package.json]

"build": "webpack"

[webpack.config.js]

var path = require('path');
module.exports = {
  mode: 'none',
  entry: './src/index.js',
  output: {
    filename: 'output.js',
    path: path.resolve(__dirname, 'public'),
  },
};

프동프동

좋은 개발자가 되고싶은