Webpack

entry, output

• 파일을 읽어들이기 시작하는 진입점 설정
  entry
  './js/main.js'
• 결과물(번들)을 반환하는 설정
  output
  path: path.resolve(__dirname, 'dist')
  clean을 사용하여 삭제 및 제어 가능

plugins

• 번들링 후 결과물의 처리 방식 등 다양한 플러그인들을 설정

정적 파일 연결

• npm i -D copy-webpack-plugin

module

• module: {
  rules: [
  {
  test: /.css$/,
  use: [
  'style-loader',
  'css-loader'
  ]
  }

SCSS

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

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

Autoprefixer(PostCSS)

• npm i -D postcss autoprefixer postcss-loader

babel

• npm i -D @babel/core @babel/preset-env @babel/plugin-transform-runtime

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

npm i -D babel-loader

NPX, Degit

• npx degit github