【webpack】導入手順

webpackとは

複数のファイルを1つにまとめて出力してくれるモジュールバンドラーのこと

webpack公式サイト

webpackインストールまで

フォルダを作成する

手順1

好きな名前でフォルダを作成する

mkdir dir

フォルダ配下に移動

手順2

作成したフォルダ配下に移動する

cd dir

npm初期化

手順3

npm管理下にする初期化処理のコマンドを実行

npm init -y

webpackインストール

手順4

webpackをインストールするコマンドを実行。※sass-loaderより後ろは大体セットでインストールするので、付けています。

npm i -D webpack webpack-cli sass-loader node-sass style-loader css-loader

webpack設定

configファイル作成

手順5

webpack.config.jsという名前でファイルを作成する

touch webpack.config.js

configファイル記述

手順6

webpack.config.jsの中身を記述する

const path = require('path');
module.exports = {
  mode: 'development',
  entry: './src/js/entry.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'src')
  },
  module: {
    rules: [
      {
        test: /.scss$/,
        use: [
          "style-loader",
          "css-loader",
          "sass-loader"
        ]
      }
    ]
  }
};

各ファイル・ディレクトリ作成

srcフォルダの作成

手順7

srcという名前でフォルダを作成する

mkdir src

src配下に移動

手順8

作成したsrcフォルダ配下に移動する

cd src

バンドルファイル作成

手順9

バンドルして出力されるファイルを作成する

touch bundle.js

js・stylesフォルダ作成

手順10

js・stylesという名前でフォルダを作成する

mkdir js styles

js配下に移動

手順11

作成したjsフォルダ配下に移動する

cd js

entry.jsを作成

手順12

entry.jsという名前でファイルを作成

touch entry.js

entry.js記述

手順13

entry.jsの中身を記述する

// 〇〇の部分にバンドルしたいjsファイル名
import "./〇〇.js";
// 〇〇の部分にバンドルしたいSassファイル名
import "../styles/〇〇.scss";

コマンド実行とファイル読み込み

package.jsonの書き換え

手順14

package.jsonファイルを開き、一部分を書き換える

"scripts": {
  "test": "echo "Error: no test specified" && exit 1",
  "build": "webpack"
}

プロジェクトフォルダ配下に移動

手順15

プロジェクトフォルダ配下に移動します

cd ../..

バンドルコマンド実行

手順16

npm run buildを実行

npm run build

bundle.jsを読み込む

手順17

バンドルされたjsファイル(bundle.js)を読み込む

<script src="./src/bundle.js"><script>