Zenn
🙆‍♀️

Webpkac 5の使い方

2022/07/19に公開
webpack
tech

まずは空きフォルダを作ります

エントリーJSファイルを作ります

touch app.js

npmを初期化します

npm init

ライブラリをインストール

slugをインストールします

npm install slug

lodashとflickityをインストールします

npm install lodash flickity

jQueryとinsaneとjsonpとaxiosをインストールします

npm install jquery insane jsonp axios

インポート

app.jsに以下を記入します

app.js
import { uniq } from 'lodash';
import insane from 'insane';
import jsonp from jsonp;

index.htmlを作ります

index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>JS Modules</title>
	</head>
	<body>
		<script src="app.js"></script>
	</body>
</html>

Webpack

webpackとwebpack-cliをインストールします

npm install webpack webpack-cli --save-dev

ES6をES5へCompileさせるので、babelをインストールします

npm install babel-loader @babel/core @babel/preset-env --save-dev

webpackの設定ファイルを作ります

touch webpack.config.js

webpack.config.js

まずはwebpackをインポートします

webpack.config.js
const webpack = require('webpack');

webpack.config.jsはnode.jsのファイルなので
現在のnodeバージョンはまだimportをサポートしないのでrequire()を使います

続いてnodeEnvを定義します

webpack.config.js
const nodeEnv = process.env.NODE_ENV || 'production';

そしてmodule.exportsを定義します

webpack.config.js
module.exports = {
}

まずはdevtoolを定義します

webpack.config.js
module.exports = {
	devtool: 'source-map',
}

そしてエントリーポイントを定義します

webpack.config.js
module.exports = {
	...
	entry: {
		filename: './app.js',
	},
}

アウトプットを定義します

webpack.config.js
module.exports = {
	...
	output: {
		filename: 'bundle.js',
	},
}

moduleを定義します

webpack.config.js
module.exports = {
	...
	modules: {
	
	}
}

ES5→ES6のために、babelをインポートします

webpack.config.js
module.exports = {
	...
	module: {
		rules: [
			{
			test: /\.js$/,
			exclude: /node_modules/,
				use: {
				    loader: 'babel-loader',
				    options: {
					presets: ['@babel/preset-env'],
				    },
				},
			},
		],
	}
}

プラグインを定義します

webpack.config.js
module.exports = {
	...
	plugins: [
		new webpack.DefinePlugin({
			'proccess.env': { NODE_ENV: JSON.stringify(nodeEnv) },
		}),
	],
}

最適化JSを定義します

webpack.config.js
module.exports = {
	optimization: {
		minimize: true,
		minimizer: [new TerserPlugin()],
	},
}

実践

index.htmlに戻り、app.jsをdist/bundle.jsへ変更します

index.html
-<script type="module" src="app.js"></script>
+<script type="module" src="dist/bundle.js"></script>

app.jsに以下のコードを追加します

app.js
const ages = [1, 1, 4, 52, 12, 4];
console.log(uniq(ages));

ブラウザに行き、Console Panelで結果を確認しましょう

自分のJSを作る

まずはsrcフォルダを作り、その中にconfig.jsを作成します

src/config.js
const apiKey = 'abc123';

constはグローバル変数ではなく、Block Scoppedの変数です
すなわち、他のJSファイルをapiKeyをアクセスすることができません

他のJSファイツをapiKeyにアクセスするために、exportする必要があります
exportには二つのパターンがあります：Default ExportとNamed Export

Default Export

  • importするとき、自由に名前を決められます
  • moduleに応用される場合が多い
  • 一つのmoduleファイル（JSファイル）には一回だけDefault Exportできます

export側は

src/config.js
const apiKey = 'abc123';
export default apiKey;

import側は

app.js
import apiKey from './src/config.js';

console.log(apiKey) // abc123

自由に名前を決めることができるので
こういうのもありです

app.js
import aloha from './src/config.js';

console.log(aloha) // abc123

Named Export

  • importするとき、固定の名前を使わなければなりません
  • method、variableに応用される場合が多い
  • 一つのmoduleファイル（JSファイル）には無限にDefault Exportできます

export側は

src/config.js
export const apiKey = 'abc123';

import側は

app.js
import { apiKey } from './src/config.js';

console.log(apiKey) // abc123

import apiKeyはDefault Export用の記法で、
もしNamed Exportだったらimport { apiKey }を書きましょう
別に間違ってもエラーにならないですが、ただwebpackがイエローになるだけです

Discussion