WEBPAC Setting

webpack module bundler -> 파일을 가져와서 webpack에게 주면,

webpack은 그것들을, 완전히 호환이 되는 static 파일들로 변환해준다.

(우리는 모던한(신식) 자바스크립트를 사용하고,

우린 모던 자바스크립트를 webpack 안에 집어 넣을 것이다.

그것을 받은 webpack은 sass를 일반적인 CSS와 오래된 노멀한

자바스크립트로 변환해서, 브라우저가 알아들을 수 있도록 해준다.)

 

npm install webpack webpack-cil

 

webpack.config.js 파일 생성

(파일 이름은 고정적으로 webpack.config.js)

 

package.json 파일의 scripts를 다음과 같이 바꾸어 준다.

"scripts": {

    "dev:server": "nodemon --exec babel-node src/index.js",

    "dev:assets": "cross-env WEBPACK_ENV=development webpack -w",

    "build:assets": "cross-env WEBPACK_ENV=production webpack -w"

}

 

webapack을 불러오도록 해준다. -> webpack은 자동적으로, webpack.js라는 파일을 찾으려고 한다.

 

 

webpack의 기본적인 규칙은  exported configuration object를 찾는다.

ㄴ config 파일 안에서 명심해야 할 건, config 파일 안의 코드는 server 코드와는 연관시키지 않는다.

(100% 클라이언트 코드, 즉, 우리가 앞에서 예쁜 코드를 작성할 수 있도록 넣어둔

babel-node는 아직 쓸 수 없다. -> 옛날 자바스크립트를 사용하면 된다.)

 

webpack은 두가지를 가지고 있다. 하나는 entry 라고 불리는 것, 다른 하나는 output 이다.

entry 파일은 그것이 어디서 왔는지이고, output은 그것을 어디에 넣을 것인가

(entry는 파일들이 어디에서 왔는가, output은 그걸 어디에 넣을 것인가를 의미)

 

assets 폴더 생성 -> 그 안에 파일 js, scss를

           assets

                     ㄴ js

                                main.js

                     ㄴ scss

                                ㄴ styles.scss

 

webpack.config.js 는 모던 자바스크립트 파일이 아니라서 import를 쓸 수 없다.(require만 사용 가능)

(__dirname 은 현재의 프로젝트 디렉토리 이름, 어디에서든 접근  가능한 Node.js 전역변수)

 

npm install cross-env 

ㄴ "dev:assets": "cross-env WEBPACK_ENV=development webpack",

 

webpack은 loader를 이용해 앞으로 사용할 모든 파일 형식들을, webpack한테 가르쳐줘야 한다.

 

npm i css-loader sass-loader postcss-loader

 

loader-라는 건 기본적으로, webpack에게 파일을 처리하는 방법을 알려주는 역활

(loader를 추가해주어야, webpack은 비로소 파일을 다루는 법을 알게 된다.)

 

정규식(regular expression)

ㄴ 원하는 부분(여기서는 CSS부분)의 텍스트만 뽑아서 파일을 쓰기 위한 것

 

SCSS 파일을 찾았을 경우에, SCSS를 CSS로 바꾸고 CSS에 해당하는 텍스트를 전체를 취해서,

그 텍스트를 추출해서 CSS 파일로 저장해야한다. SCSS 파일을 찾고, SCSS를 CSS로 바꾸고,

전체 텍스트 중에 그 CSS의 텍스트를 추출하고, 그 추출된 CSS를 분리된 하나의 파일로 만든다.

 

npn install extract-text-webpack-plugin@next

const Extract = require("extract-text-webpack-plugin")

 

const config = {

entry : ["@babel/polyfill", ENTRY_FILE],

mode : MODE,

module : {

rules : [

{

    test: /\.(js)$/,

    use: [{

        loader : "babel-loader"

    }] 

},

{

    test: /\.(scss)$/,

    use : ExtractCSS.extract([

          {

            loader : "css-loader"

         },

          {

            loader : "postcss-loader",

            options : {

                plugins() { 

                    return [autoprefixer({ browsers: "cover 99.5%" })];

                            }

                        }},

          {

              loader : "sass-loader"

           }

         ])

}]

},

        output: {

            path: OUTPUT_DIR,

            filename : "[name].js"

        },

        plugins: [new ExtractCSS("styles.css")]

    };

 

module.exports = config;

 

 

webpack에서, loader를 사용할 때, 끝에서부터 시작해서 처음으로 진행한다.

(webpack은 config 파일에서 아래에서 위로 실행된다.

 

npm install autoprefixer

ㄴ Autoprefixer는 현재 브라우저 인기와 속성 지원을 기반으로 하는 데이터를 사용하여

접두사를 적용

 

npm install node-sass

 

rules 에 test 추가(babel-loader)

 

npm install babel-loader

 

npm i --save @babel/polyfill