[Tool]Webpack 구성하기

각각 무슨 역할을 하는지 정도는 알고 가야 할 것 같다.

설치는

webpack과

webpack-cli

webpack-cli은 터미널에서 웹팩을 사용할 수 있게 도와주는 도구

예시로

scss와 모던js를 전환해주는 설정을 보자

const path = require("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_DIR = path.join(__dirname, "static");

웹팩은 결국 브라우저로 가지 않기 때문에

바벨의 도움을 못받아서 es6기능을 사용하지 못한다.

그러므로 equire을 통해 import해야 한다.

기본적으로 path를 통해 읽어들일 경로와 저장할 경로를 정한다.

ENTRY_FILE이 읽어들일 경로

OUTPUT_DIR가 저장할 경로

__dirname같은 경우는

path에서 작업하고 있는 경로를 지정해주는 변수이다.

그 이외에

autorefixer는 postcss-loader에서 새로운 기능(no필수)을

ExtractCSS는 css로 추출하기 위해 필요한 도구이다.(어지간하면 사용)

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: {

plugin() {

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

}

}

},

{

loader: "sass-loader"

}

])

}

]

},

다음과 같이 설정하는데

entry는 선택할 파일이다.

@babel/polyfill같은 경우 es6에 최신기술을 이해시키는 도구이다.

mode는 어떤 동작을 할 것인지. 이는 웹팩을 실행할 때와 같은 명이여야 하는 듯.

rules은

어떤 규칙을 따를가 인데

test는 어떤 파일을 전환 할 것인지 정규 표현식으로 표현하고

use는 사용할 로더나 도구들에 대한 것이다.

그리고 로더에 options은

로더에 추가할 옵션들인데

postcss같은 경우

autoprefixer를 사용한다.

이는 css로 저장 하는 중 

-moz나 -explore와 같이 css에서 브라우저에 맞는 코드를 일일이 작성하지 않아도 자동으로 작성해주는 도구임

output: {

path: OUTPUT_DIR,

filename: "[name].js"

},

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

};

module.exports = config;

output은 어떤 식으로 저장할 지 이다.

css파일같은 경우는 플러그인으로 대체했다.

웹팩으로 저장된 파일들은

app.use("/static", express.static("static"));

static파일로 저장되며

express같은 경우에는 다음과 같이 경로 지정 후 사용 가능하다.