ch9. webpack

1. intro

• 백엔드js 는 babel-node로 처리,
• 프론트는 webpack으로 처리 
• 일반css말고 scss사용할거 >> 이걸 css로 바꿔주는과정 필요 
  • 이런거 다 webpack 이 함
  • 실무에서 웹팩을 직접쓸일은 없을거임.  이미 웹팩내장된 다른걸씀
  • gulp >> webpack 쉬운 대체버전 (but 그만큼 유용하진 않음)

2. webpack config

• jpg 용량줄이기,.. 코드를 압축, 변형, 최소화 시킴
• entry : src code 

[comandLine]
npm i webpack webpack-cli --save-dev  (== -D)
=======================
src/client/js/[main.js] 생성

const hello = async () => {
  alert("hi its working");
  const x = await fetch("");
};

hello();

=======================
[webpack.config.js]
module.exports = {
  entry: "./src/client/js/main.js", // 변경할 src code위치
  output: {
    filename: "main.js", // 결과물 어디다 넣을건지
    path: "./assets/js",
  }
};
=======================
 [package.json]
  "scripts": {
    ~~
    "assets": "webpack --config webpack.config.js" 
  },
  
  >>>>>>>
  npm run assets

• 이대로하면 절대경로아니라고 오류남 

const path = require("path");

console.log(path.resolve(__dirname, "assets", "js"));
// >> C:\Users\joj10\git\repository3\youtube\assets\js

==============
>> 이거래도 path설정
path: path.resolve(__dirname, "assets", "js"),

• >> assets/js/main.js 폴더, 파일생성됨

• rules >> css, js 파일을 변환시킬거 설정
• babel-loader >> 프론트랑 벡엔드 양쪽에서 babel/core & babel/preset-env 사용할거
  • npm install -D babel-loader

[webpack.config.js]
module: {
  rules: [
    {
      test: /\.js$/,
      use: {
        loader: "babel-loader",
        options: {
          presets: [["@babel/preset-env", { targets: "defaults" }]],
        },
      },
    },
  ];
}

• assets폴더 생긴거 지우고 다시 실행
• dev 모드로 바꾸기 (default : production mode)

[webpack.config.js]
module.exports = {
  entry: "./src/client/js/main.js", // 변경할 src code위치
  mode: "development",
  ~~

• >>  브라우저는 webpack 실행되고나서 생성된assets파일을 볼거임
• static file : express한테 사람들이 이 폴더안에있는 파일들을 볼수있게해달라 요청 

[server.js]
app.use("/static", express.static("assets"));

------------
[base.pug]
~~~
script(src="/static/js/main.js")
------------

3. scss loader

• src/client/scss/_variables.scss, styles.scss 생성
• npm install sass-loader sass webpack --save-dev
• npm install --save-dev css-loader
• npm install --save-dev style-loader
• webpack.config.js 에 역순으로 주입

[webpack.config.js]
module.exports = {
    module: {
      rules: [
        {
          ~~~
        },
        {
          test: /\.scss$/,
          use: ["style-loader", "css-loader", "sass-loader"],
        },
      ];
    }

4. miniCssExtractPlugin

• style-loader대신 이거쓸거임

npm install --save-dev mini-css-extract-plugin
==========
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: "./src/client/js/main.js", 
  plugins: [
    new MiniCssExtractPlugin({
      filename: "css/styles.css",
    }),
  ],
  mode: "development",
  output: {
    filename: "js/main.js", // << 수정함
    path: path.resolve(__dirname, "assets"), // << 수정함
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],

======================
[base.pug]
head 
	link(rel="stylesheet", href="/static/css/styles.css")

5. better dev experience

• 자동으로 assets폴더 지우기
• npm run assets자동으로 하기

module.exports = {
  ~~
  watch: true,
   output: {
    ~~
    clean:true,  // >> webpack 재시작시 안쓰는폴더는 제거하고 생성
  },

• 콘솔 두개돌려야함 >> npm run assets용, npm run dev용 >> 동시에 가동되고있으면 됨
• 프론트엔드 재시작한다고 백엔드 재시작하고싶지 않음 >> 
  • 1. nodemon.json 파일 생성

https://github.com/remy/nodemon

• 2. 위코드처럼 넣기

[package.json]
 "scripts": {
    "dev:server": "nodemon",
    "dev:assets": "webpack --config webpack.config.js"
  },
===================
[nodemon.json]
{
    "ignore": ["webpack.config.js", "src/client/*","assets/*"],
    "exec": "babel-node src/init.js"
}