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をインストールします。
1.新規フォルダを作成します。webpack用のプロジェクトフォルダーになります。
(Eドライブ配下にTest2フォルダを作成しました)
2.作成したフォルダ配下で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です。アプリの設定ファイルです。
3.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というフォルダが作成されます。
表示するファイルを作成する
1.htmlファイルとjsファイルを格納するsrcフォルダを作成します。
2.jsファイルその1をsrcフォルダ配下に作成します。E:\Test2\src\hello1.js
export const write1 = function () {
console.log("hello world");
};
3.jsファイルその2をsrcフォルダ配下に作成します。E:\Test2\src\hello2.js
import {write1} from './hello1.js'
write1();
4.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ブラウザでデバッグする方法