Webpack 설정

Webpack

1. npm init -y를 통해 구성요소 설치

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

webpack-cli: commend line interface. webpack 명령어를 사용할 수 있다.

webpack-dev-server: 개발 서버를 오픈할 때 개발에 특화된 페이지가 될 수 있게 도와준다.

3. package.json의 script에 개발모드 dev, 제품 모드 build 설정

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

4. 새로운 html, js 파일 생성

5. webpack.config.js 생성

// 전역 모듈 호출
const path = require('path')

module.exports = {
  //파일을 읽어들이기 시작하는 진입점을 설정한다.
  entry: './js/main.js',

  //결과물(번들)을 반환하는 설정
  //output은 node.js에서 필요로하는 절대 경로를 설정해주어야 한다.
  output: {
    
    //resolve 메서드는 인수들의 경로를 합쳐준다.
    //dirname 또한 전역변수이며 현재 파일이 있는 그 경로를 지칭한다.
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  }
}

진입점(entry)은 여러가지로 나눌 수 있다.

entry: {
 home: 'home.js',
 about: 'about.js',
 contact: 'contact.js'
}

6. terminal - npm run build시 dist 폴더가 생성되는지 확인.

7. 기존 파일의 제거를 원하면 output에 clean 프로퍼티 추가.

output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'main.js',
    clean: true
  }

8. npm i -D html-webpack-plugin 후 webpack.config.js에 호출

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

9. module.exports에 plugins,devServer 작성
   결과물을 만들어 내는 과정에서 plugins를 사용할 수 있게 만든다.

//번들링 후 결과물의 처리 방식 등 다양한 플러그인들을 설정
  plugins: [
    new HtmlPlugin({
      template: './index.html'
    })
  ],

  devServer: {
    host: 'localhost'
  }

10. static폴더 생성 후 favicon 삽입 images 폴더 생성 후 logo 삽입.

11. index.html에 img 요소 삽입 후 이미지 파일 경로 설정

12. npm i -D copy-webpack-plugin 후 webpack.config.js에 호출 뒤 plugins 배열에 삽입

const path = require('path')
const HtmlPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')
module.exports = {
 
  entry: './js/main.js',
  
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
    clean: true
  },
 
  plugins: [
    new HtmlPlugin({
      template: './index.html'
    }),
    new CopyPlugin({
      patterns: [
        { from: 'static' }
      ]
    })
  ],

  devServer: {
    host: 'localhost'
  }
}

CopyPlugin을 통해 from 내에 있는 폴더의 하위 폴더가 dist 폴더로 복제될 수 있게 설정한다.

13. npm i -D css-loader, npm i -D scss-loader, style-loader
    scss, css 파일을 import 할 수 있게 만들어 준다.

const path = require('path')
const HtmlPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')
module.exports = {
  
  entry: './js/main.js',

  
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
    clean: true
  },
  module: {
    rules: [
      {
        // .scss .css로 확장자를 찾게 해준다.
        test:/\.s?css$/,
        // js에서 css를 해석할 수 있게 해주는 css-loader
        // 해석된 내용을 삽입해주는 style-loader
        use:[
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  },

  plugins: [
    new HtmlPlugin({
      template: './index.html'
    }),
    new CopyPlugin({
      patterns: [
        { from: 'static' }
      ]
    })
  ],

  devServer: {
    host: 'localhost'
  }

14. npm i -D postcss autoprefixer postcss-loader 설치

postcss : 후처리기, 공급업체제공자 설정을 위해 필요하다

'sass-loader' 위에 'postcss-loader'작성

15. pakage.json에 browserslist 작성

  "browserslist": [
    // 전세계 1% 이상의 브라우저 이상에서 
    "> 1%",
    // 2개 버전을 모두 지원하겠다는 뜻
    "last 2 versions"    
  ]

16. postcssrc.js 파일 생성 후 연결

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

17. npm i -D @babel/core @babel/preset-env @babel/plugin-transform-runtime babel-loader 패키지 설치 후 babelrc.js 생성

module.exports = {
  presets: ['@babel/preset-env'],
  plugins: [
    ['@babel/plugin-transform-runtime']
  ]
}

18. webpack.config.js의 module-rules에 bable-loader 작성

 {
        test: /\.js$/,
        use: [
          'babel-loader'
        ]
 }

19. .gitignore 작성

.cache
node_modules
dist

20. 만든 webpack-template을 npx degit을 통해 복제 , 사용한다
    npx degit Tchaikovsky1114/webpack-template-basic webpack-template-test

    npx degit으로 복제하면 git clone과는 다르게 버전관리가 진행되지 않은 폴더로 복제할 수있다.