【webpack】導入手順
webpackとは
複数のファイルを1つにまとめて出力してくれるモジュールバンドラーのこと
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>