webpackでプロジェクト作成

Getting Started　(←今回はコレ)
Asset Management
Output Management
Development

Vueでプロジェクトを作成すると、必要なファイルを一気に作成してくれるが、webpackを使えばここのファイルを確認しながら自分で作成することができる。

vueも裏側ではwebpackを使用している。

webpackとは

機能毎にディレクトリやファイルを切り分けて管理するツール。
複数人開発や複数ページの開発の場合に、作業分担をしやすくする。

開発手順は公式ページに則って作業していけばOK。

プロジェクフォルダの作成

mkdir webpack-demo
cd webpack-demo
npm init -y 
npm install webpack webpack-cli --save-dev

・npm init -y
package.jsonファイルの作成。
-yオプションで質問にすべてyesで答える。

package.json

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

・npm install webpack webpack-cli --save-dev
webpack, webpack-cliをインストール。
--save-devは、開発モード（devDependencies）としてインストール。

実行すると、下記ファイルができる。
・node_modules
インストールしたパッケージを保存するフォルダ。

・pakcage-lock.json
インストールしたモジュールのバージョンなどの詳細が自動記録される。（編集するファイルではない）

ファイルの作成

指定のようにファイルとフォルダを作成する。
＋が作成するファイル。ここにはないが、マイナスは削除するファイル（後ほど出てくる）。

src/index.jsファイルの編集

divタグを作成し、hello webpackを出力。

function component() {
  const element = document.createElement('div');

  // Lodash, currently included via a script, is required for this line to work
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

_.joinメソッドはLodashというJSの専用モジュールのメソッド。
lodashは後ほどインストールする。

index.html

index.htmlに以下を記述。サンプル表示用のソースコード。

<!doctype html>
<html>
  <head>
    <title>Getting Started</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

package.jsonの編集

誤って公開してしまうことを防ぐため、privateにする。
また、不要なmainエントリーを削除する。

distフォルダの作成

ここでdistフォルダとsrcフォルダの２つを作成する。これがかなり重要。

/srcは編集するファイル。/distは配信用に静的に出力されるファイル。/distはローダーにより自動生成される。

lodashのインストール

npm install --save lodash

--saveはpackage.jsonの本番環境（dependencies）にインストールするもの。

npm 5.0以降はデフォルトで--saveありなので特に記述する必要なし。

また、package.jsonに以下が追加される。

  "dependencies": {
    "lodash": "^4.17.20"

本番環境でlodashをインストールすることを表している。
^は一番左の番号（０以外）のバージョンの中で最新のものをインストールする意味。

^4.17.20 = 4.17.20 <=version < 5.0.0

index.jsの編集

lodashモジュールを_としてインストールする。

コメントは任意。

index.htmlの編集

後ほど作成するmain.jsに記載した内容を出力できるようにタグを追加する。

main.jsをエントリーポイント。追加したタグをアウトプットと呼ぶ。

npx webpackの実行

main.jsとscriptタグを繋ぐため以下コマンドを実行する。

npx webpack


Version: webpack 4.44.2
Time: 1293ms
Built at: 2020-10-05 20:09:59
  Asset      Size  Chunks             Chunk Names
main.js  72.3 KiB       0  [emitted]  main
Entrypoint main = main.js
[1] ./src/index.js 257 bytes {0} [built]
[2] (webpack)/buildin/global.js 472 bytes {0} [built]
[3] (webpack)/buildin/module.js 497 bytes {0} [built]
    + 1 hidden module

warningが出るが、今は無視してOK。

webpackがインストールされ、main.jsが作成されentorypointとして設定される。

dist/index.htmlを開くと「Hello webpack」が表示されればOK。

・npx
npmにインストールしてあるパッケージを設定なしで実行できるコマンド。

configファイルの作成

ファイルを作成し、内容を記述。

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

configファイルの読み込み。

npx webpackを使ってconfigファイルを読み込む。

npx webpack --config webpack.config.js

--config　ファイル名でconfigファイルを指定する。

ショートカットコマンドの作成

package.jsonにショートカットコマンドを登録する。

これで、npm run buildを実行するとwebpackを実行するnpx webpackと同じ処理になる。

npm run buildの記述の方が一般的なため、他のユーザーにとっても使いやすい。

エイリアスの確認

npm run build 

Version: webpack 4.44.2
Time: 198ms
Built at: 2020-10-05 20:33:42
  Asset      Size  Chunks             Chunk Names
main.js  72.3 KiB       0  [emitted]  main
Entrypoint main = main.js
[1] ./src/index.js 257 bytes {0} [built]
[2] (webpack)/buildin/global.js 472 bytes {0} [built]
[3] (webpack)/buildin/module.js 497 bytes {0} [built]
    + 1 hidden module

npx webpackと同様に実行できればOK。

webpackでプロジェクト作成（初期設定）