✨ Webpack을 설치하자

이번에 웹펙을 설치하면서 공부했던 기록을 남깁니다.

1. package.json 만들기

package.json 파일을 만들기 위해서는

npm init -y

입력해주시면 됩니다.

2. 기본적으로 설치해야할 기능들과 플러그인들

//가장 기초적으로 깔아야 할 것
npm i -D webpack webpack-cli

//css를 설정하기 위한 로더
npm i -D css-loader

//css style을 웹에서 적용하기 위한 로더
npm i -D style-loader

//파일들을 다루기 위한 로더
npm i -D file-loader

//html을 불러오기 위한 로더
npm i -D html-webpack-plugin

//기존에 있던 dist파일에 있던 것들 삭제하는 기능 로더
npm i -D clean-webpack-plugin

//개발서버 오픈하기 위한 로더
npm i -D webpack-dev-server

이렇게 기초적으로 깔아야 할 것들을 깔아줍니다.

3. 파일 디렉토리 파악

현재 파일은 이런식으로 들어가 있습니다.

4. webpack.config.js 파일 만들기

해당 파일 이름으로 만들어주세요.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: './src/main.js',
    output: {
        path: path.resolve('./dist'),
        filename: '[name].js',
    },
    devServer: {
        port: 3000,
        open: true,
        hot: true,
        historyApiFallback: true,
        static: {
            directory: path.resolve('./dist'),
        },
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: [/\.png$/, /\.jpg$/, /\.gif$/],
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                        },
                    },
                ],
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
        }),
        new CleanWebpackPlugin(),
    ],
};

앞에 설치했던 모듈들을 불러오는 것 입니다.

5. build, run server

package.json 파일에서 해당 내용으로 변경해주세요.

"scripts": {
    "build": "webpack",
    "dev": "webpack serve --open"
  },

추가적으로 해당 파일들이 잘 있는 지 확인해주세요.
이 파일들도 package.json에 들어가 있습니다.

"devDependencies": {
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^6.8.1",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.5.3",
    "style-loader": "^3.3.3",
    "webpack": "^5.88.2",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  },

모든게 됐다면
npm run dev 하면 지정한 포트주소로 개발서버가 열리고
npm run build하면 dist폴더가 생성되면서 빌드된 파일들이 보입니다

끝~