Webpack 기본 설정

1. Node 설치 [https://nodejs.org/ko]

2. Node, NPM 설치 & 버전 확인

$ node -v
$ npm --version

3. 프로젝트 폴더 생성

4. 프로젝트 작업환경 셋팅

$ npm init -y

5. 프로젝트 디렉토리에 src 폴더 추가

6. Webpack 설치

$ npm i -D webpack  // webpack 설치
$ npm i -D webpack-cli  // webpack 명령어 (리모컨?) 설치
$ npm i -D webpack-dev-server  // webpack dev server (개발용Server)

7. package.json에 scripts 수정

"scripts": {
  "build": "webpack --mode production",
  "start": "webpack -w",
	"dev": "webpack-dev-server --mode development --hot"
}

8. src폴더에서 개발 (html, css, js, scss, ts 등등)

webpack은 기본적으로 js 파일만 번들링 해준다.

그리하여 html, css, scss, ts 등의 파일은 별도의 loader를 사용한다.

8.1. 사용할 플러그인 & 로더 설치

$ npm i vue  // vue사용
$ npm i react react-dom  // react 사용
$ npm i -D sass  // Sass 사용
$ npm i -D typescript  // TypeScript 사용
$ npm i -D @babel/core  // Babel 사용
$ npm i -D @babel/preset-env  // Babel-preset-env 사용
$ npm i -D @babel/preset-react  // Babel-preset-react 사용
$ npm i -D html-loader  // HTML파일 로더
$ npm i -D sass-loader  // Sass파일 로더
$ npm i -D css-loader  // CSS파일 로더
$ npm i -D style-loader  // Style 로더
$ npm i -D babel-loader  // Js 로더
$ npm i -D ts-loader  // TypeScript 로더
$ npm i -D vue-loader vue-template-compiler  // Vue파일 로더 / Vue파일 적용 플러그인
$ npm i -D html-webpack-plugin  // HTML파일 output 플러그인
$ npm i -D mini-css-extract-plugin  // CSS파일 output 플러그인

8.2. 플러그인 또는 파일 로더 사용

• 상위 디렉토리에 webpack.config.js 파일 추가

const HtmlWebpackPlugin = require('html-webpack-plugin');  // HTML파일 output 플러그인 사용
const { VueLoaderPlugin } = require('vue-loader');  // Vue파일 컴파일러

module.exports = {
  entry: './src/index.js',  // 작업을 하는 js 파일
  output: {
    path: __dirname + '/build',  // 빌드될 경로
    filename: 'index.js'  // 빌드될 파일명
  },
  mode: 'development',  // 빌드될 모드 (development / production)
	resolve: {  // 확장자 자동 해결
    extensions: ['.js', '.jsx', '.vue', '.css', '.html'],  // 사용하는 확장자 리스트
		alias: {
			'@': __dirname + '/src/',
		}
  },
  module: {
    rules: [  // 개발자가 모듈에 대한 규칙 정의
      {
				test: /\.vue$/,  // 빌드될 파일 확장자
				use: ['vue-loader']  // 사용할 로더
			},{
				test: /\.(js|jsx)$/,  // 빌드될 파일 확장자
				exclude: /node_module/,  // 제외할 폴더
				use: ['babel-loader']  // 사용할 로더
			},{
        test: /\.(c|sa|sc)ss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      },{
        test: /\.html$/,  // 빌드될 파일 확장자
        use: ['html-loader']  // 사용할 로더
      }, {
        test: /\.(png|jpg|gif|bmp|svg)$/i,
        use: [{
          loader: 'file-loader',
          options: {
            outputPath: './images',
            name: '[name].[ext]'
          }
        }]
      }
    ]
  },
  plugins: [  // output될 파일 정의
    new HtmlWebpackPlugin({  // HTML파일 output 플러그인
      template: './public/index.html',  // output 시킬 HTMl파일
      filename: 'index.html'  // output 시킬 때 HTML파일명 지정
    }),
		new VueLoaderPlugin(),  // Vue 파일 컴파일러
  ],
	devServer: {
		open: true,
	}
}

8.3. TypeScript 사용

• 상위 디렉토리에 tsconfig.json 파일 추가

{
  "compilerOptions": {
    "outDir": "./build/"
  }
}

9. Webpack build / start

$ npm run build  // 개발된 파일을 빌드
$ npm start  // src폴더의 내용이 변경되면 자동으로 빌드 (webpack이 지켜보고 있음)

※ babel 사용법

$ npm i -D babel-loader
$ npm i -D @babel/core
$ npm i -D @babel/preset-env
$ npm i -D @babel/preset-react

최상위 디렉토리에 '.babelrc.js' 파일 생성 후 아래 코드 작성

module.exports = {
	presets: [
		'@babel/env',
		'@babel/react'
	]
}

.eslintrc.js, .prettierrc.js 설정

// .prettierrc.js
module.exports = {
  arrowParens: "avoid",
  bracketSameLine: true,
  bracketSpacing: false,
  singleQuote: true,
  trailingComma: "all",
};
// eslintrc.js
module.exports = {
  root: true,
  extends: "@react-native-community",
};

자주 사용하는 모듈

npm i vue vuex vuetify axios json-server
npm i -D html-webpack-plugin vue-template-compiler html-loader style-loader babel-loader css-loader sass sass-loader @babel/core @babel/preset-env file-loader vue-loader webpack webpack-dev-server webpack-cli

#css
@import url('http://cdn.jsdelivr.net/npm/@mdi/font@6.5.95/css/materialdesignicons.min.css');