Jun 개발노트

WebPack

January 16, 2020

WebPack 요약집

웹팩은 변수와 의존성을 해결하면서 JS, CSS, SASS 등 여러가지 파일을 하나로 합쳐주는거다

  • 1단계

    • npm init -y(default로 package.json 파일 setting)
    • npm install [패키지명] (—save / —save—dev : dev dependency로 추가)
    • index.html에 bundle.js 추가
  • 2단계

    • webpack.config.js 생성
    • entry 설정 : 번들 할 대상 파일의 시작점
    • output 설정 : 번들 후 저장경로 및 파일명
    • module 설정 : rules/규칙, test/파일규칙, use/loader 설정
    • plugin : 번들 후 새로운 기능 추가
    • MiniCssExtractPlugin() — css 파일을 별도로 생성
    • HtmlWebpackPlugin() — index.html 파일을 만들어줌
// webpack.config.js
var path = require('path');
var MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    mode: 'none',
    entry: './index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    { loader: MiniCssExtractPlugin.loader },
                    "css-loader"
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin()
    ],
}
  • 3단계

    • package.json에 script 설정 : 명령어 추가

      • 예) build : ‘webpack’

        {   
        "name": "폴더명",
        "version": "1.0.0",
        "description": "",
        "main": "index.js",
        "scripts": {
            "build": "webpack",
            "devserver": "webpack-dev-server --open --progress"
        },
        "keywords": [],
        "author": "",
        "license": "ISC",
        "devDependencies": {
            "css-loader": "^3.4.0",
            "mini-css-extract-plugin": "^0.9.0",
            "style-loader": "^1.1.2",
            "webpack": "^4.41.4",
            "webpack-cli": "^3.3.10"
         }
        }
  • 4단계

    • .gitignore에 node_modules과 package-json-dev를 추가한다.
    해당 파일명.확장자 < 해댕 파일명 제외
    /디렉토리/ < 디렉토리 부터 제외

Written by Junho You 배운것을 기록하자