タグ「webpack」 - はてブログ

タグ webpack

新着順人気順 5 users 10 users 50 users 100 users 500 users 1000 users

(1 - 25 / 109件)

次の25件 »

さよなら Webpack さん

2024/03/09 87 users Webpack

新卒時代に作った資料を加筆。続きを読む

JavaScriptランタイムのBun、インストール不要の実行ファイル生成が可能に。Webpackより200倍以上高速とするバンドラがβ版、Puppeteerにも対応

2023/06/05 64 users Webpack Bun サーバサイド puppeteer 単独

JavaScriptランタイムのBun、インストール不要の実行ファイル生成が可能に。Webpackより200倍以上高速とするバンドラがβ版、Puppeteerにも対応サーバサイドで実行可能なJavaScriptランタイム「Bun」は、5月に登場したバージョン0.6で、Bunをインストールすることなく、配置することでアプリケーションを実行できる単独... 続きを読む

社内の静的アセット管理リポジトリのNode.jsのバージョンを上げたら動作が爆速になった話 - BASEプロダクトチームブログ

2023/03/06 11 users 爆速 node.js 動作 BASEプロダクトチームブログ

初めにこんにちは。フロントエンドエンジニアの竹本です。入社してそろそろ4ヶ月が経とうとしています。だいぶBASEの開発にも慣れてきました。この記事では私が社内の静的アセットを管理しているリポジトリ(以降は便宜上static-repositoryと呼びます)のNode.jsのバージョンを12から16にあげたら、webpack dev server... 続きを読む

Webpackの後継となる新バンドルツール「Turbopack」が登場。Rust製のネイティブアプリケーションでWebpackの700倍高速に。Next.js Conf 2022

2022/10/26 96 users Webpack ネイティブアプリケーション Vercel

Webpackの後継となる新バンドルツール「Turbopack」が登場。Rust製のネイティブアプリケーションでWebpackの700倍高速に。Next.js Conf 2022 Reactベースのサーバサイドフレームワークとして知られるNext.jsの開発元のVercelは、日本時間10月25日深夜にイベント「Next.js Conf 2022」を開催。Next.jsの最新バージョンと... 続きを読む

レガシーなMPAアプリケーションをwebpackからviteに移行する話

2022/10/16 16 users Webpack vite

株式会社iCAREでは、Vue2.6(※2.7に移行中)+Composition APIで開発を行っており、vue2系では比較的モダンな構成です。一方、Ruby on RailsのView毎にVueインスタンスを生成するMPAであり、アプリケーション全体の構成としては、レガシーな構造になっています。エントリーポイントが多いことによる弊害で、サービス拡大に... 続きを読む

Vue3<script setup lang="ts">知見

2022/10/02 15 users lang Webpack script setup 知見

続いて、TypeScriptが入っていなかったので入れたのですが、なかなか<script setup lang="ts">の知見がネットになかったのでここに軽く共有できたらと思います。前提 Vueは3.2系（<script setup>が使えるのは3.2系から） TypeScriptは4.5.5(vue-createするとこれが入る) webpacker... ts-loader 有用なドキュメント集 ... 続きを読む

RustのWasm周りのクレートまとめと、Trunkを使ってRustで書いたWasmをブラウザ上で簡単に実行する

2022/06/11 16 users trunk Webpack rust wasm npm

wasm-packを使うことで、ビルドしてwasm-bindgen-cliでさらに変換処理を行い、npmで配布可能なパッケージにするという多段階必要なビルド手順をまとめることが可能です。またnewコマンドのようなテンプレートから生成する機能などもあり、より手軽にWasmの実行を行えます。後述のTrunkとの違いは、wasm-packはwebpack... 続きを読む

いちばんやさしい webpack 入門

2022/05/02 358 users Webpack ハンドラー Bundle CSS モジュール

webpack is 何? webpack とは一言で言うと JavaScript 向けのモジュール・バンドラーです。複数の JavaScript モジュールを一つ（またはいくつか）のファイルへバンドル（=bundle: 束にする、包む）　してくれます。複数の JS モジュールを（場合によっては CSS や画像などのアセット類も）一つにまとめるモジュール... 続きを読む

「The State of JS 2021」公開。最も使われているフロントエンドのライブラリはReact、バックエンドはExpress、ビルドツールはWebpackなど

2022/02/17 36 users Webpack ビルドツール React Express 米国

「The State of JS 2021」公開。最も使われているフロントエンドのライブラリはReact、バックエンドはExpress、ビルドツールはWebpackなど回答者の国別分布を上位5位までを見ると米国が14％、ドイツが4.8％、ロシアが4.5％、フランスが4.2％、イギリス（UK）が4％となっており、日本の回答者は1.3％で15位、中国の回答... 続きを読む

やっぱりwebpackがわからない（エピソード1）

2022/01/29 338 users Webpack vite わしネーミング Vue.js

webpackがわからない最近はViteが注目されだして、実際にとても良いビルドツールです。Vue.jsのEvan Youさんが開発しただけのことはありますね。ネーミングもイカしてます。しかし、だからといって、では開発環境にViteを採用しようと簡単にはできないのが、業務の辛い所です。新しい技術を採用して、「わしが全責任を... 続きを読む

【Rome】RomeはJavaScriptをやめてRustにするってよ - Qiita

2021/09/27 17 users Qiita rust Rome Webpack Babel

RomeはLinterでありCompilerでありBundlerでありFormatterでありTesterでありMinifierであり…… ともかく、フロントエンドの統合ツールチェーンです。これまでBabel、ESLint、webpack、Prettier、Jestなど様々なツールでバラバラに行っていた作業が、Romeひとつ使うだけで完結するようになるという、これまで何度再発明... 続きを読む

1枚岩なMPAプロダクトでWebpackのマルチエントリーをさらにグルーピングしてビルドする - メドピア開発者ブログ

2021/06/08 12 users 掲題小宮山事柄 Webpack 勢い

Noita世界の理不尽をこの身をもって体験した末にバウンドルミナスで全てを切り刻んでクリアしました、フロントエンドグループの小宮山です。以前からこれできたらいいのになぁと思いながら無理そうと諦めていた掲題の事柄を実現できた嬉しさの勢いのままに書き始めています。状況 1枚岩なMPAプロダクトがどういうもの... 続きを読む

JavaScriptツールチェインの統一を目指す「Rome」開発チームが起業、「Rome Tools, Inc.」を立ち上げ－ Publickey

2021/05/05 117 users Publickey Rome Webpack Babel 統一

JavaScriptツールチェインの統一を目指す「Rome」開発チームが起業、「Rome Tools, Inc.」を立ち上げ現在、モダンなJavaScript開発環境としては、ESLintに代表される構文チェッカーや、Babelに代表されるJavaScript変換ツール、モジュールを組み合わせるなどのバンドル操作を行うWebpackなど、さまざまなツールを組み合... 続きを読む

webpack4系から5系にアップデートした際の対応事項とかメモ - Madogiwa Blog

2021/04/26 13 users メモアップ Webpack BUILD mode

個人で開発しているサービスでフロントエンドのbuildにwebpackを利用しているのですが、4系から5系にアップデートしたので、そのあたりで対応したことをメモしておきます? 利用していたwebpackのビルド構成 webpackアップデート時の対応事項メモ modeを明示的に指定するようにしたデフォルトでinstallされなくなったNo... 続きを読む

Native ESM 時代のフロントエンドビルドツールの動向

2021/03/09 111 users Native ESM 動向 Webpack rollup 時代

No Bundle ツールの流行: vite / rollup モダンブラウザは Native ESM を備えているので、開発時は高速な localhost アクセスを頼って直接 import する、外部ライブラリだけ事前にコンパイルしておく、という手法が流行ってきている。プロダクション用は今まで通りビルドする。 webpack はすべてを一つにバンドルするた... 続きを読む

Webpackを一歩一歩確実に理解してReact + TypeScript環境を作る - Qiita

2020/06/20 250 users Webpack Qiita React 先入観動機

※自分のブログに投稿したのものと同じです。 https://mr-ozin.hatenablog.jp/entry/2020/06/20/043243 動機毎回 npx create-react-app で React アプリを生成していて Webpack の勉強から逃げていたが、いい加減向き合いたいと思ったため。昔 Webpack に入門しようとしたら難しいという先入観を抱いたので、できるだけ... 続きを読む

webpackの次のバージョンで入るassetModulesの紹介 - 技術探し

2020/06/02 14 users Webpack バージョン技術紹介

この機能が導入されることにより、{raw/file/url}-loaderが不要となります。 webpack@4でも使えますが、まだ実験的フェーズです。 Documentation webpack.js.org PR github.com モジュールタイプと以前との対応表 asset/resource -> file-loader asset/inline -> url-loader asset/source -> raw-loader asset -> asset/... 続きを読む

webpack@5で入るModule Federationについて - 技術探し

2020/05/06 12 users webpack@5 Webpack Proposal 技術

Module Federation(以下 mfe)はwebpack@5から入る新しい仕組みの一つです。 Proposal 目的用語注意設定とコードリモートローカル依存関係共有 Q&A さいごに Proposal github.com 目的アプリケーションを作る時に、webpackはビルド時のソースコードは使う前提で実行するので、様々な最適化を行うことができます。 ... 続きを読む

俺の webpack.config.js-20200503 - mizchi's blog

2020/05/03 193 users Webpack mizchi's blog

基本思想基本は ts-loader を transpileOnly: true で使うだけ。最悪これだけでいい。型チェックはIDEか yarn tsc -p . --noEmit でやる。 CRA や parcel は使わない。暗黙な振る舞いが多すぎるので。一切勉強したくない人はいれていいと思うが、その場合 dist ディレクトリをそのまま使うこと前提 style-loader/css-lo... 続きを読む

モダンJavaScript概論 − Node, npm, ECMAScript, Babel, Webpack | Hypertext Candy

2020/04/30 291 users Webpack ECMAscript Babel npm 前提

2020.04.30 モダンJavaScript概論 − Node, npm, ECMAScript, Babel, Webpack この記事では、モダンな JavaScript を書くための前提として知っておくべき、いくつかのキーワードを紹介します。想定読者は、初心者〜 jQuery なら書けるレベルの開発者です。これから React や Vue.js を学びたい方、または Web 開発の世界... 続きを読む

webpack 5 の webpack federation という概念について - Qiita

2020/03/13 15 users Webpack Qiita 概念

注意: まだHEADにすらマージされていない機能です。僕の現状の理解で書いてます。細かいニュアンスは見落としてるかも。今の課題異なるチームで、異なるビルドプロセスのものを統合するような巨大なフロントエンド、いわゆるマイクロなフロントエンドやってると、同じようなライブラリが内部的に重複するよね webpack... 続きを読む

Webpackの70倍！Go言語で書かれたJavascriptバンドラー「esbuild」をベンチマークテストしてみた - ITnews

2020/02/18 158 users Webpack ハンドラー ITnews esbuild 現代

ITニュースピック一覧Webpackの70倍！Go言語で書かれたJavascriptバンドラー「esbuild」をベンチマークテストしてみた esbuild https://github.com/evanw/esbuild/ esbuildの特徴複数モジュールの依存関係を解決し、1つにまとめるバンドラーは、現代のフロントエンド開発においてなくてはならないツールの1つ。 The Sta... 続きを読む

CircleCI (Performance Plan) vs. Github Actions - Diary

2019/09/17 59 users CircleCI Webpack diary Rails ぺら

CircleCI (Performance Plan) vs. Github Actions 結論: CircleCI を買おう現在ユビレジでは CI は CircleCI (Performance Plan)と TravisCI を使っていて、 CircleCI: サーバーサイド(いろんな言語がある) Web フロントエンド(Rails アプリのなかで webpack が動いていたり、 create-react-app で作られたペラっとした... 続きを読む

2行でwebpack.config.jsで補完を効かせる方法 - Qiita

2019/08/05 57 users Webpack Qiita TypeScript 補完前提

まず前提として、webpack.config.jsそのものをTypeScriptで書くことができる。公式ドキュメントにも記載があり、ts化自体は数分で終わる。しかし、このwebpack.config.jsをStoryBookの設定から参照するなど他のツールから読まれるときにTypeScriptだと不都合な場合がある。そのようなときに、この方法を使うと1分もかか... 続きを読む