Webpack 셋팅하기 1

Webpack 설치

$ npm init -y
$ npm install webpack webpack-cli --save-dev

webpack.config.js 파일을 생성

// webpack.config.js

const path = require("path"); // 노드에서 제공하는 패스모드 활용

module.exports = {
	entry : './src/index.js', // 시작파일
    output : { // 만들어지는 최종파일을 내보내는 옵션
    	filename : "main.js",
        path : path.resolve(__dirname, "dist"), // 폴드 현재경로 하위 -> 폴더명
    },
}

package.json에서 빌드 모드 추가해주기

// package.json

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

$ npm run build

여기까지 하면 빌드된 main.js 파일이 dist 폴더에 생성된다.

하지만 배포하기 위해선 index.html 파일이 필요하니 html 플러그인을 설치하겠다.

$ npm i html-webpack-plugin

// webpack.config.js

const path = require("path"); // 노드에서 제공하는 패스모드 활용
const HtmlWebpackPlugin = require("html-webpack-plugin"); // 터미널에 설치후 사용

module.exports = {
	entry : './src/index.js', // 시작파일
    output : { // 만들어지는 최종파일을 내보내는 옵션
    	filename : "main.js",
        path : path.resolve(__dirname, "dist"), // 폴드 현재경로 하위 -> 폴더명
    },
    plugins : [new HtmlWebpackPlugin({
    		template : "./index.html",
    	}
    )],
 };

$ npm run build

여기까지 하면 이후 파일을 수정할 때마다 직접 run build를 하고 직접 서버를 띄워야 해서 불편하다.

이때 아래의 명령어를 설치해주면 자동으로 서버를 띄워줘서 편해진다!

$ npm i webpack-dev-server -D

// webpack.config.js

const path = require("path"); // 노드에서 제공하는 패스모드 활용
const HtmlWebpackPlugin = require("html-webpack-plugin"); // 터미널에 설치후 사용

module.exports = {
	entry : './src/index.js', // 시작파일
    output : { // 만들어지는 최종파일을 내보내는 옵션
    	filename : "main.js",
        path : path.resolve(__dirname, "dist"), // 폴드 현재경로 하위 -> 폴더명
    },
    plugins : [
    	new HtmlWebpackPlugin({
    		template : "./index.html",
    	}),
    ],
    devServer : {
    	static : {
        	directory : path.resolve(__dirname, 'dist')
        },
        port : 8080
    }
};

// package.json

"scripts": {
	"start" : "webpack serve --open --mode=development", 
    // webpack devServer는 개발자 모드에서만 사용가능
	"build" : "webpack --mode=production",
    // 개발모드로 빌드시 코드가 더 복잡하게 나옴. 디버깅하기 좋으나 배포는 프러덕션 모드로 진행
}

 

https://www.youtube.com/watch?v=zal9HVgrMaQ