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

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

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

目次

環境

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

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

 

webpackをインストールする

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

1.1行目のコマンドを入力すると、package.jsonが作成されます。
4~15行目は、package.jsonの内容が表示されています。E:\Test2\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"
}

2.以下のコマンドを入力してwebpackをインストールします。

E:\Test2>npm install webpack webpack-cli --save-dev

インストールが完了するとnode_modulesというフォルダが作成されます。

 

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

1.jsファイルその1を作成します。E:\Test2\src\hello1.js

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

2.jsファイルその2を作成します。E:\Test2\src\hello2.js

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

3.htmlファイルを作成します。E:\Test2\src\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
7行目は、上記hello2.jsファイルを指定しています。
10,11行目は、出力するファイル名と出力フォルダを指定しています。distフォルダ配下に生成されます。

const path = require('path');

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

5行目は、developmentモードを指定しています。
https://webpack.js.org/guides/development/

 

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

webpackを実行してjsを生成します。
1行目のコマンドを入力します。webpack
webpack.config.jsの10,11行目で指定した場所に指定した名前のjsファイルが生成されます。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]

 

ブラウザで確認する

ブラウザで確認できる環境で上記htmlファイルを表示するとコンソールにhello worldが表示されます。

自分のテスト環境ではXAMPPのapacheを起動し、http://localhost/test1/で確認しました。
XAMPPをインストールする手順(Windows10)

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

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

E:\Test2>.\node_modules\.bin\webpack -v
4.25.1

関連の記事

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

△上に戻る