webpack@5の主な変更点まとめ - hiroppy's site
予定では、明日の 10 日に webpack のメジャーバージョンである v5 がリリースされますが、まだエコシステムが安定していない可能性があるため、注意してアップグレードを行ってください。 webpack 5 release plan · Issue #11406 · webpack/webpack TL;DR: release planned for 2020-10-10 After nearly 1 year of beta testing and about 2 years of devel... change log: https://github.com/webpack/changelog-v5 移行ガイド: https://webpack.js.org/migrate/5 追加機能 Persistent Caching このバージョンからは今までメモリ上でしか行ってなかった
webpack@5で入るPersistent Cachingについて - hiroppy's site
webpack/lib/config/defaults.js 実際に使うときの設定 結論ですが、webpack.config.js へ以下のように書くことが推奨されます。 module.exports = { cache: { type: "filesystem", buildDependencies: { config: [__filename], }, }, }; あとは、各コードの設定に依存するためversion等の追加が必要になる可能性があります。 ドキュメント Other Options | webpack webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, ... 仕組み ファイルキャッシュでは以下のようにデフォルトではnode_m
webpackの次のバージョンで入るassetModulesの紹介 - hiroppy's site
この機能が導入されることにより、{raw/file/url}-loader が不要となります。 webpack@4 でも使えますが、まだ実験的フェーズです。 Documentation Asset Modules | webpack webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, ... モジュールタイプと以前との対応表 asset/resource -> file-loader asset/inline -> url-loader asset/source -> raw-loader asset -> asset/resourceとasset/inlineを自動選択する(閾値: 8kb) 使い方 実験フラグをオンにする。 // webpa
webpack@5で入るModule Federationについて - hiroppy's site
Module Federation(以下 mfe)は webpack@5 から入る新しい仕組みの一つです。 Proposal Merge Proposal: Module federation and code sharing between bundles. Many builds act as one · Issue #10352 · webpack/webpack This is a proposal to merge my existing work into the Webpack core. The base concept is federated ap... 目的 アプリケーションを作る時に、webpack はビルド時のソースコードは使う前提で実行するので、様々な最適化を行うことができます。 もし、node_modules 経由以外でライブラリを使うという場合は scrip
OSSの現状と今後 - hiroppy's site
Gatsby が面白い仕組みを導入していて、驚いたので書くことにしました。 Gatsby React.js の静的サイトジェネレーター GitHub - gatsbyjs/gatsby: The fastest frontend for the headless web. Build modern websites with React. The fastest frontend for the headless web. Build modern websites with React. - GitHub - gatsbyjs/gat... 最近、海外ではとても流行っています。 コミュニティ 最近、gatsby のメンテナチームに所属しました。 人数が異常ですよね、このチームに所属していると gatsbyjs/gatsby の write 権限を持ちます。 そう、個人的に画期的だと思った
webpackの仕組みを簡潔に説明する - hiroppy's site
この記事は、Node.js Advent Calendar 2018の 18 日目の記事です。 遅れてしまい本当に申し訳ありません。 この記事は、HTML5 カンファレンスで話した内容が中心となります。 Node.js とはかけ離れていますが、自分が書きたかった内容だったので、理解してくださると嬉しいです。 モジュール webpack は以下のモジュールをサポートします。 // ESM (ECMAScript Modules) import foo from "./foo"; export default foo; import("./foo.wasm"); // native support for WebAssembly import("./foo.json"); // native support for JSON // CJS (CommonJS Modules) const fo
Node.jsのアプリケーションデバッグ・改善方法をおさらいする - hiroppy's site
ステップ実行 --debugと--debug-brkは Node8 の時点ですでに非推奨なので、使わないでください。 デバッグ方法 コンソール Chrome devtools または、VSCode のような IDE に任せる 今回は、エディタ依存の話は特にしないです。 共通的な手順 基本的には、debugger を止めたい場所に置いていくことになります。 例として、以下のコードで説明していきます。 "use strict"; const { readFile } = require("fs"); const { promisify } = require("util"); const readFileAsync = promisify(readFile); (async () => { const data = await readFileAsync("hello.txt", "utf8"
エンジニア採用のための仕組みづくり - hiroppy's site
文章化したかったので記事にしました。 技術寄りの自分が思うことです。 結論 外部から見てもその会社が技術的に何をやっているかというのをわかりやすくするべきです。 自分だったら何も情報がない会社には振り向きもしないかなと思います。 ワクワクする会社がいいなって思う。 前提 入社する前(and 応募する前)のエンジニアはその会社のコードなどを知りません。 つまり、その会社で働いている人から聞くか、外から見たその会社の印象ぐらいしか判断する材料がないわけです。 面接や面談でわかることなんてほんと一握りだと思います。 エンジニアを入れたければ、どういう技術を使ってるか、どのような開発を行っているか、どのようなことに力を入れているか等を積極的に対外的に話した方が入社した後との差が少ないと思います。 どこの会社にも必ずある負債やコードの質は入社するまで見れないわけですからそこを考えてもしょうがないけど
Node.jsとECMAScript Modules - hiroppy's site
Node.js のバージョン 10 のリリースは 4/25 を予定しています。 また、ECMAScript Modules は Stability1(実験的)でリリースされます。 議論は以下で行われます。 GitHub - nodejs/modules: Node.js Modules Team Node.js Modules Team. Contribute to nodejs/modules development by creating an account on GitHub. 覚えておくべきこと ESM を使いたい場合は、拡張子を.mjsにする .jsファイルでimport/exportは使えません。 ブラウザではtype="module"となりますが、Node.js では拡張子で判断します。 .mjsの拡張子は省略可能である 拡張子の探査順は ESM の時、.mjsが優先されま
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
