タグ

ブックマーク / abouthiroppy.hatenablog.jp (4)

  • webpack4への簡単なマイグレーションガイド - 技術探し

    トラッキング ローダー/プラグイン作者向け 変更一覧 簡単なマイグレーションガイド #0CJS(Zero-Config JS) 環境 Node4のサポートが切れました webpack-cliへの分離 ローダー/プラグインのアップデートが必要 side-effects(old: pure-module) configファイル mode loadersからrulesへ プラグイン 変更 uglifyJS extract-text-webpack-plugin その他 コード System.import() webpackInclude/webpackExcludeのサポート モジュールタイプ CJSとESMについて 前提知識 javascript/esm さいごに まだ、公式の方で作成中の段階ですので、一旦ここにまとめます。 この記事では、loader/plugin開発側の話はしません。 me

    webpack4への簡単なマイグレーションガイド - 技術探し
  • package.jsonで値を展開する - 技術探し

    🎍今年初の記事です🎍 そういえばこんな機能あったなーって感じだったので記事にしてみました。 当は今年最初の記事用意していたのですが、まだ終わってないので後ほど。。 github.com 今回は、タスクのstartとbuildに同じ変数をwebpackへ渡すために共通化したくて、量が多くなってきたのでリファクタリングしました。 手順 文字列の場合 オブジェクトの場合 配列の場合 まとめ 手順 $npm_package_にpackage.jsonに書いたkeyをつなげるとそれのvalue展開されます。 コンソール上では、展開されませんが、JS上では展開されます。 // 確認用のJS console.log(process.argv[2]); $ npm run main > node main.js $npm_package_foo bar 文字列の場合 { "foo": "bar",

    package.jsonで値を展開する - 技術探し
  • 簡単なアプリケーションでwebpackとbabelの設定をしなくて済むライブラリを作った - 技術探し

    github.com 最初に ターゲット モチベーション ゴール sweetpack できること プラグイン・設定 設定ファイル 共通プラグイン 開発時プラグイン 有効化されるプラグイン ビルド時プラグイン 有効化されるプラグイン サンプル さいごに 最初に ターゲット 簡単なwebアプリケーション モチベーション 同じ設定ファイルを書くことが多いのでそれを避けたい ゴール babelの設定とwebpackの設定を書かなくてもある程度のことはできるようになる。 ただ、複雑なアプリケーションだとwebpackは無限大なのでそこまでサポートする気はない。 webサイトとかを作るときに、プロダクションや開発の設定(minify, hashed name, server, etc…)を書くのがめんどくさいのでそれを解決する。 sweetpack できること webpackとbabelの設定ファイル

    簡単なアプリケーションでwebpackとbabelの設定をしなくて済むライブラリを作った - 技術探し
  • PWAの実装をしてみた - 技術探し

    一年以上前の記事なので、コードが古いです。気をつけて読んでください。 PWAとは? 目的 技術スタック Service Worker PWAのview App Shell Content キャッシュ戦略 読み込みフロー Web App Manifest デザイン FirefoxとChromeしかService Workerないけどどうするの? ネットワーク 実装 ライブラリ webpack-offline 構成 ファイル ルーティング アセットのインストール API周り SSR 資料 さいごに そういえばPWAの実装したことがなかったなと思ったので少し触ってみた。 PWAとは? PWA(Progressive Web Apps) インストールが不要で、不安定なネットワークでも素早く起動し、プッシュ通知を可能にします。 また、ホーム画面にアイコンも表示でき、アプリと同様の扱いをすることが可能

    PWAの実装をしてみた - 技術探し
  • 1