目的

webpackの理解を深めること。
業務でwebpackは導入されているが自身の理解が浅く、環境修正やそのレビューに積極的に参加できない情けない感じを拭い去りたい！

##　やってみる人のスキル感

gulpでSassやejs、babelなどの環境構築経験有り
実業務でnpm webpack環境にて制作を行なっている

##　やってみる人の環境

Mac 10.13.6
nodeインストール済 (node 10.6.0 / npm 6.5.0)
作業ディレクトリ作成済

##　参照した記事
https://ics.media/entry/12140

1. webpackをインストール

npm i -D webpack webpack-cli

cliのインストールも必要とのこと。
とりあえずこれで環境は整ったらしい。

2. jsモジュールを作成

src/js/index.js

import {hello} from './hello';
hello();

src/js/hello.js

export function hello() {
  console.log('hellllllllooo!!');
}

3-1. ビルド

npx webpack
上記を実行するとdist配下にmain.jsが吐き出されるらしいがエラー発生。

エラー内容

Insufficient number of arguments or no entry found.
Alternatively, run 'webpack(-cli) --help' for usage info.

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

ERROR in Entry module not found: Error: Can't resolve './src' in '/Users/xxNamexx/xx任意のディポジトリxx'

3-2検証

下記実行するもいずれもcommand not foundが返ってきてしまう。
webpack --help
webpack-cli --help

試しにpackage.jsonのscriptsに下記を追記して、
"webpack": "webpack"
下記をドーン！！
npm run webpack

はい、先ほどと同様のエラーきました。

ということで素直にエラーメッセージについてググるとindex.jsの置き場所がいけなかったらしい。

参考記事
2018年度版、React、webpack、Babelのセットアップ手順をアップデートしてみた

ということで、index.jsとhello.jsをsrc直下に配置してどーん。
npx webpack
(npxはnpmが対象ver以上であればなんもしなくても使えた)

dist配下にmain.jsが生成されました。

とりあえず基本的な設定は以上。

src直下にindex.jsを置きたくないのでその辺の設定は次回記事で検証したいと思います。

##　感想

「あ、gulp環境なら構築できます」症候群から抜け出すため、引き続き頑張ります。
今回は本当に小さな一歩だけどやるのとやらないのでは全然違うなと感じました。
既存記事が多いテーマでも自身でアウトプットすると理解が深まるので、同様のスキル感の方にはおすすめです。