Webpack 프로젝트 초기 구성

// npm 프로젝트로 변경
npm init -y

// webpack 설치
npm i -D webpack webpack-cli webpack-dev-server@next

// 플러그인 설치
npm i -D html-webpack-plugin			// html 로드 가능하게 하기
npm i -D copy-webpack-plugin			// 정적 파일 연결
npm i -D css-loader style-loader		// css 연결
npm i -D sass-loader sass			// sass 연결
npm i -D postcss autoprefixer postcss-loader	// 오토프리픽서
npm i -D @babel/core @babel/preset-env @babel/plugin-transform-runtime
npm i -D @babel-loader				// babel 설정

 

package.json - script부분

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

package.json 끝부분에 추가

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

 

루트 경로에 webpack.config.js파일 생성

// import
const path = require('path')

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

  // 결과물(번들)을 반환하는 설정
  output: {
    // path: path.resolve(__dirname, 'dist'),
    // filename: 'main.js',
    clean: true,
  }
}

 

루트경로에 .postcssrc.js 생성 후

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

 

루트경로에 .babelrc.js 생성 후

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