express 와 webpack 을 이용한 빌드환경 구성 코드 (+ 코드위주 +generator 미사용)

express 와 webpack 을 이용한 빌드환경 구성

: index.html 과 index.js 를 번들로 만듦

1) npm 설치

npm install
npm init -y 
npm install express --save

2) 폴더 구조 생성

외부	src	public
server.js (app.js)	index.html	번들된 파일 자리
webpack.config.js	index.js
.gitignore	styles.scss

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
...
    <title>Document</title>
  </head>
  <body>
    <div class="main-cont">test</div>
  </body>
</html>

index.js

import './style.scss';
document.querySelector('.main-cont').style.color  = 'red';

3) babel 설정

//babel  필수 모듈
npm install @babel/core @babel/cli @babel/preset-env --save-dev

//babel polyfill 사용해보기
npm install --save core-js@3

//proposal plugin 별도 설치
npm install --save-dev @babel/plugin-proposal-class-properties

< babel.config.json >

{
    "presets": [
        [
            "@babel/preset-env",
            {
             "targets" : { 
                 "ie":11
             },
             "useBuiltIns" : "usage",
             "corejs" : {"version": 3, "proposals": true }
            }
        ]
    ],
    "plugins": [ 
        ["@babel/plugin-proposal-class-properties", { "loose": true }]
    ]
}

4) webpack 설정

//webpack 설치
npm install webpack webpack-cli --save-dev

//babel 연동
npm install babel-loader --save-dev

//webpack plugin  설치
npm install --save-dev html-webpack-plugin

//mini-css-extract-plugin 설치 
npm i -D style-loader css-loader mini-css-extract-plugin

const path = require("path");
//HTML 플러그인
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "development",
  devtool: "source-map", //크롬에서 디버깅 가능하도록 원본코드같이 bundle
  entry: "./src/index.js", //진입점
  output: {
    path: path.resolve(__dirname, "public"), // bundle만들어질 장소
    filename: "index.bundle.js", // bundle 될 파일 이름
    publicPath: "http://localhost:3000/public" //웹팩 미들웨어 장소
  },
  module: {
    rules: [
      {
        test: /\.js$/, //.js 파일 templating
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
      {
        test: /\.(sa|sc|c)ss$/, //scss,sass,css templating
        use: [MiniCssExtractPlugin.loader,"css-loader", "sass-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "src/index.html", //html  webpack플러그인을 통해 html 파일도 함께 bundle
    }),
    new MiniCssExtractPlugin({ // style 태그 대신 css 파일도 함께 bundle
      filename: 'style.css',
      chunkFilename: 'style.css',
    }),
  ],
};

❖ style태그로 추가하는 경우

{
        test: /\.(sa|sc|c)ss$/, //scss,sass,css templating
        use: ["style-loader", "css-loader", "sass-loader"],
      },

* sass-loader : sass파일들 읽어 css로 넘김

* css-loader : css 파일들 읽음

* style-loader : css파일들 -> style태그로 만들어 head에 넣어줌

뒤에서부터 차례대로 실행됨

❖ css

{
        test: /\.(sa|sc|c)ss$/,
        use: [MiniCssExtractPlugin.loader,"css-loader", "sass-loader"],
      },

css 파일 따로 만드는 경우

webpack 미들웨어

webpack 이 서버( ex)express)에서 동작하도록 미들웨어로 설정하는 것

npm i -D webpack-dev-middleware

webpack-middleware 부분만 따로보면

cosnt webpackDevMiddleware = require('webpack-dev-middleware');
const webpack = require('webpack');
cons webpackConfig = require('./webpack.config.js');
const compiler = webpack(webpackConfig)

server.use(webpackDevMiddleware(compiler,{
	publicPath: webpackConfig.output.publicPath,
    
 }))
 
 //webpack.config.js  
 output: {
 
 	paht: ~~
 	filename:~~
 	publicPath: "http://localhost:3000/public"
 }

< server.js (app.js) >

const express = require("express");
const path = require("path");
const server = express();

//webpack 미들웨어 사용
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpack = require('webpack');
const webpackConfig = require('./webpack.config.js');
const compiler = webpack(webpackConfig);

server.use(webpackDevMiddleware(compiler, {
  publicPath: webpackConfig.output.publicPath,
}))

//포트번호 3000
server.set("port", 3000);

//bundle된 index.html '/' 주소로 요청
server.get('/', (req, res) => {
  res.sendFile(path.resolve(__dirname, "public/index.html"));
});

server.listen(server.get("port"), () => {
  console.log("http://localhost:" + server.get("port"));
});

5) package.json 설정

* nodemon 설치

nodemon은 나의 local개발환경에서만 필요하며, 또 계속 사용해야 하기 때문에 전역 설치함 (이미 되있으면 패스!)

npm install -g nodemon

❤ webpack middleware 설정전

 "scripts": {
    "build": "webpack --watch --mode development",
    "server": "nodemon ./server.js",
    "start": "concurrently \"webpack --watch --mode development\" \"nodemon ./server\""
  },

concurrently 를 이용해 webpack bundle 과 nodemon으로 서버 동작이 동시에 가능하도록 함

❗️굳이 webpack bundle 을 따로 할 필요가 없음

webpack middleware 가 서버 실행시 자동으로 bundle하기 때문

❤ webpack middleware 설정 후

  "scripts": {
    "start": "node ./server.js",
    "build": "webpack -w"
  },

nodemon을 사용하면

npm satrt로 한번 서버 오픈 후 => 변경사항이 webpack에 반영이 안되는 문제 발생

+ nodemon을 사용하지 안혹 node로만 실행하기로 설정한 후부터

npm start로 서버 오픈후 css 와 index를 변경하여도 바로바로 웹팩 -> 서버에 적용이 되었다.

기본 설정 완료!@!!!!!!

이제 개발을 시작하세요~.~

'⚙️ 개발환경설정' 카테고리의 다른 글

WebStorm 단축키 모음 - 유용한 Mac 단축기모음 (2)	2023.07.15
[GitHub] PR Draft - PR 작업중표시 및 리뷰 일시정지 (0)	2022.11.14
Express에 Webpack & Babel 을 이용한 ES6 환경 설정 ( +generator 사용편) (0)	2021.03.29
Node.js 파일 변경 시 웹서버 자동반영 설정 (2)	2021.02.23
Oh My ZSH+ iTerm2 로 맥 터미널 환경 만들기 (0)	2021.02.08

express 와 webpack 을 이용한 빌드환경 구성 코드 (+ 코드위주 +generator 미사용)