#webpackとは
モジュールバンドラーの中の１つ。モジュールをバンドルしてくれる役割をもつ。
複数のjsファイルを1つのファイルにまとめて依存関係を解決してくれる。
#webpackの導入
webpackを導入するにはプロジェクトフォルダを用意して、ターミナルを立ち上げます。
名前はwebpack_testなど適当につけます。
ターミナルを立ち上げpackage.jsonを作成します。
npm init -y
```
続いて、webpackとwebpack-cliをインストールします。
npm install -D webpack webpack-cli
-Dオプションをつけることで開発用にインストールされるので、package.jsonのdevDependenciesに記載があるかどうかを確認する。
````package.json
"devDependencies": {
"webpack": "^4.39.2",
"webpack-cli": "^3.3.7"
}
#構成
プロジェクトフォルダにjsファイルを作成していきます。srcフォルダの中にエントリポイントとなるindex.jsと後ほど出力されるmain.jsを読み込むindex.htmlを作成し、以下のようにします。
webpack_test
├─ dist
│ └── index.html
├── node_modules
├── package-lock.json
├── package.json
└── src
├── hello.js
└── index.js
```
````index.js
import { hello } from './hello'
hello();
```
````hello.js
const hello = () => {
console.log("hello");
}
module.exports = hello
```
````index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="main.js"></script>
<title>Document</title>
</head>
<body>
<p>Hello Webpack</p>
</body>
</html>
```
#エントリポイント
プログラムの実行を開始するファイル。importなどでjsモジュールを読み込んでいるファイル。今回はindex.jsになる。
#実行
webpackをnpm installをしたので、node_modules内にライブラリがある。
実行は以下のコマンドで行う。
npx webpack --mode development
このコマンドは以下と同様です。
node ./node_modules/.bin/webpack --mode development
またpackage.jsonに以下を記述し
````package.json
"scripts": {
"build": "webpack --mode development"
}
npm run build
```
としても同様です。
--mode developmentのオプションをつけているのは、ソースマップに対応され、デバッグに便利だったりと開発に向いているからです。上記のコマンドを実行すると以下のようにdistディレクトリにmain.jsファイルが出力されます。
```
webpack_test
├── dist
│ ├── main.js
│ └── index.html
├── node_modules
├── package-lock.json
├── package.json
├── src
│ ├── hello.js
│ └── index.js
```
#webpack.config.js
webpackの設定ファイル。プロジェクトルートに置きます。なくても実行できますが、エントリポイントがデフォルトでsrc/index.jsになり、出力先がdist/main.jsになります。先ほど出力先がmain.jsでしたが、outputのdistを変更すると出力先が変更になります。pathオブジェクトをrequireで読み込んでいますが、path.resolve(__dirname, "dist")とすることで絶対パスを出力してくれます。
````webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, "dist"),
filename: 'main.js',
}
}
#ブラウザで起動
webpack.config.jsにdevServerの設定を追加する。
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, "dist"),
filename: 'main.js',
},
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
}
}
以下のコマンドを実行し、package.jsonにstartを追加する。
npm install -D webpack-dev-server
package.json
"scripts": {
"start": "webpack-dev-server",
"build": "webpack --mode development"
}
```
以下のコマンドを実行する。
```
npm start
```
[http://localhost:8080/](http://localhost:8080/)にアクセスしてHello Webpackが表示されれば成功
#参考URL
webpack公式
https://webpack.js.org/
最新版で学ぶwebpack 4入門 JavaScriptのモジュールバンドラ
https://ics.media/entry/12140/
webpack入門
https://qiita.com/hika7719/items/76e87b6ecf308516c514
webpack.config.jsで思ったpath.resolveって何のためにあるの？
https://koukitips.net/post1825/