Hot Module Replacement | webpack
Hot Module Replacement (HMR) exchanges, adds, or removes modules while an application is running, without a full reload. This can significantly speed up development in a few ways: Retain application state which is lost during a full reload. Save valuable development time by only updating what's changed. Instantly update the browser when modifications are made to CSS/JS in the source code, which is
Reduce JavaScript payloads with code splitting | Articles | web.dev
Nobody likes waiting. Over 50% of users abandon a website if it takes longer than 3 seconds to load. Sending large JavaScript payloads impacts the speed of your site significantly. Instead of shipping all the JavaScript to your user as soon as the first page of your application is loaded, split your bundle into multiple pieces and only send what's necessary at the very beginning. Why is code split
Riot.jsで真偽値属性(disabledなど)が「__disabled」になる問題(v3.0.0) - Qiita
この内容はv3.0.0の場合の話です。最新版では発生しません。 Riot.jsについて 最近のフロントエンド開発ではReactを使うことが多いですが、私は少数派ですので、「Riot.js」をよく使っています。 検索から来た人は、Riot.jsのことはよく知っているはずなので良いですが、そうでない人はぜひ使ってみてください。 __disabled問題 Riot.jsでは、disabled="{ !data.reference[0] }"のように判定式でdisabledが出来る。と公式ガイドに書いてある。 真偽値属性 (checked, selected など) はテンプレート変数がfalse的であれば無視されます。 <input checked={ null }>は <input>になります。 http://riotjs.com/ja/guide/#真偽値属性 しかし、いざ使おうとすると、な
LineBotで Ethereum の web3.jsを操作する（その２ : ローカルで署名してから送金） - Qiita
var Ether = (function() { /** * コンストラクタでethereumjs-txとethtereumjs-utilを読み込み */ var Ether = function(require) { if(!(this instanceof Ether)) { return new Ether(require); } this.Util = require('ethereumjs-util'); this.Tx = require('ethereumjs-tx'); } Ether.prototype.setChain = function(chain){ switch(chain){ case 'mainnet': return {'node':'https://mainnet.infura.io/[infura.ioのAPI KEY]','api':'https:
chrome-extension-webpack-boilerplate で手早く Chrome 拡張機能の開発環境準備 - Qiita
最近 Chrome 拡張機能の開発を簡単に始める方法を調べていたのですが、その中で chrome-extension-webpack-boilerplate を使うと簡単に始められたので紹介します。 筆者の前提 Chrome 拡張機能を開発するのが初めて。チュートリアルをこなした程度 Webpack は触ったことがある chrome-extension-webpack-boilerplate とは GitHub - samuelsimoes/chrome-extension-webpack-boilerplate Chrome 拡張機能の開発を楽にしてくれる boilerplate は調べると色々あります。 その中でも、chrome-extension-webpack-boilerplate は、Webpack で 開発に使う JavaScript のモジュールを管理できるようにしてくれる
📦 Parcel v2のRFCが公開されました 🎉 - Qiita
2020/06/21追記： 2020/6/19にParcel 2のベータ版が公開されました。 🚀 Parcel 2 beta 1 has been released! 🌳 Improved tree shaking 🗺 20x faster source map builds #️⃣ Improved content hashing 🚨 Resolver diagnostics 📊 More accurate bundle reports 🐞 Tons of bugfixes! 📝 Read more: https://t.co/hMGtOKEOs3 🌎 New website! https://t.co/SWaS5OvWIA — Devon Govett (@devongovett) June 18, 2020 それに伴い、Parcel 2でいくつかの開発環境を構築する記
全社導入された iMac Pro 実際どうなの? 現場での導入背景と各プロダクトのリアルベンチマーク
こんにちは。 ビズリーチ インキュベーションカンパニーで新規事業のエンジニアをしている藤村です。 幾つかのメディアに取り上げて頂きましたが、現在開発マシンとして全エンジニア、デザイナーの希望者に、iMac Pro と標準スペックの MacBook Pro を支給しています。 ※ ノート派の方は高スペックの MacBook Pro を選択できます。 一方で、iMac Pro って普通のサーバーサイド、Web 開発程度で効果あるの? と疑問を持つ方もいるかもしれません。 実際に私達も計測する前はそうでした。 結論からいうと、クリーンビルドで 2.13 倍〜 6.67 倍、インクリメンタルビルドで 1.33 倍〜 7.00 倍という効果がありました。 今回は、ビルド速度と金の弾丸の相関に興味がある方々に向けて、導入背景の小話と、iMac Pro 導入後のリアルなベンチマーク結果を共有したいと思い
vue-cli 3.0で立ち上げたアプリに複数のエントリーポイントを用意する - Qiita
概要 エントリーポイントを分けることで、コードの見通しは良くなり、余分なコードのダウンロードを避けることができます。 今回、vue-cli 3.0 で立ち上げた趣味アプリに複数のエントリーポイントを用意したのですが、 思いの外苦戦したので設定方法を共有したいと思います。 設定方法 vue-cli の2系までは webpack.config に entry を記述することで、複数のエントリーポイントに対応する事ができました。1 しかし、vue-cli 3.0でセットアップしたプロジェクトには webpack.config が生成されません。 その代わりに vue.config.jsに vue-cli の設定を記述することができます。2 この中で pages オブジェクトとして、複数のエントリーポイントを定義することができます。 この状態を multi-page mode と呼びます。 vue
JavaScriptの名前空間とモジュール分割方法 require(node.js/browserify) HTMLScriptタグ WSH フル対応 - Qiita
タイトルが長くなりました。 名前空間、モジュール分割。 これだけでJavaScript業界(界隈)はひどく混乱しているような気がしました。 自分はクラスタイプの.NET系経験のある、JavaScriptを初めて1ヶ月程度の者です。 他言語では迷う事のない言語の根本的な名前空間とかスタティッククラスモジュール分割的な機能が、JavaScriptだと歴史的経緯として実装がさまざまになってしまっている事に驚きました。 どうにか、混乱しないようにしておかないといけないな、と思ったのでまとめておきます。 例えば、'名前1.名前1-1.名前1-1-1'、みたいな'文字列'をピリオドで分解してNameSpaceとして定義する、というような実装は複雑なので採用しませんでした。 ちなみに環境はWindowsですが、最後のWSH JScript 部分以外はどんな環境でも使えると思います。ほとんどのファイルはU
複数ファイルをbrowserifyするのにgulpを使うのを諦めた話 - Qiita
背景 browserifyは大変便利なコマンドです。 それ自体には、複数ファイルを処理するためのオプションはありません。 gulpとgulp-browserifyを組み合わせて複数ファイルを処理する方法があります。 結論 gulp-browserifyは、既にメンテナンスされていません。 npm scriptでnpm-run-allを使って置き換えました。 npm scriptで置き換え gulp-browserifyの場合 srcディレクトリにあるclient.jsとexecute.jsを変換します。 const gulp = require('gulp') const browserify = require('gulp-browserify') const src = 'src/' const dest = 'dest/' gulp .task('browserify', () =>
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How to use Parcel to bundle your React.js application
Webpack 4：babel-loader のアップデートで起きたエラーを解決 - Qiita
【初心者】vscode-eslintでTypeScriptを自動整形 - Qiita
Monaca CLIで 'Cannot find module 'home\.cordova\node_modules\webpack' と怒られたとき - Qiita
Macでオレオレ証明書＋ webpack-dev-server - Qiita
TypeScriptでdoes not exist on typeと言われた時の対策
size-plugin
veuify + browserify - Qiita
Macでbrowserifyで結合しているとcase-insensitiveなファイル名指定をしても、Macでコケなくて、Linuxに持って行った時にコケる現象が、たまに起きる。これをカジュアルにチェックしたい - Qiita
browserify+babelifyでReactアプリをトランスコンパイルできるシンプルなビルド環境を用意する - Qiita
