Webpack

아직 완벽하게 아는게 아니라서 일단 적당히 얘기해 보자면

Webpack은 HTML, CSS등 프론트엔드에서 필요한 것들을 변환시켜준다. <script>를 사용해서 뭐시기 저시기 적어야 할때 이걸 쓰면 간단하게 플러그인 시스템을 통해서 해결할 수 있는것이다.

 

위의 파일들을 webpack에게 보내면 호환도는 static파일로 변환시켜준다.

 

1. 설치

npm install webpack webpack-cli

그러면 자동적으로 'webpack.config.js'라는 파일이 생성된다.

 

여기서는 clint code만을 작성해야 한다.

여기다가 이제 설정할 것들을 넣어주면 된다. 나는 scss를 css로 변환시켜주는 작업을 하려고 한다.

 

2. package.json 변경

맥에서는 cross-env를 안해줘도 되는데 윈도우에서는 해줘야한다. 에러가 뜬다...ㅠㅠㅠ

npm install --save-dev cross-env

설치를 해주면 정상작동이 된다!

 

3. webpack.config.js

// Node안에 기본적으로 내장되어 있는 path
// Mordern JS가 아니라 import path from "path"를 쓰지 못한다.
const path = require("path");
const ENTRY_FILE = path.resolve(__dirname, "assets", "js", "main.js");
const OUTPUT_DIR = path.join(__dirname, "static");

const config = {
    entry: ENTRY_FILE,
    output: {
    	path: OUTPUT_DIR,
        filename: "[name].[format]"
    }
};

module.exports = config;

이런식으로 써주게 되면 에러가 뜨는데 이유는 Webpack에게 어떤 방식으로 변환을 해줘야 하는지 알려줘야 한다.

 

SCSS에서 CSS 같은 경우에는 다음 3개를 받아줘야 한다.

npm install css-loader postcss-loader sass-loader

 

참고로 이때 정규식 표현법을 사용해야하는데 .scss 문서인지 알아보기 위해서는 다음과 같이 써야한다.

/\.(scss)$/

정규식 표현법은 아직 잘 알지는 못....ㅠㅠㅠㅠㅠㅠㅠㅠ

일단 그렇구나~ 정도로만.....ㅠㅠㅠㅠ