Webpack Cheat Sheet

Single webpack.config.js

Loading CSS

Autoprefixer and PostCss

// 1.
$ npm install -D postcss-loader autoprefixer

// 2. add rules
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader'],
      },
    ],
  },
};

// 3. create postcss.config.js
module.exports = {
  plugins: {
    autoprefixer: {},
  },
};

Sequence of CSS Loader chain

const css = ["style-loader", "css-loader"];
const postCss = ["style-loader", "css-loader", "postcss-loader"];
const sass = ["style-loader", "css-loader", "postcss-loader", "sass-loader"];
const less = ["style-loader", "css-loader", "postcss-loader", "less-loader"];
const stylus = ["style-loader", "css-loader", "postcss-loader", "stylus-loader"];

When Using vue-style-loader

const css = ['vue-style-loader', 'css-loader'];
...

Loading Images

Image as Js

import Icon from "./icon.png";

// Add the image to our existing div.
const myIcon = new Image();
myIcon.src = Icon;

element.appendChild(myIcon);

Image as CSS

.icon {
  background: url("./icon.png");
}

Image as html

??

Loading Data (JSON, CSVs, Tsvs, XML)

module.exports = {
  module: {
    rules: [
      {
        test: /\.(csv|tsv)$/,
        use: ["csv-loader"]
      },
      {
        test: /\.xml$/,
        use: ["xml-loader"]
      }
    ]
  }
};

// src.js
import Data from "./data.xml";

console.log(Data);

Global Asset vs Local Asset

지역 컴포넌트 디렉터리 안에 에셋을 위치 시키는 경우 쉽게 복사해서 다른 프로젝트에서 해당 컴포넌트를 사용할 수 있음.

대신 중복이 될 수 있음.

- |- /assets
+ |– /components
+ |  |– /my-component
+ |  |  |– index.jsx
+ |  |  |– index.css
+ |  |  |– icon.svg
+ |  |  |– img.png

Webpack DevServer vs Dev Middleware vs Watch mode

Mulitple webpack.*.js

Plugins

Html Webpack Plugins

$ npm install --save-dev html-webpack-plugin

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  ...
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Output Management',
    }),
  ],
  ...
};