191108 webpack

sykim·2019년 11월 8일
1

WEBPACK

모듈 번들러로 쉽게 말해 최신화 되어 있는 코드를 호환이 되는 버전으로 변환시켜주는 역할을 한다.

1. WEBPACK 설치

npm install webpack webpack-cli 
  • 웹팩을 설치하고 콘솔창에서 웹팩 실행할 수 있게 설치
  • assets 폴더 > js 폴더 > main.js
import "../scss/styles.scss";
  • assets 폴더 > scss 폴더 > styles.scss
body {
    background-color: red;
  }

2. 서버와 프론트 나눠서 실행시키기 위한 작업

package.json

...
  "scripts": {
    "dev:server": "nodemon --exec babel-node init.js --delay 2",
    "dev:assets": "webpack",
  },

webpack.config.js 파일을 생성

// 경로를 절대 경로로 만들어준다
const path = require("path");
// import path from "path"

const ENTRY_FILE = path.resolve(__dirname, "assets", "js", "main.js");
// static 폴더를 만들어서 해당 파일을 넣는다
const OUTPUT_DIR = path.join(__dirname, "static");

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

module.exports = config;
  • entry (어느 파일을 받아서) / output (어디로 보낼 것인지) 으로 나눈다

-> npm run dev:assets

3. scss를 읽지 못해 아래와 같은 에러가 뜬다 -> 웹팩에게 rules 설정하기

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

const config = {
  entry: ENTRY_FILE,
  mode: MODE,
  module: {
    rules:[
        {
            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"
  },
  // 추출을 해서 새로운 styles.css파일을 만든다
  plugins : [new ExtractCSS("styles.css")]
};

module.exports = config;

package.json (npm install cross-env)

  "scripts": {
    "dev:server": "nodemon --exec babel-node init.js --delay 2",
    "dev:assets": "cross-env WEBPACK_ENV=development webpack -w",
    "build:assets": "WEBPACK_ENV=production webpack"
  },
  • loader를 부여해서 웹팩에게 파일 처리하는 방법을 알려준다.
  • sass->css
    1. 확장자가 scss인 파일을 찾고
    2. scss->css로 바꾸고
    3. 그 css의 텍스트를 추출해서 파일로 만들기
npm install extract-text-webpack-plugin@next
  • const ExtractCSS = require("extract-text-webpack-plugin"); 이 변수가 있기 때문에 css를 가지고 뭘 어떻게 할지 알려줄 수 있다.
  • 웹팩의 config 파일은 아래에서 위로 진행한다.
npm install css-loader postcss-loader sass-loader
  • postcss를 쓰면 autoprefixer를 통해 자동으로 브라우저마다 호환되는 css를 추가 기재해준다.
npm install autoprefixer

그리고 plugins : [new ExtractCSS("styles.css")] 통해 추출된 파일은

  output: {
    path: OUTPUT_DIR,
    filename: "[name].js"
  }

이 정보에 따라 이름이 주어지고 해당 폴더에 저장이 된다.

profile
블로그 이전했습니다

5개의 댓글

comment-user-thumbnail
2019년 11월 8일

웹팩은 전부 이해할 필요는 없고 흐름만 읽을 줄 알면 된다고 해서 위안이 됐다...

답글 달기
comment-user-thumbnail
2019년 11월 8일

애먹은 에러 다시 기억하기

ERROR :
'WEBPACK_ENV'은 내부 또는 외부 명령 배치 파일이 아닙니다 오류
-> npm install cross-env 설치
-> "dev:assets": "cross-env WEBPACK_ENV=development webpack", 수정

답글 달기
comment-user-thumbnail
2019년 11월 8일

npm install @babel/polyfill

브라우저에 아직 없는 걸 채워주는 용으로 es2015 환경을 모방

답글 달기
comment-user-thumbnail
2019년 11월 22일

app 파일에서 /static 경로 사용 설정 필수
app.js

app.use("/static", express.static("static"));
답글 달기
comment-user-thumbnail
2020년 12월 8일

ERROR :
'WEBPACK_ENV'은 내부 또는 외부 명령 배치 파일이 아닙니다
-> npm install cross-env 설치
-> "dev:assets": "cross-env WEBPACK_ENV=development webpack",
이 에러는 왜 나는걸가요,,!!!

답글 달기