[Webpack]Setting

이런 패키지 개발환경 생성하는게 더 힘들다 ...

일단 packeage.json생성을 위해

npm init

이후

npm i -g webpack webpack-cli && npm i -D webpack webpack-cli

를 통해 웹팩을 설치하자

i = install

이 때 커맨드로 설치 할 시에, 관리자 권한으로 실행

powershell에선 그냥 실행해서 될 때까지 해봐야 함 ㅠㅠ

설치가 됬다면

webpack.config. js파일

index.js파일을 만들자

webpack.config.js는 어떻게 웹팩을 다룰 건지에 대한 것을 적을꺼임

const path = require("path")

const webpack = require("webpack")

const UglifyJsPlugin = require("uglifyjs-webpack-plugin")

module.exports = {

entry: "./index.js",

output: {

path: path.resolve(__dirname, "dist"),

filename: "bundle.js"

},

mode: "production",

module: {

rules: [

{

test: /\.js$/,

loader: "babel-loader",

options: {

presets: ["@babel/preset-env"]

}

}

]

},

optimization: {

minimizer: [

new UglifyJsPlugin({

/* your config */

})

]

}

}

위 코드인데

entry는 어떤 파일을 자바스크립트 모듈화 시킬 것인지에 대한 것이다.

웹팩에서 모든 것은 모듈이다. 자바스크립트, 스타일시트, 이미지 등 모든 것을 자바스크립트 모듈로 로딩해서 사용하도록 한다.

위 그림처럼 자바스크립트가 로딩하는 모듈이 많아질수록 모듈간의 의존성은 증가한다. 의존성 그래프의 시작점을 웹팩에서는 엔트리(entry)라고 한다.

웹팩은 엔트리를 통해서 필요한 모듈을 로딩한고 하나의 파일로 묶는다.

path같은 경우 어디에 export되어 질 것인가이고

dist라는 폴더에 bundle.js라고 저장되어지게 되어있다.

module은 어떤 기능? 인지에 관한 것이고

test는 자바스크립트

loadder 는 babel-loader를 이용한다

yarn add @babel/cli @babel/core babel-loader @babel/preset-env webpack webpack-cli --dev

loader는 우리가 사용중인 es6를 브라우저가 이해 할 수 있게 es5로 치환해준다.

optimization은 추가사항 정도로 보여지는데

babel에 있는 기능 중 

UglifyJs라는 플러그인을 이용하여

우리의 코드를 압축시키는 역할을 한다!