31일차

💃

31일차

 

Part 8. Bundler

Ch 1. Parcel

Ch 2. Webpack

 

---

 

 

Ch 1. Parcel

 

 

 

 

 🔗 Parcel Plugin Static Files Copy  => 정적 파일 연결

 

https://www.npmjs.com/package/parcel-plugin-static-files-copy

parcel-plugin-static-files-copy

 

$ npm i -D parcel-plugin-static-files-copy

// package.json

{
	...
    "staticFiles": {
        "staticPath": "static",
    }
}

 

 

 🔗 Autoprefixer 

 

$ npm i -D postcss autoprefixer

// package.json

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

// .postcssrc.js

module.exports = {
  plugins: [require("autoprefixer")],
};

 

 

 🔗 Babel 

 

 

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

// package.json

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

// .barbelre.js

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

 

 

 🔗 CLI 

 

https://ko.parceljs.org/cli.html

🖥 커맨드 라인 인터페이스(CLI)

 

 

---

 

 

Ch 2. Webpack

 

 

$ npm i -D webpack webpack-cli webpack-dev-server@next

// package.json

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

 

 

 🔗 entry, output 

 

// webpack.config.js

// import
const path = require("path");

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

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

$ npm run build

 

https://webpack.js.org/configuration/entry-context/#entry

Entry and Context | webpack

https://webpack.js.org/configuration/output/#outputpath

Output | webpack

https://webpack.js.org/configuration/output/#outputclean

Output | webpack

 

 

 🔗 plugins 

 

$ npm i -D html-webpack-plugin

// webpack.config.js

// import
...
const HtmlPlugin = require("html-webpack-plugin");

// export
module.exports = {
  ...

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

 

 

 🔗 정적 파일 연결 

 

$ npm i -D copy-webpack-plugin

// import
...
const CopyPlugin = require("copy-webpack-plugin");

// export
module.exports = {
  ...
  
  // 번들링 후 결과물의 처리 방식 등 다양한 플러그인들을 설정
  plugins: [
    ...
    new CopyPlugin({
      patterns: [{ from: "static" }],
    }),
  ],
};

 

 

 🔗 module 

 

$ npm i -D css-loader style-loader

// main.js

import "../css/main.css";

// webpack.config.js

...

// export
module.exports = {
  ...

  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"], // ⭐ 순서 중요
      },
    ],
  },
};

 

 

 🔗 SCSS 

 

$ npm i -D sass-loader sass

// webpack.config.js

...

// export
module.exports = {
  ...

  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "sass-loader"], // ⭐ 순서 중요
      },
    ],
  },
};

 

 

 🔗 Autoprefixer(PostCSS) 

 

$ npm i -D postcss autoprefixer postcss-loader

// package.json

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

// .postcssrc.js

module.exports = {
  plugins: [require("autoprefixer")],
};

// webpack.config.js

...

// export
module.exports = {
  ...

  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader", "sass-loader"], // ⭐ 순서 중요
      },
    ],
  },
};

 

 

 🔗 Babel 

 

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

// package.json

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

// .barbelre.js

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

// webpack.config.js

...

// export
module.exports = {
  ...
  
  module: {
    rules: [
      ...
      {
        test: /\.js$/,
        use: ["babel-loader"],
      },
    ],
  },
};