웹팩으로 번들링하기

김남경·2023년 1월 18일

react

목록 보기

21/37

기초

📗 npm init

npm init -y

📗 package.json 확인

//package.json
{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
}

파일 생성

📗 내용 만들기
src 폴더 아래 html, css, js 파일 생성

📗 확인

node src/index.js

웹팩

📗 설치하기

npm install -D webpack webpack-cli

devDependency 옵션을 설정한 상태

📗 webpack.config.js 생성하기

const path = require('path');

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

package.json과 같은 폴더 아래

번들링하기

📗 번들링

npx webpack

📗 확인

node dist/app.bundle.js

📗 단축 명령어 설정

//package.json
{
  //...
  "scripts": {
	"build": "webpack",
  },
  //...
}

CSS

📗 index.html 실행해보기
index.html 라이브 서버로 실행

Uncaught ReferenceError: require is not defined

📗 CSS 추가
dist/index.html 로 이동

// src/index.js
require('./style.css');

📗 확인

node src/index.js

SyntaxError: Unexpected token “*”

📗 로더 설치

npm i -D css-loader style-loader

📗 webpack.config.js 로더 추가

// webpack.config.js
const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "app.bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
        exclude: /node_modules/,
      },
    ],
  },
};

HTML

📗 플러그인 설치

npm i -D html-webpack-plugin

📗 webpack.config.js 플러그인 추가

//webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "app.bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [new HtmlWebpackPlugin({
    template: path.resolve(__dirname, "src", "index.html")
  })]
};

dev(개발) & prod(배포) 모드 설정

📗 플러그인 설치

npm i webpack-merge —save-dev

📗 파일 생성(common, dev, prod)

common
webpack.config.js 와 동일

dev

//webpack.config.dev.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common');

module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    //contentBase: './dist'
    port: 3001,
  }
});

prod

//webpack.config.prod.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common');

module.exports = merge(common, {
  mode: 'production'
});

📗 모드에 따라 설정 다르게 하기

//package.json
{
  //...
  "scripts": {
    "build": "webpack --config webpack.config.prod.js",
    "dev": "webpack-dev-server --open --config webpack.config.dev.js",
  },
  //...
}