[webpack]노마드 코더 유튜브 클론코딩 webpack part

 

 

* webpack 사용 npm =>  npm i webpack webpack-cli

---

1. webpack은 최신 JS, scss 등을 압축, 변형등의 과정을 거쳐 브라우저가 이해할 수 있도록 만들어 주는 것

 

정말 구식 JS만을 webpack 코드에 적어야 하기에 import가 아니라 const / export default 이 아니라 module.exports를 사용해야 함

 

webpack configuration 파일에는  entry가 필수

entry는 소스코드를 의미함 (처리해야 할 소스코드가 들어 있는 파일)

 

또한 webpack의 저장 경로는 path에서 설정하는데 이 때 절대경로로 설정해야 함. 

- 절대경로란, 정확히 찾아들어갈 수 있는 경로. 예를 들자면  => /user/컴퓨터사용자명/document/폴더명

-> 이렇게 적어야 하는 부분을 resolve(__dirname)이 대신 해줌

 

module.exports = {
    entry:'./src/폴더명/js/main.js',
    output:{
        filename:"main.js",
        path:path.resolve(__dirname,"assets","js"),
    }
}

 

 

* 다음에 알아야 할 것은 rules

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

- rules/loader에 어떤 파일을 전환할 건지를 적어줌

 

const path = require("path");

module.exports = {
    entry:'./src/frontend/js/main.js',
    
    --> 모드를 설정하지 않으면 production으로 되어 main.js에 코드가 압축이 되어 저장되게 됨.
        개발중에는 코드를 살피기 위해서 mode를 development로 설정
        
    mode:"development",
    output:{
        filename:"main.js",
        path:path.resolve(__dirname,"assets","js"),
    },
    module :{
        rules: [
            {
               test: /\.js$/,
               use: {
               
          -----> 요기 위에 부분은 필수로 적용해야 하는 부분. 아래부터는 사용하는 
                	loader에 따라 적어야 할 것이 달라짐 
                loader:'babel-loader',
                options:{
                    presets:[["@babel/preset-env",{targets:"defaults"}]],
                },

               },
            },
        ],
    },
};

 

src 아래에 설정한 폴더에는 내가 작성할 코드가 적혀 있고 

path에 설정한 assets에 저장되는 main.js에는 브라우저가 읽어내는 js파일이 webpack에 의해 변환되어 저장됨

 

 

* scss 사용하기 위한 loader 설치  => npm install sass-loader sass webpack --save-dev

* css 사용을  위한 loader 설치 => npm install --save-dev css-loader   (@import를 풀어줌)

* css를 DOM에 주입하기 위한 것 => npm install --save-dev style-loader 

 

 

---

설치할께 뭐 이리 많은 걸꼬;;;

 

 

--- 최종 완성 형태!!

const path = require("path");

module.exports = {
    entry:'./src/frontend/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$/,
                use:["style-loader","css-loader","sass-loader"],
                //webpack은 뒤에서부터 시작하기에 사용되는 loader역순으로 입력해야 함
            }
        ],
    },
};

// path는 저장경로 설정을 위해 필요함

 

 

끝인 줄 알았는데;;

 

* 코드들을 분리시켜주는 =>

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

요녀석도 필요하다는거!!

 

assets 안에 js와 css 폴더를 생성해서 각기 안에 css와 js 파일을 정리하게 해주는 최종 코드!!

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

module.exports = {
    entry:'./src/frontend/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: /\.js$/,
               use: {
                loader:'babel-loader',
                options:{
                    presets:[["@babel/preset-env",{targets:"defaults"}]],
                },

               },
            },
            {
                test:/\.scss$/,
                use:[MiniCssExtractPlugin.loader,"css-loader","sass-loader"],
                //webpack은 뒤에서부터 시작하기에 사용되는 loader역순으로 입력해야 함
                //MiniCssExtractPlugin는 css를 각각 별도의 파일로 만들어 줌
            }
        ],
    },
};

// path는 저장경로 설정을 위해 필요함

 

참조 : webpack 홈페이지 : https://webpack.js.org/plugins/mini-css-extract-plugin/