webpack5 をほぼチュートリアル通りに進める その1(jsファイルのみのビルド)

gulp から webpack に移行するためのメモ。
基本的にチュートリアル通りに進めていって業務で使えるように書き換えていく。

webpack インストール

$ cd /path/to/your/product
# package.json がある場合は npm init はスルー
$ npm init -y
$ npm install webpack webpack-cli --save-dev

js をビルドする

1ファイルだけ js ファイルを用意して、
public/js にビルドしてみる。

ファイル構成

ファイル構成は適当。
それっぽく配置してみた。

assets/
  └ js/
      └ app.js
package.json
public/
  ├ index.html
  └ js/
webpack.config.js

assets/js/app.js

コンソールに「success」と表示させるだけ。

(function (){
	console.log('success')
}())

package.json

script に webpack を追加。

{
  ...
  "scripts": {
	"webpack": "webpack"
  },
  ...
}

webpack.config.js

Using a Configuration - webpack をほぼコピペ。
public/js に script.js がビルドされる。

const path = require('path')

module.exports = {
	entry: './assets/js/app.js',
	output: {
		filename: 'script.js',
		path: path.resolve(__dirname, 'public/js'),
	},
}

public/index.html

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8">
		<title>webpack sample</title>
		<script type="text/javascript" src="./js/script.js"></script>
	</head>
	<body>
		<h1>webpack sample</h1>
	</body>
</html>

ビルド

$ npm run webpack

複数の js ファイルを1つのファイルにまとめる

ついでに node_modules のファイルなどもビルドに含める。
何でもいいけど適当に moment をインストールした。

$ npm install moment --save

ファイル構成

assets/ にファイル追加。
他は構成一緒。

assets/
  └ js/
      ├ app.js
	  └ models/
	      └ Sample.js

assets/js/models/Sample.js

適当にクラスを生成。

import moment from 'moment'

class Sample {

	constructor() {
		console.log(moment())
	}

	get() {
		return moment().unix()
	}
}

export default Sample

assets/js/app.js

Sample.js を読み込む。

import Sample from './models/Sample.js'

const sample = new Sample

console.log(sample.get())
console.log('success')

ビルド

$ npm run webpack

Warning を解消させる

以下 4つの Warning が出たので解消してみる。

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/

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  script.js (290 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (290 KiB)
      script.js


WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

WARNING in configuration

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/

mode を production, development, none から指定してビルドしてほしいとのこと。
config ファイルで解決する方法もあるみたいだけど、こちらは CLI で解決した。

package.json

なんとなく誤入力が嫌なので script に加えてみる。

{
  ...
  "scripts": {
    "webpack": "webpack",
	"wp-prod": "webpack --mode=production",
	"wp-dev": "webpack --mode=development"
  }
  ...
}
$ npm run wp-prod

or

$ npm run wp-dev

その他 Warning

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  script.js (290 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (290 KiB)
      script.js


WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

ファイルサイズが推奨される上限のサイズより大きいとのこと。
ファイルを分割させる方法が URL 先で紹介してあった。

moment はけっこうサイズが大きく、
同じ問題に直面した記事が多かった。

その中で、 momentjs の locale を必要なものだけ呼び出す方式が紹介されていたので、
その方法を試した。

package.json

moment の locale について本家で取り扱っていた。

便利な Qiita

const webpack = require('webpack');
const path = require('path')

module.exports = {
	entry: './assets/js/app.js',
	output: {
		filename: 'script.js',
		path: path.resolve(__dirname, 'public/js'),
	},
	plugins: [
		new webpack.IgnorePlugin({
			resourceRegExp: /^\.\/locale$/,
			contextRegExp: /moment$/
		}),
	],
}

関連投稿