webpackのインストールとhello worldを表示する手順

nas2018/11/14

webpackのインストールとhello worldを表示する手順です。
webpackは、js等をまとめてくれるツールです。

確認環境
・Node.js 8.12.0
・npm 6.4.1
・Windows 10
・Google Chrome
・webpack 4.29.5

目次

環境

webpackのインストールは、Node.jsとnpmが必要です。
Node.jsのインストールとhello worldを表示する手順

以下は、webpackのGetting Startedのリンクです。インストールの手順があります。
https://webpack.js.org/guides/getting-started/

 

webpackをインストールする

webpackをインストールします。

１．新規フォルダを作成します。webpack用のプロジェクトフォルダーになります。
(Eドライブ配下にTest2フォルダを作成しました)

 

２．作成したフォルダ配下でnpm init -yコマンドを入力します。
package.jsonというファイルが作成されます。

E:\Test2>npm init -y
Wrote to E:\Test2\package.json:

{
  "name": "Test2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

1行目のnpm initコマンドの最後にある-yは、package.jsonにデフォルトの値を設定します。
4～15行目が、package.jsonです。アプリの設定ファイルです。

 

３．npm install コマンドを入力します。

E:\Test2>npm install webpack webpack-cli --save-dev
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN Test2@1.0.0 No description
npm WARN Test2@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ webpack-cli@3.2.3
+ webpack@4.29.5
added 388 packages from 217 contributors and audited 5228 packages in 52.026s
found 0 vulnerabilities

1行目は、npm installの引数でwebpack本体とwebpackのコマンドラインのツール(webpack-cli)を指定しています。
インストールが完了するとnode_modulesというフォルダが作成されます。

 

表示するファイルを作成する

１．htmlファイルとjsファイルを格納するsrcフォルダを作成します。

２．jsファイルその1をsrcフォルダ配下に作成します。E:\Test2\src\hello1.js

export const write1 = function () {
    console.log("hello world");
};

３．jsファイルその2をsrcフォルダ配下に作成します。E:\Test2\src\hello2.js

import {write1} from './hello1.js'
 
write1();

４．htmlファイルを作成します。E:\Test2\index.html
7行目は、webpackで生成したjsファイルを読み込むようにしています。

<html>
  <head>
    <meta charset="UTF-8">
    <title>webpack</title>
  </head>
  <body>
    <script src="./dist/bundle.js"></script>
  </body>
</html>

 

configファイルを作成する

上記ファイルをまとめるためのconfigファイルを作成します。
名称は、webpack.config.jsです。E:\Test2\webpack.config.js

const path = require('path');

module.exports = {
	// モード
	mode: 'development',
	// エントリーポイント
	entry: './src/hello2.js',
	// 出力するファイル
	output: {
		filename: 'bundle.js',
		path: path.resolve(__dirname, 'dist')
	}
};

5行目は、developmentモードを指定しています。
7行目は、上記hello2.jsファイルを指定しています。
10,11行目は、出力するファイル名と出力フォルダを指定しています。distフォルダ配下に生成されます。

https://webpack.js.org/guides/development/

 

webpackを実行してjsを生成する

webpackを実行してjsを生成します。

1行目のコマンドを入力すると、webpack.config.jsの10,11行目で指定した場所に指定した名前のjsファイルが生成されます。(distフォルダ配下にbundle.jsというファイルが生成されました)

E:\Test2>.\node_modules\.bin\webpack
Hash: 6be0c57e53d42e1aabaa
Version: webpack 4.25.1
Time: 105ms
Built at: 2018-11-14 21:37:51
    Asset      Size  Chunks             Chunk Names
bundle.js  4.57 KiB    main  [emitted]  main
Entrypoint main = bundle.js
[./src/hello1.js] 72 bytes {main} [built]
[./src/hello2.js] 48 bytes {main} [built]

入力するコマンドを短縮する

上記1行目の入力するコマンドは、短縮できます。
package.jsonの7行目を以下のように変更します。

{
  "name": "Test2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.25.1",
    "webpack-cli": "^3.1.2"
  }
}

1行目のように、npm run とpackage.jsonのscripts配下のtestを入力することで同じように実行できます。

E:\Test2>npm run test

> Test2@1.0.0 test E:\Test2
> webpack

Hash: 6be0c57e53d42e1aabaa
Version: webpack 4.25.1
Time: 85ms
Built at: 2018-11-14 21:47:16
    Asset      Size  Chunks             Chunk Names
bundle.js  4.57 KiB    main  [emitted]  main
Entrypoint main = bundle.js
[./src/hello1.js] 72 bytes {main} [built]
[./src/hello2.js] 48 bytes {main} [built]

 

ブラウザで確認する

ブラウザで確認できる環境でhtmlファイルを表示するとブラウザのconsoleにhello worldが表示されます。

 

webpackのバージョンを確認する

バージョンの確認は、npx webpack -vを入力します。

E:\Test2>npx webpack -v
4.29.5

関連の記事

Node.jsのインストールとhello worldを表示する手順
JavaScript Chromeブラウザでデバッグする方法

△上に戻る