[유튜브 클론코딩] 4. WEBPACK - 설치 및 설정

Webpack이란

- 최신 프런트엔드 프레임워크에서 가장 많이 사용되는 모듈번들러

- 모듈 번들러: 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javascript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구

** 즉, 프로젝트 작업을 하다보면 HTML CSS Javascript Image 등 파일 수가 엄청 많아지는데 이를 하나로 묶어주는 도구를 말하는 것이다.

 

★ 노마드코더 강의가 현 기준으로 몇 년 된 강의라서 웹팩도 바뀐 점이 많아 강의를 그대로 따라하면 안되는 부분이 많았다.

다행히 덧글에 천사😇분들께서 해결방법을 알려주셔서 그대로 따라했다!,,,,

 

1. extract-text-webpack-plugin가 webpack이 4버전으로 넘어오면서

mini-css-extract-plugin 로 바꾸셔야합니다.

=> npm install --save-dev mini-css-extract-plugin

2. 자세한건 깃헙링크에서 webpack.config.js참고해주세요

3. 깃헙코드에 package.json 보시면 devDependencies에 있는 것들 빠짐없이 설치되어있나 확인해주세용

=================================

const path = require("path");

const autoprefixer = require("autoprefixer");

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

const MODE = process.env.WEBPACK_ENV;

const ENTRY_FILE = path.resolve(__dirname, "assets", "js", "main.js");

const OUTPUT_DIR = path.join(__dirname, "static");

const config = {

  entry: ENTRY_FILE,

  mode: MODE,

  module: {

    rules: [

      {

        test: /\.(scss)$/,

        use: [

          {

            loader: MiniCssExtractPlugin.loader

          },

          {

            loader: "css-loader"

          },

          {

            loader: "postcss-loader",

            options: {

              postcssOptions: {

                plugins: [

                  [

                    'autoprefixer',

                    {

                      //options

                      browsers: "cover 99.5%"

                    },

                  ]

                ]

              }

            }

          },

          {

            loader: "sass-loader"

          }

        ]

      }

    ]

  },

  output: {

    path: OUTPUT_DIR,

    filename: "[name].js"

  },

  plugins: [

    new MiniCssExtractPlugin({

      // Options similar to the same options in webpackOptions.output

      // both options are optional

      filename: 'styles.css'

    }),

  ]

};

module.exports = config;

 

출처: 해당 강의 woojungbum12님 덧글 

 

추가로 도움받은 곳( 정말 감사합니다 )

klossom/webpack.config.js at 9ba480840e35b4155a3766faeae9740b31b4d33c · jungbumwoo/klossom · GitHub

https://velog.io/@mollang/191108-webpack-mhk2ps8ziu

<webpack> 설치 및 설정 (velog.io)

 

 

_variables.scss 파일 만들기

그리고 assets > scss > config 안에 _variables.scss 파일을 만들어서 스타일링을 위한 변수들을 지정해놓았다. 예를 들면 $bgColor = red 이런식으로 이런 걸 위한 파일을 만들었다.