webpack 세팅 on Visual Studio Code

webpack은 module bundler 이다 

즉

우리가 많은 파일들을 가져와서 webpack으로 주면 

webpack은 완전히 호환되는 static 파일들로 변환해서 주는 것

ex) ES6와 바닐라 자바스크립트를 쓰고있고 또 Sass, 최신JS 것들을 webpack을 통하면

일반적인 CSS와 오래된 자바스크립트로 변환해서 브라우저가 알아들을 수 있도록 해주는 것이다.

설치는 다음과같다.

$ yarn add webpack webpack-cli

$ yarn add extract-text-webpack-plugin@next

$ yarn add css-loader postcss-loader sass-loader autoprefixer node-sass

webpack은 파일에서 webpack을 사용하기 위함이고,

webpack-cli은 터미널에서 webpack을 쓸 수 있게해준다.

extract-text-webpack-plugin@next 는 @next는 최신버전을 사용하겠다는소리고, 본문에서는 SCSS를 CSS로 바꾸고 저장하는 플러그인을 쓰려고 설치한다.

yarn add css-loader postcss-loader sass-loader 은 우리가 webpack을 쓰기위해 필요한 plugin들을 받는 과정이다.

그리고 webpack.config.js 이란파일을 생성해준다.

파일의내용은 아래와같다.

const path = require("path"); // = import path from "path" 여기코드에서는 옛날코드를써야됨

const autoprefixer = require("autoprefixer");

const ExtractCSS = require("extract-text-webpack-plugin");

const MODE = process.env.WEBPACK_ENV;

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

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

const config = {

entry: ENTRY_FILE,

mode: MODE,

module: {

rules: [

{

test: /\.(scss)$/, // SCSs인 파일을 만날때마다 loader을 실행하라

use: ExtractCSS.extract([

// SCSS파일을 찾았을경우에 SCSS->CSS로 바꾸고 CSS에 해당하는 텍스트전체를 CSS파일로 저장 통역기인것.

{

loader: "css-loader" // css-loader를 이용하면 webpack이 CSS를 이해할 수 있게 됨

},

{

loader: "postcss-loader", // CSS를 받아서 주는 plugin(postcss-loader)을 가지고 CSS를 변환함 호환성 관련된걸 해결

options: {

plugin() {

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

}

}

},

{

loader: "sass-loader" // Sass, 혹은 SCSS를 받아서 일반 CSS로 바꿔줌

}

])

}

]

},

output: {

path: OUTPUT_DIRECTORY,

filename: "[name].[format]"

},

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

};

module.exports = config;

그런다음 package.json에서 

"scripts": {

"start": "nodemon --exec babel-node init.js --delay 2"

},

start부분을

이렇게 바꾸고

npm run dev:server 그리고 npm run dev:assets 로 각자 다른 콘솔에서 실행시켜야한다.

그리고 누군가 dev:assets 라고 치면, webpack을 불러오도록 해놓을것이다

그러면 webpack은 자동적으로 우리가 만들어 두었던 webpack.config.js 파일을 찾으려고 할것이다.

기본적인규칙으로는

webpack은 exported configuration object를 찾는다

config 파일 안에서 명심해야 될것은 server 코드와는 연관시키지 않는다는 것

100% 클라이언트 코드라는뜻

그리하여 신식코드를 변환시켜줘서 읽는 babel-node는 아직 쓸수가없어서 

옛날 자바스크립트를 써야 한다.

entry는 파일들이 어디에서 왔는가? 라는뜻이고

output은 그걸 어디에 넣을 것인가? 라는 의미이다

마지막으로 이렇게바꿔줍니다

"scripts": {

"dev:server": "nodemon --exec babel-node init.js --delay 2 --ignore 'scss'",

"dev:assets": "webpack --mode development -w",

"build:assets": "webpack --mode production"

},

scss변경될떄 계속적으로 서버가 껏다켜지는걸 방지하기위한 --ignore 'scss' 이고 

-w은 assets에 설정해둔 계속 바뀌고있는걸 상시 감지하기위해서 하는 명령어