Zenn
Open8

Webpackチュートリアルが初心者にも伝わるのかテスト

koji9412koji9412

基本設定

環境は以下で試す。

$ npm -v
8.5.0

$ node -v
v16.14.2

$ npm init -y
Wrote to C:\Users\koji9412\github\webpack-demo\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

added 117 packages, and audited 118 packages in 5s

15 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
npm notice
npm notice New major version of npm available! 8.5.0 -> 9.6.3
npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.6.3
npm notice Run npm install -g npm@9.6.3 to update!
npm notice
koji9412koji9412

ディレクトリ構造

以下の通りになるようにする。

webpack-demo
  |- package.json
  |- package-lock.json
  |- index.html
  |- /src
  |- index.js
koji9412koji9412
$ npx webpack
asset main.js 69.5 KiB [emitted] [minimized] (name: main) 1 related asset
runtime modules 1010 bytes 5 modules
orphan modules 47 bytes [orphan] 1 module
cacheable modules 532 KiB
  ./src/index.js + 1 modules 367 bytes [built] [code generated]
  ./node_modules/lodash/lodash.js 531 KiB [built] [code generated]

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/configuration/mode/

webpack 5.77.0 compiled with 1 warning in 1563 ms

'mode' オプションが設定されていません。webpack はこの値の 'production' にフォールバックします。
「mode」オプションを「development」または「production」に設定して、各環境のデフォルトを有効にします。
また、「none」に設定して、デフォルトの動作を無効にすることもできます。詳細: https://webpack.js.org/configuration/mode/

modeを設定する必要があるのでオプションに追記する。

$ npx webpack --mode production
asset main.js 69.5 KiB [compared for emit] [minimized] (name: main) 1 related asset
runtime modules 1010 bytes 5 modules
orphan modules 47 bytes [orphan] 1 module
cacheable modules 532 KiB
  ./src/index.js + 1 modules 367 bytes [built] [code generated]
  ./node_modules/lodash/lodash.js 531 KiB [built] [code generated]
webpack 5.77.0 compiled successfully in 1495 ms