[Mac]容量を減らす
DIコンテナはじめ
freee SDKを Laravel で使ってみる
freee API を使ってみる
Segueを利用しない画面遷移
Xcode11.3 で XVim2 を利用する
Codable で JSONを読み込み
Webpack入門
MacからLaradock PostgreSQLで接続エラー
Mac で Laradock の構築
Dockerで不要なイメージを削除
yarn インストール&プロジェクト作成
Laravel 6.x 構築(Homestead編)
Composer インストール
nvm インストール
npm install が Mac でエラー
HTMLタグでカーソルが同時処理(ミラーリング)されてしまう
DI(依存性注入)
[Ubuntu]Let's Encryptで無料の証明書を利用する
[Apache]Apache2.4のアクセス制限が変更
[Ubuntu]rootのログインとsudo権限追加
タミヤ マイコンロボット工作セットをMacに接続してみた
pgAdimn4 でブラウザで開けなくなる
Java8 を HomebrewとjEnvで構築
Android Studio環境構築 2019
ロケールの再構築
vagrant グループに Apacheを追加
Linux2 Apache2 + PHP7.3 + PostgreSQL10
Anadondaの削除
[Mac]初期設定メモ(CentOS)
[Mac]PostgreSQL起動
FormRequest を利用したバリデーション
try-catch で Exception検知
[Debian]Node.js安定板インストール
Middlewareを利用したルートグループ化
namespaceを利用したルートグループ化
名前付きルートによるリダイレクト
artisanコマンド
IE11以下でclosest() を利用する
Karma と Mochaインストール
コンポーネントを親に登録
[脱jQuery]LoadingOverlay をネイティブで実装
Targetを利用せずに新規ウィンドウを開く(rel,class)
[脱jQuery]ネイティブでDrag&Dropやtableソート
[脱jQuery]$(document).on() をネイティブでコーディング
[Git].gitignore が反映されない
[Git]不要ファイル履歴削除
[GAS]Gmail指定ラベルの不要メール削除
UFJ API(開発用)を利用してみる
RuntimeException No application encryption key has been specified
2020/01/24
icon Webpack入門

webpack の環境を構築してみる
参考:webpack 4 入門 webpackの最大の特徴は「モジュールバンドラ」を利用して、複数のjsファイルを1つのファイル「bundle.js」にまとめる。

構成


├── node_modules
├── package.json
├── public
│   ├── index.html
│   └── js
│       └── bundle.js
├── src
│   └── js
│       ├── app.js
│       └── modules
│           ├── add-calculator.js
│           └── tax-calculator.js
└── webpack.config.js

上記の場合「app.js」「add-calculator.js」「tax-calculator.js」をビルドして「bundle.js」にまとめます。
※NodeJS, npm, yarn などは解説省略

package.json 作成


$ yarn init  --yes
yarn init v1.21.1
warning The yes flag has been set. This will automatically answer yes to all questions, which may have security implications.
success Saved package.json
✨  Done in 0.04s.

webpackインストール


$ yarn add webpack webpack-cli webpack-dev-server --dev

package.json の内容


var path = require('path');

module.exports = {
  entry: "./src/js/app.js",
  output: {
    path: path.join(__dirname, 'public/js'),
    filename: 'bundle.js',
  },
  resolve: {
    extensions: ['.js', '.ts', '.svg']
  },
  module: {
    rules: [{
      test: /\.js$/,
      use: [{
        loader: 'babel-loader',
        options: {
          presets: ['es2015']
        }
      }],
    }, {
      test: /\.ts$/,
      use: [{
        loader: 'ts-loader',
        options: {
          compilerOptions: {
            declaration: false,
            target: 'es5',
            module: 'commonjs'
          },
          transpileOnly: true
        }
      }]
    }, {
      test: /\.svg$/,
      use: [{
        loader: 'html-loader',
        options: {
          minimize: true
        }
      }]
    }]
  }
}

entry & output

entry:コンパイルするメインJSファイルパス(エントリーポイント)

output:出力するメインJSファイルのパス 最初に require した path を利用して最終的に「public」ディレクトリに「bundle.js」を書き出す

resolve.extensions

require , importするファイル拡張子を省略設定

module:babel-loader

ビルドする際、利用するモジュールを設定 babel-loader: Bableに対応する

Babel

次世代 EcmaScript で書かれたJSを、サポートしていないブラウザでも動くJSに変換

module:ts-loader

ts-loader:TypeSceiptに対応する

yarnでインストール


$ yarn install
yarn install v1.21.1
[1/4] 🔍  Resolving packages...
success Already up-to-date.
✨  Done in 0.12s.

jsファイルの作成


$ mkdir src

modules/add-calculator.js


export default function addCalculator(number1 ,number2) {
    return number1 + number2;
}

app.js


import addCalculator from './modules/add-calculator';
import taxCalculator from './modules/tax-calculator';

var item1_price = 100;
var item2_price = 300;
var total_price = addCalculator(item1_price, item2_price);
var tax = 0.1;
var tax_price = taxCalculator(total_price, tax);

window.onload = function() {
    document.getElementById('calculate-result').innerHTML = tax_price;
};

modules/tax-calculator.js


export default function taxCalculator(price ,tax) {
    return Math.round(price * (1 + tax));
}

webpackでビルド


$ yarn run webpack

webpack コマンドを実行する

node_modules のパスをbash に登録することで、webpack コマンドを直接利用できる

.bash_profile を開く


$ vi ~/.bash_profile

.bash_profile に追記


export PATH=$PATH:./node_modules/.bin

.bash_profile を再読み込み


$ source ~/.bash_profile