Bundler #webpack

기본 설정
1. install npm (json 파일 생성)
2. npm i -D webpack webpack-cli webpack-de
3. package.json 내용 수정
"scripts": {
"dev": "webpack-dev-server --mode development",
"build": "webpack --mode production"
}
4. webpack.cofig.js 파일 생성 (기본구성이라 아래와는 별개입니다)

const path = require('path')
module.exports = {
	// 파일을 읽어들이기 시작하는 진입점 설정
	entry: './js/main.js',
    
    // 결과물(번들)을 변환하는 설정 (결과물을 dist 라는 폴더 내에 만들어줌)
    output: {
    	path: path.resolve(__dirname, 'dist'), //node.js 요구하는 절대경로를 명시해줘야함)
        filename:'main.js'
      	clean: true // 필요하지 않은 것들을 제거할 수 있음
    }
}

5. npm run build (terminal)

---

1. index.html 파일 생성
2. reset.css 주소 복붙
3. main.js 파일 생성
4. npm i -D html-webpack-template-basic (termainal)
5. webpack.config.js 파일 생성

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

module.exports = {
	entry: './js/main.js',
  	output: {clean: true}
},
  //번들링 후 결과물의 처리 방식 등 다 양한 플러그인들을 설정
  plugins: [
    new HtmlPlugin({
    templete: './index.html'})]

6. npm run dev
7. webpack.config.js 파일 수정 (위에 작성된 맨 밑에 작성)

devServer: {
	host: 'localhost'
}

8. css 파일이나 images, favicon 등은 static 폴더 내에 생성한다.
   바깥에 css 파일을 둬도 사용할 수 있다.
   main.js 파일에 css 파일을 연결해주면 된다. (그 전에 cofig 에서 js 를 시작점으로 연결했기때문에 가능함)

import '../css/main.css'

npm i -D css-loader style-loader (terminal) 패키지를 따로 깔아도 된다. config 파일 수정

module: {
	rules: [
      {
      	test: /|.css$/, // .css 로 끝나는 것을 찾는 정규식
        use: [
        'style-loader',
        'css-loader'
        ]
      }]
}

9. SCSS 적용 방법

• 기존 생성한 CSS 폴더 이름을 SCSS 로 변경해준다.
• css 파일명을 .SCSS 로 해줘야 한다.
• webpack 파일에도 수정을 해준다. test: /|.s?css$/ 정규표현식
• terminal
  npm i -D sass-loader sass
• use 부분에 'sass-loader' 추가

10. autoprefixer 적용 방법

• terminal
  npm i -D postcss autoprefixer postcss-lodader
• use 에 'sass-loader' 위에 'postcss-loader' 추가
• json 파일 수정
  browserslist : "> 1%", "last 2 versions"
• postcssrc.js 파일 추가
  module.exports={plugins: [plugins: [require('autoprefixer')]]}

11. babel 추가

• terminal
  npm i -D @babel/corre @babel/preset-env @babel/plugin- transform-runtime
• .babelrc.js 파일 생성
  module.exports={
  presets: ['@babel/preset-env'],
  plugins: [['@babel/plugin-transform-runtime']]} //2차원 배관
• 기존 있던 use 의 다음 부분에 추가
  test: /|.js$/,
  use: ['babel-loader']
  후에 터미널에 npm i -D babel loader 하면 됩니다.

12. 배포하는 방법

• .gitignore 파일 생성
  .cache
  .DS_Store
  node_modules
  dist

  후에 git init

• 배포사이트 접속
  배포사이트
  로그인 후 new site from git 버튼 클릭
  create a new site
  github 클릭 (로그인)
  원하는 저장소 선택 후
  basic build settings 목록을 잘 봐야함
  deploy site 버튼 클릭
  그러면 주소를 생성해줌! 그걸 배포하면 댐