【webpack】導入手順 TECH

webpackとは

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

webpack公式サイト

webpackインストールまで

1. フォルダを作成する

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

Terminal
mkdir dir

2. フォルダ配下に移動

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

Terminal
cd dir

3. npm初期化

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

Terminal
npm init -y

4. webpackインストール

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

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

webpack設定

5. configファイル作成

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

Terminal
touch webpack.config.js

6. configファイル記述

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

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"
        ]
      }
    ]
  }
};

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

7. srcフォルダの作成

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

Terminal
mkdir src

8. src配下に移動

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

Terminal
cd src

9. バンドルファイル作成

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

Terminal
touch bundle.js

10. js・stylesフォルダ作成

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

Terminal
mkdir js styles

11. js配下に移動

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

Terminal
cd js

12. entry.jsを作成

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

Terminal
touch entry.js

13. entry.js記述

entry.jsの中身を記述する

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

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

14. package.jsonの書き換え

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

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

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

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

Terminal
cd ../..

16. バンドルコマンド実行

npm run buildを実行

Terminal
npm run build

17. bundle.jsを読み込む

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

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