Webpack入門(yarn編)

2020/01/24

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
node-config で環境設定ファイルを利用する
Git から clone したときのエラー対処
パスワードを初期化(再設定)する
Mac に MySQL をインストール
Mac に PostgreSQL をインストール
Laravel 環境構築 - Mac ネイティブ編
Firebase 入門 - CLI インストールとデータベースの設定
Firebase 入門 - Firebase とは
AWS 無料枠(t2.micro)で容量とメモリエラー
Cloud9 を起動する -初心者編-
gcloud で GCEインスタンスを起動してみる
AWS CLI と jq でインスタンス一覧を整形して表示
React と Laravel7 のプロジェクトを作成する
Homebrewインストール-2020年版
3直線で囲まれた範囲塗りつぶし
PuLP で線形最適化問題を解く
カスタムのペジネーションを作る
node-sass を使って sass をコンパイルする
Log ファサードでSQLログを分離して書き出す
いちから始める Docker - 複数のコンテナを使う - (2020年)
いちから始める Docker - docker-compose を使う - (2020年)
AWS ECR を使ってみる
Laravel7 でマルチ認証
Mac に AWS Client を設定する
Laravel7 リリース
v-html でHTML表示する
Laravel で Vue コンポーネントを使う
Laravel で Nuxt.js を使ってみる(Docker環境)
いちから始める Docker -コンテナをビルド- (2020年)
いちから始める Docker -起動してみる- (2020年)
Mac で MySQL(8系)
composer で vendor がインストールできない
Eloquent の日付を Carbon で扱う
webpack 4 入門(npm編)
[Mac]容量を減らす
DIコンテナはじめ
freee SDKを Laravel で使ってみる
freee API を使ってみる
Segueを利用しない画面遷移
Xcode11.3 で XVim2 を利用する
Codable で JSONを読み込み
Webpack入門(yarn編)
MacからLaradock PostgreSQLで接続エラー
Dockerで不要なコンテナ・イメージを削除
Mac で Laradock の構築
Composer インストール
yarn インストール&プロジェクト作成
Laravel 6.x 構築(Homestead編)
nvm インストール
npm install が Mac でエラー