webpack4(複数のjs/css/imgファイルを1ファイルにまとめてくれる)で2個のjsファイルをmain.jsにまとめてみた。hello,world的なやつ。

webpackは例によってnodeパッケージ。複数のjs/css/imgファイルを1ファイルにまとめてくれるbudler(束ねるもの)

1, プロジェクト・ルートを作成

mkdir webpack_test && cd webpack_test
# package.json作成
npm -y init
# webpackとcliをインストール
npm install webpack webpack-cli

# インストール完了したら、バージョン確認
webpack --version
4.43.0

mkdir webpack_test && cd webpack_test

# package.json作成

npm -y init

# webpackとcliをインストール

npm install webpack webpack-cli

# インストール完了したら、バージョン確認

webpack --version

4.43.0

2, エントリーポイント(スタート地点)となるsrc/index.jsを作成

mkdir src && vi /src/index.js

1	mkdir src && vi /src/index.js

// import 文を使って sub.js ファイルを読み込む。
import { hello } from "./sub";

// sub.jsに定義されたJavaScriptを実行する。
hello();

// import 文を使って sub.js ファイルを読み込む。

import { hello } from "./sub";

// sub.jsに定義されたJavaScriptを実行する。

hello();

3, 呼びさられるsrc/sub.jsを作成

// export文を使ってhello関数を定義する。
export function hello() {
  alert("hello,webpack");
}

// export文を使ってhello関数を定義する。

export function hello() {

alert("hello,webpack");

}

4, コマンドラインからwebpackを実行するとdist/main.jsが生成される。
webpackコマンドだけでもビルドされるけど、mode指定しろ！と怒られる。

webpack --mode=development

1	webpack --mode=development

5, dist/index.htmlを作成して、ビルドされたjsを呼び出す。
ブラウザで開いて、alertが表示されればOK!

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

1	<script src="main.js"></script>

6, package.jsonのscriptsにbuild項目を追加する(package-lock.jsonじゃないよ!!)
npm run dev で webpack –mode=development が実行される

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev" : "webpack --mode=development"
  }

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"dev" : "webpack --mode=development"

}

関連記事