본문 바로가기
Programming/Javascript

Webpack template 프로젝트 만들기

by Wilkyway 2021. 5. 20.
반응형

1. 프로젝트 생성

   npm init -y

2. 관련 플러그인 설치

   npm i -D webpack webpack-cli webpack-dev-server@next

   npm i -D html-webpack-plugin ( html을 포함하여 build할 수 있도록 도와주는 플러그인 )

   npm i -D copy-webpack-plugin ( static 폴더에 있는 이미지 파일을 인식시킬 수 있는 플러그인 )

   npm i -D css-loader style-loader ( css 파일을 main.js 에서 인식시켜주는 파일 )

   npm i -D sass-loader sass ( sass 파일 읽고, 해석해주는 플러그인 )

   npm i -D postcss autoprefixer postcss-loader ( 스타일 후처리를 도와주는 package, autoprefixer: 공급업체 접두사 생성, webpack loader )

   npm i -D @babel/core @babel/preset-env @babel/plugin-transform-runtime ( 최신 js문법 인식 )

   npm i -D babel-loader ( 바벨 로더 설치 )

 

3. package.json 스크립트 추가

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

4. 프로젝트 구성

   /node_modules

   /package-lock.json

   /package.json

   /webpack.config.js   

   /.babelrc.js

   /.gitignore

   /.postcssrc.js

 

   /index.html

   /js/main.js

   /scss/main.scss

   /static/fabicon.ico

       ㄴ/images/logo.png

   

5. ./index.html 파일 생성 및 (css reset cdn 적용, h1 태그 및 img 태그 링크 작성)  

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
</head>
<body>
  <h1>Hello Webpack!!</h1>
  <img src="./images/logo.png" alt="seaofcalm" />
</body>
</html>

 

5. ./js/main.js 생성

//import '../scss/main.scss'  // 추후 추가. 최초 작동 테스트에는 불필요

console.log('Webpack!')

7. ./webpack.config.js 생성

const path = require('path')
const HtmlPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')

module.exports = {
	// 파일을 읽어들이기 시작하는 진입점 설정
    entry: './js/main.js',	// 엔트리 파일 인식. 번들링 결과물에 포함시킴
    output: {
    	// 현재는 path와 filename이 기본값과 동일하므로 생략 가능
    	// path: path.resolve(__dirname, 'dist'),	//절대경로 필요, 폴더명
        // filename: 'main.js',
        clean: true	// 새로 build 시 기존 필요없는 파일/폴더 삭제
    },
    
   module: {
        rules: [
            {
                test: /\.s?css$/,	// .css 또는 scss로 끝나는 파일 인식
                use: [
                    'style-loader',	// html에 삽입해주는 역할
                    'css-loader',	// 먼저 해석됨. js에서 css에서 인식하도록 해석
                    'postcss-loader',	// 공급업체 접두사 적용
                    'sass-loader'	// 가장 먼저 해석됨. js에서 scss에서 인식하도록 해석
                ]
            },
            {
                test:/\.js$/,
                use: [
                    'babel-loader'  //바벨이 적용될 수 있도록 설정
                ]
            }        
        ]
    },
    
    plugins:[
    	new HtmlPlugin({
        	template: './index.html'	// 번들링 결과물에 html을 포함시킴
        }),
        new CopyPlugin({
        	patterns: [
            	{ from: 'static' }		// 번들링 결과물에 스태틱 파일을 포함시킴
            ]
        })
    ],
    
    devServer:{
    	host: 'localhost'	// 서버 호스팅 주소
    }
}

8. logo.png는 static/images 폴더에, fabicon.ico는 static 폴더에 넣어준다.

<body>
      <h1>Hellow Webpack!!</h1>
      <img src="./images/logo.png" alt="seaofcalm" />
</body>

 

9.  ./scss/main.scss파일에서 display: flex; 조건으로 확인. index.html파일에서 main.css 파일링크는 삭제

$color--black:#000;
$color--white: #fff;

body {
    background-color: $color--black;
    h1 {
        color: $color--white;
        font-size: 40px;
        display: flex;
    }
}

10. main.js에 ./css/main.css 반영

main.js

import '../scss/main.scss'

console.log('Webpack!')

 

11. Autoprefixer 공급업체 접두사 추가 => autoprefixer 및 관련 패키지 설치 (2. 참조)

 

12. package.json 에 브라우저 추가

"browserslist": [
	"> 1%",
	"last 2 versions"
]

13. .postcssrc.js 작성

module.exports = {
  plugins: [
      require('autoprefixer')
  ]
}

14. 바벨 적용( .babelrc.js 파일 생성 )

module.exports = {
    presets: ['@babel/preset-env'], // 한번에 명시
    plugins: [
        ['@babel/plugin-transform-runtime'] //비동기 처리
    ]
}

15. 깃 적용( ,gitignore 파일 생성)

.cache
.DS_Store
node_modules
dist
반응형

댓글