[B! Webpack] EF-0512のブックマーク

いちばんやさしい webpack 入門

webpack is 何? webpack とは、一言で言うと JavaScript 向けのモジュールバンドラーです。複数の JavaScript モジュールを一つ（またはいくつか）のファイルへバンドル（=bundle: 束にする、包む）してくれます。複数の JS モジュールを（場合によっては CSS や画像などのアセット類も）一つにまとめるすでに新規開発の終了も伝えられる webpack ですが、「STATE OF JS 2022」ではいまだに利用率 No.1 の地位にあります。 webpack 後継のモジュールバンドラーとしては、すでに Turbopack の開発開始がアナウンスされています。しかし、これがプロダクションレベルに達するまでは webpack がおそらく使い続けられることになるでしょう。使うメリットは何？モジュールを 1 つ（もしくは少数）にまとめることでブラウ

EF-0512 2022/05/04

webpack

リンク

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

EF-0512 2018/12/26

webpack

リンク

webpackと仲良くなろう

Transcript XFCQBDLͱ஥ྑ͘ͳΖ͏ 8F�"SF�+BWB4DSJQUFST��!��UI None XFCQBDLͱ஥ྑ͘ͳͬͯ  ͞Βʹ։ൃޮ཰Λ  ͋͛ΔΑ͏ʹͳΔͨΊͷࢿྉͰ͢ XFCQBDLͱ஥ྑ͘ͳΔલʹ  ৘ใΛݟ΍͘͢͢Δ ಛʹͳʹ΋ઃఆ͠ͳ͍৔߹ ͜ͷ··Ͱ͸ݟͮΒ͍ XFCQBDL�EBTICPSE IUUQT��HJUIVC�DPN�'PSNJEBCMF-BCT�XFCQBDL�EBTICPBSE CFGPSF BGUFS Կ͕஌ΕΔͷ͔ w� -PH��ϏϧυϓϩηεͱΤϥʔϩάͷه࿥� w� 4UBUVT��Ϗϧυϓϩηεͷεςʔλε� w� 0QFSBUJPO��ϏϧυϓϩηεͰൃੜ͢Δಛఆͷૢ࡞� w� 1SPHSFTT��Ϗϧυͷਐḿঢ়گ� w� .PEVMFT��ϞδϡʔϧϦετҰཡʹαΠζͱόϯυϧαΠζ� w� "TTFUT��Ϗϧυ

EF-0512 2018/01/26

リンク

webpack 4 入門 - Qiita

お知らせ（2020/08/25 追記） Udemy で「webpack 最速入門（10,800 円 -> 2,000 円）という講座を公開しました。本来の価格は10,800円ですが、上記リンクからアクセスすると2,400円で購入できます。どんな内容？ webpack を利用したフロントエンド開発環境が構築できるようになる、ハンズオン形式の講座です。詳細は上記のリンクのプレビュー動画で詳しく説明しています。記事との内容の違い記事の内容に、以下の内容や特徴が追加された感じです。実務で利用できる開発環境を徐々に構築していくので、記事と比べて実践的な内容ハンズオン形式の講座なので、手を動かしながら webpack を学習できる webpack の設定ファイルに追加する値の詳細をすべて解説記事では解説していない細かい補足や、機能のご紹介なぜ npm scripts を利用するのか

EF-0512 2017/12/24

Webpack

リンク

フロントエンドの未来の話 - Qiita

前置き会社の勉強会資料になります（6/16発表）フロントエンドの未来の話というか、色々なライブラリの紹介ですほとんどが5月上旬くらいに書いた資料なので、それ以降に変化があったライブラリについては、追記という形で資料の中にコメント入れてますモジュールバンドラーの未来モジュールバンドラーとは簡単に言うと、JavaScriptのビルドツールのことです最近はフロントエンドでも、機能ごと・共通化などの理由によって、JSファイルを分けてコーディングをするので、最終的にそれをまとめて、1個のJSにする必要があるその時に使われるのが、モジュールバンドラー有名どころのツールみんな大好きwebpack 後は、rollupとかbrowserifyとかですが、、これからの時代は fuse-box fuse-boxとは webpackと同様なモジュールバンドラー設定ファイルがシンプル w

EF-0512 2017/06/19

リンク

今時のフロントエンド開発2017 (1. 愚痴編) - Qiita

良いものを書きたいので指摘などは大歓迎です。その際はコメントや編集リクエストをいただければ修正します。大きな変更が加わるときは通知すると思います。はじめにこれまでのフロントエンドの開発には多くの問題や面倒ごとを抱えています。その解決手段としてよくビルドツールやaltJSといったワードを目にしますが，これらがどういった目的で利用されているのかについて触れながら進めていきます。主にパッケージ管理やビルドツールを初めて見る人向けになっているので全編通すとそれなりに長いです。動かすまでが長めになっていますが理解してしまえば本当に必要な手順はさほど多くありません。実際に開発を始めるために必要な準備はせいぜい1~2つのファイルを記述してコマンドを数回叩く程度なので，過度な抵抗感を持たずに読んでいただけたらなと思います。登場するツールや技術は多くの問題を解決してくれますが，これらは飽く

EF-0512 2017/03/29

リンク

フロントエンド知らない私のwebpack入門その1 - Qiita

jQuery 1.7 あたりで知識が止まっている、最近のフロントエンド開発を知らない私が入門しています、という記事です。なんか長くなったし、気力も持たないので、その1ということで書いています。 webpackってなあに？ npm経由で入るアセットバンドラー (asset bundler)です。Webフロントエンド開発用のビルドツールです。 SPAなどを作る時、 HTML・JS・CSS・画像やウェブフォントなど一連のリソースをまとめてくっつけたり、くっつけられるように加工したり、 JSをbabelで古いブラウザ向けに変換したり、 TypeScriptやらをJSに変換したり、全部面倒見てくれます。ただwebpackに上記の機能を全て内蔵しているわけもなく、プラグインやローダーとかいった追加の機能をプロジェクトにインストールして設定することにより利用できるようになります。最近のフロント

EF-0512 2017/02/08

リンク

webpackを使った Rails上でのReact開発 - クックパッド開発者ブログ

はじめにこんにちは、投稿開発部エンジニアの芳賀です。既存のRails プロジェクトの中でReact.jsを利用する機会があったので、その時にやったことについてまとめてみます。私自身は普段RailsのサーバサイドとCoffeeScriptが中心で、最近のJavaScript開発環境についてあまりキャッチアップできていなかったのですが、それらの状況を把握しつつ試行錯誤で開発していった経験から、できるだけ「React採用してみたいけどJavaScript界隈よくわからない目線」で書いてみようと思います。 RailsでReact.jsを使ういくつかの方法 2016年時点で、RailsでReact.jsを使う方法はいくつかあって、どれを採用するかで悩みました。 vendor/assets/javascripts にreact.jsを置いて利用する react-rails gem を利用する br

EF-0512 2017/01/05

リンク

はてなブックマーク

タグ

関連タグで絞り込む (5)

Webpackに関するEF-0512のブックマーク (10)

お知らせ

月間はてなブックマーク数ランキング（2024年8月）

今週のはてなブックマーク数ランキング（2024年9月第1週）

今週のはてなブックマーク数ランキング（2024年8月第4週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス