webpack

backend: Babel Node.js 에서 우리가 작성 섹시 JavaScript를 못생긴 애로 변환시켜주는 거

frontend: Webpack 브라우저에서 우리가 작성한 섹시 JavaScript랑 CSS 를 못생긴 애로 변환시켜주는 거

Webpack은 .jpg 같은 거는 압축된 jpg 를 주고, JS 는 못생긴 거로, Sass 는 몬생긴 css 로 준다. 압축, 변형, 최소화등 필요한 작업들을 거치고 정리된 코드를 결과물로 준다.

npm i webpack webpack-cli --save-dev

webpack.config.js 파일에서 webpack 환경설정. 이 파일에서는 되게 못생긴 JS 만 쓸 수 있다.

중요한 거 두 가지(필수 설정)

• entry: 우리가 처리하고자 하는 파일들(예쁜 js)
• entry: 이 프로퍼티에 우리가 처리하고자 하는 파일의 경로 입력
• output: 결과물
• filename: 이 프로퍼티에 우리 결과물이 될 파일 이름 입력
• path: 이 프로퍼티에 우리 결과물 파일을 어디에 저장할 지 지정 (이 경로는 절대경로여야 해!)

webpack.config.js

module.exports = {
  entry: './src/client/js/main.js',
  output: {
    filenmae: 'main.js',
    path: './assets/js',
  },
};

package.json

"scripts": {
    "dev": "nodemon --exec babel-node src/init.js",
    "assets": "webpack --config webpack.config.js"
  },

webpack은 상대경로가 아닌 절대경로를 원함.
__dirname은 절대경로를 path.resolve()는 입력한 파트들을 모아서 경로로 만들어줌.

호환성 추가

npm i babel-loader

rules는 우리가 각각의 파일 종류에 따라 어떤 전환을 할 건지 결정.

const path = require('path');

module.exports = {
  entry: './src/client/js/main.js',
  mode: 'development',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'assets', 'js'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [['@babel/preset-env', { targets: 'defaults' }]],
          },
        },
      },
    ],
  },
};

express.static은 express한테 사람들이 이 폴더 안에 있는 파일들을 볼 수 있게 해달라고 요청하는거.

app.use('/static', express.static('assets'));

loader는 파일들을 변환하는 장치
scss는

npm i sass style-loader css-loader sass-loader --save-dev

const path = require('path');

module.exports = {
  entry: './src/client/js/main.js',
  mode: 'development',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'assets', 'js'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [['@babel/preset-env', { targets: 'defaults' }]],
          },
        },
      },
      {
        test: /\.scss$/,
        // 맨 끝에서 부터 시작함.(sass->css->style)
        // sass-loader는 scss를 가져다가 일반 css로 변형
        // css-loader는 폰트같은걸 불러올때 css에 유용하게 쓰일 loader.
        // style-loader는 변환한 css를 웹사이트에 적용시킬 loader.
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
    ],
  },
};

style-loader이라는 loader를 사용하면, javascript코드가 css파일을 읽는데,
우리는 css파일 따로, js파일 따로 웹팩으로 번들화 시키고싶다. 한번에 할 경우 js 로딩을 기다려야하기 때문이다.
그래서 MiniCssExcractPlugin.loader를 사용한다.

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');

module.exports = {
  entry: './src/client/js/main.js',
  mode: 'development',
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/styles.css',
    }),
  ],
  output: {
    filename: 'js/main.js',
    path: path.resolve(__dirname, 'assets'),
  },
  // loader는 파일들을 변환하는 장치
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [['@babel/preset-env', { targets: 'defaults' }]],
          },
        },
      },
      {
        test: /\.scss$/,
        // 맨 끝에서 부터 시작함.(sass->css->style)
        // sass-loader는 scss를 가져다가 일반 css로 변형
        // css-loader는 폰트같은걸 불러올때 css에 유용하게 쓰일 loader.
        // style-loader는 변환한 css를 웹사이트에 적용시킬 loader.
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
      },
    ],
  },
};

watch를 추가하면 webpack을 종료하지 않고 계속 볼거임.
clean은 output foler를 build를 시작하기 전에 clean 해주는거.
두가지 콘솔을 함께 구동하는데 익숙해져야함.
하나는 백엔드 구동 하나는 client파일들을 watch

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');

module.exports = {
  entry: './src/client/js/main.js',
  mode: 'development',
  watch: true,
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/styles.css',
    }),
  ],
  output: {
    filename: 'js/main.js',
    path: path.resolve(__dirname, 'assets'),
    clean: true,
  },
  // loader는 파일들을 변환하는 장치
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [['@babel/preset-env', { targets: 'defaults' }]],
          },
        },
      },
      {
        test: /\.scss$/,
        // 맨 끝에서 부터 시작함.(sass->css->style)
        // sass-loader는 scss를 가져다가 일반 css로 변형
        // css-loader는 폰트같은걸 불러올때 css에 유용하게 쓰일 loader.
        // style-loader는 변환한 css를 웹사이트에 적용시킬 loader.
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
      },
    ],
  },
};

프론트엔드가 바뀐다고 backend가 다시 재시작하기 원하지 않으므로 nodemon을 설정

{
  "ignore": ["webpack.config.js", "src/client/*", "assets/*"],
  "exec": "babel-node src/init.js"
}

// nodemon이 nodemon.json파일을 자동으로 찾아감. webpack도 마찬가지 webpakc.config.js를 찾아감.

"scripts": {
    "dev:server": "nodemon",
    "dev:assets": "webpack"
  },