Webpack

참고 사이트 (링크)

내 GitHub (링크)

배포된 netlify(링크)

  • 매우 꼼꼼한 구성
  • 중/대형 프로젝트에 적합

프로젝트 생성

터미널


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

// html 파일 열어주는 플러그인
npm i -D html-webpack-plugin

// 정적 파일 연결 플러그인
npm i -D copy-webpack-plugin

// main.js 에서 css파일을 읽기위한 플러그인
npm i -D css-loader style-loader

// scss 위한 플러그인
npm i -D sass-loader sass

// autoprefixer 플러그인 (크로스브라우징 css)
npm i -D postcss autoprefixer postcss-loader

// badel 플러그인 (구버전에서 자바스크립트 되게끔하는거)
npm i -D @babel/core @babel/preset-env @babel/plugin-transform-runtime
npm i -D babel-loader
        

package.json 에 추가


"scripts": {
  "dev": "webpack-dev-server --mode development",
  "build": "webpack --mode production"
},
"browerslist": [
  "> 1%",
  "last 2 versions"
]
        

root 경로에 webpack.config.js 추가


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

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

  // 결과물(번들)을 반환하는 설정
  output: {
    // __dirname : webpack.config.js 파일이 있는 경로
    // 'dist' : 폴더명
    // path : path.resolve(__dirname, 'dist'), // 주석해도 dist 로 만들어짐
    // filename: 'main.js', // 위에 entry 에 선언해서 주석해도 만들어짐
    clean: true // 폴더명에 남아있는 파일 제거
  },

  module:{
    rules : [
      {
        test: /\.s?css$/, // 정규식으로 .?css 로 끝나는 모든 파일
        use: [ // 순서가 중요 style-loader 담에 css-loader
          'style-loader', // 4번 css-loader 에서 해석된 내용을 index.html 에 삽입을 해주는 package
          'css-loader', // 3번 : JS에서 CSS 를 읽을 수 있게 하는 package
          'postcss-loader', // 2번: Postcss-loader 실행
          'sass-loader' // 1번: css-loader 가 실행되기 전에 sass-loader 실행 package
        ]
      },
      {
        test: /\.js$/, // 정규식으로 .js 로 끝나는 모든 파일
        use: [
          'babel-loader' // webpack에서 babel 을 해석하기 위한 loader package 연결
        ]
      }
    ]
  },

  // 번들링 후 결과물의 처리 방식 등 다양한 플러그인들을 설정
  plugins : [
    new HtmlPlugin({
      template: './index.html'
    }),
    // build 시, static 폴더에 있는 파일들이 dist 폴더로 copy 되서 들어가게 해주는 플러그인
    new CopyPlugin({ 
      patterns: [{
        from: 'static' // root 경로에 만들어 놓은 폴더 명
      }]
    })
  ],

  devServer: {
    host: 'localhost'
  }
}
        

root 경로 js파일 생성 후 main.js 추가


import "../scss/main.scss";

console.log("Hello Webpack");
        

root경로에 .postcssrc.js 추가하기


// export autoprefixer  in postsccrc.js
module.exports = {
  // JS 파일을 node 환경에서 외부에서 내보내는 명령어
  plugins: [require("autoprefixer")],
};
        

root 경로에 .babelrc.js 추가하기


module.exports = {
  // preset-env module 내보내기
  presets: ["@babel/preset-env"], // 따로 일일히 명시해야되는 JS 를 지원해주는 pacakge
  plugins: [
    // 2차원 배열 생성
    ["@babel/plugin-transform-runtime"], // babel 이 runtime 으로 실행되기 위해 옮겨주는 package
  ],
};
        

root 경로에 .gitignore 추가


.cache
.DS_Store
node_modules
dist