Zenn
🐡

【Web制作・開発用】Webpack構築手順 メモ

2023/07/17に公開
webpack
tech

Webpack構築手順

npmとnode.jsはインストールされている前提です。
筆者はnvmを使用しています。

プロジェクトの初期化

npm init

パッケージのインストール

【補足】 パッケージの最新バージョン・推奨バージョンなどをみたい場合は以下を実行
npm view パッケージ名
【補足】 devDependenciesとdependenciesの違いは、公開して他の人が使える状態にしたいかどうか。

webpackの基本のビルド

  • npm install --save-dev webpack //webpackのインストール
  • npm install --save-dev webpack-cli //webpack-cliのインストール
  • npx webpack //ビルド

Webpackの設定

  • webpack.config.jsファイルの作成

css系

  • npm install --save-dev css-loader
    • cssの読み込みに必要なローダー
  • npm install --save-dev style-loader
    • cssの読み込みに必要なローダー
  • npm install --save-dev mini-css-extract-plugin
    • cssを別ファイルに書き出す
  • npm install --save-dev sass-loader
    • scssの読み込みに必要なローダー
  • npm install --save-dev node-sass
    • scssの読み込みに必要なパッケージ

HTML系

  • npm install --save-dev html-webpack-plugin
    • HTMLをdist内に自動生成する
  • npm install --save-dev html-loader
  • npm install --save-dev pug-html-loader

画像系

Webpack5より、パッケージをインストールしなくても標準で画像を出力できるようになった為、以下のように記述

rules:[
  {
       test:/\.(jpg|png|webp|svg)/,
       type : 'asset/resource',
       generator:{
         filename: 'images/[name][ext]'
       },
   }
]

ES6（Babel）

JavaScriptの新しい記法や機能が搭載されているES6が古いブラウザでも動作するようにするツール

  • npm install --save-dev babel-loader
    • npm install --save-dev babel-loader

その他

  • npm install --save-dev clean-webpack-plugin
    • dist内の不要なファイルを削除

Discussion