webpack4系から5系にアップデートした際の対応事項とかメモ - Madogiwa Blog
個人で開発しているサービスでフロントエンドのbuildにwebpackを利用しているのですが、4系から5系にアップデートしたので、そのあたりで対応したことをメモしておきます📝 利用していたwebpackのビルド構成 webpackアップデート時の対応事項メモ modeを明示的に指定するようにした デフォルトでinstallされなくなったNode.js系のpolyfilをinstallした [hash]ではなく[contenthash]を利用するようにした その他の対応事項 webpack-assets-manifestのデフォルトのファイルパスが変わる おわりに 利用していたwebpackのビルド構成 基本的には以下のようなライブラリを利用したBabel + TypeScript + Vueで、 mini-css-extract-pluginでcssを別ファイルで生成するようにして、we
Webpackの70倍！Go言語で書かれたJavascriptバンドラー「esbuild」をベンチマークテストしてみた
Webpackの70倍！Go言語で書かれたJavascriptバンドラー「esbuild」をベンチマークテストしてみた esbuild https://github.com/evanw/esbuild/ esbuildの特徴 複数モジュールの依存関係を解決し、1つにまとめるバンドラーは、現代のフロントエンド開発においてなくてはならないツールの1つ。 The State of JavaScript 上位5つに人気が集中し、なかでもWebpackのシェアは実に約60%に達しています。 今回ご紹介する「esbuild」は、Go言語で書かれた高速なバンドラーで、これらメジャーなツールとの性能比較（ベンチマークテスト）をやってみました。 公式のベンチマーク結果 計測方法は、three.jsライブラリを10回複製し、キャッシュなしで単一のバンドルをゼロから構築しています。なんと、Webpackに比べて
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
俺の webpack.config.js-20200503 - mizchi's blog
基本思想 とにかく薄く。必要なものだけ。基本は ts-loader を transpileOnly: true で使うだけ。最悪これだけでいい。型チェックはIDEか yarn tsc -p . --noEmit でやる。 CRA や parcel は使わない。暗黙な振る舞いが多すぎるので。一切勉強したくない人はいれていいと思うが、その場合 eject しない、dist ディレクトリをそのまま使うこと前提。 style-loader/css-loader は外部CSSを読むときに設定する worker-plugin はなくてもいいけど、 worker もビルドしたいことが多いので、入れていることが多い html-webpack-plugin と webpack-dev-server 組み合わせると、他と組み合わせずに完結して動く。このHTMLを本番で使わずとも、デバッグで使ってることが多いの
現代フロントエンドに欠かせないwebpackとBabelを理解しよう
Transcript ݱϑϩϯτΤϯυʹ͔ܽͤͳ͍ XFCQBDLͱ#BCFMΛཧղ͠Α͏ʂ� CVJMEFSTDPO�UPLZP����� /BNF� ����4BLJUP�.VLBJ� 5XJUUFS ����!@@TBLJUP@@� $PNQBOZ� ����$ZCP[V�JOD� ����'SPOUFOE�&YQFSU�5FBN "CPVU�NF w#BCFMͷલʹݱࡏͷ+BWB4DSJQUʹ͍ͭͯ� w#BCFMʹ͍ͭͯ� wXFCQBDLʹ͍ͭͯ� wXFCQBDL #BCFMͰ෦࣮Λ͍ͬͯ͘ "HFOEB #BCFMͷલʹݱࡏͷ+BWB4DSJQUʹ͍ͭͯ &$."4DSJQUͱ5$�� w+BWB4DSJQUʹ&$."4DSJQUͱ͍͏ݴޠ༷͕͋Δ� w͜ͷݴޠ༷ΛܾΊ͍ͯΔҕһձ͕5$�� 5FDIOJDBM�$PNNJUUFF��� � w&4��
webpackで開発用/本番用の設定を分ける - Qiita
root/ ├ dist/ │ └ ビルド後のファイル ├ src/ │ ├ css │ └ js 等 ├ webpack.config.js └ package.json // pathとかpluginとか const path = require('path') module.exports = { entry: { // エントリポイント app: ... }, output: { // filenameとかpathとか path: ... , filename: ... }, module: { rules: [ // loaderの設定 { test: ... , loaders: [ ... ], } ] }, devServer: { // webpack-dev-server用の設定 }, plugins: [ // プラグイン設定 ] } "scripts": { "bu
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
複数のSassをwebpackでビルドして一つにまとめたい
複数のSassをwebpackでビルドして一つにまとめたいThu, 05 Apr 2018 12:08:22 GMTwebpack Sass Scss フロントエンドやってる人からしたら当たり前なのかもしれませんが、ちょっと詰まったので手順。なおwebpack4でやってます。 やりたいこと webpackを使ってSassをビルドする 対象のSassは複数あり一つにバンドルしたい webpack以外のビルドツールは使用しない という感じです。書くとややこしいのでbabelとかは今回は考慮しないものとします。また、webpack以外のビルドツールは使いません。Gulpとか。そんなに覚えられないですし。 ディレクトリ構成 こんな感じでやります。src配下の複数のscssをビルド&バンドルしてdist配下に出力します。
設定ファイル不要！webpack 4 でReactをビルドしてみた - Qiita
React #1 Advent Calendar 2017 2日目の記事です。 もう2018年になって一月経ちましたが空いていたので埋めます。 webpack 4 のbeta版が2018/01/25 JSTにプレリリースされました。 おそらく2月か3月中には正式リリースされるでしょう。 (追記 2/25) 正式リリースされました 正式版でもこの記事の内容に問題が無いことを確認しました。 https://github.com/webpack/webpack/releases/tag/v4.0.0 今回のwebpackは変更点が多く、速度改善もされているようです。 また設定ファイルも不要となり、webpack.config.js書くのが嫌な方には朗報です。 この記事では設定ファイル無しでビルドするところまで簡単な例を用いて紹介いたします。 webpack 4について 今回はReactのビルドに
webpack 4 の optimization.splitChunks の使い方、使い所 〜廃止された CommonsChunkPlugin から移行する〜 - Qiita
webpack 4 の optimization.splitChunks の使い方、使い所 〜廃止された CommonsChunkPlugin から移行する〜JavaScriptwebpack はじめに 先日リリースされたwebpack 4でCommonsChunkPluginは廃止されました（CommonsChunkPluginの解説はこちら）。 その代わりとした追加されたoptimization.splitChunksの基本的な使い方、使い所に関しての記事です。 optimization.splitChunksを利用すればサイトパフォーマンスの改善（詳細は後述）ができるため、利用する機会が多い設定（機能）です。 解説に利用しているコードの最終形態はGitHub上にあります。 hira777/webpack-split-chunks-example 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��Ϗϧυ
BabelでES6で書いて、webpackでビルドして、mochaでテスト書いて、power-assertでassertの出力を見やすくして、karmaで複数ブラウザのテストを自動化して、カバレッジを出力するようにした - UUUMエンジニアブログ
おはこんばんちは!! 尾藤 a.k.a. BTOです。 UUUMでは業務の効率改善に kintone を導入しようとしているのですが、kintone の機能を拡張するには Javascript でプログラムを書く必要があります。 そこで、Javascript の開発環境を構築したので、何をやったのかをまとめてみました。 具体的には、 BabelでES6で書いて、webpackでビルドして、mochaでテスト書いて、power-assertでassertの出力を見やすくして、karmaで複数ブラウザのテストを自動化して、カバレッジを出力するようにしました。 お前は何を言っているんだと思うかもしれませんが、僕も何を言っているのかわかりません。 Babel 言わずと知れた ES6 用のトランスパイルツールです。 ご存知の方も多いと思うので、詳細は割愛しますね。 Babel の導入は npm でイ
フロントエンドの未来の話 - Qiita
前置き 会社の勉強会資料になります（6/16発表） フロントエンドの未来の話というか、色々なライブラリの紹介です ほとんどが5月上旬くらいに書いた資料なので、 それ以降に変化があったライブラリについては、追記という形で資料の中にコメント入れてます モジュールバンドラーの未来 モジュールバンドラーとは簡単に言うと、JavaScriptのビルドツールのことです 最近はフロントエンドでも、機能ごと・共通化などの理由によって、JSファイルを分けてコーディングをするので、 最終的にそれをまとめて、1個のJSにする必要がある その時に使われるのが、モジュールバンドラー 有名どころのツール みんな大好きwebpack 後は、rollupとかbrowserifyとか ですが、、 これからの時代は fuse-box fuse-boxとは webpackと同様なモジュールバンドラー 設定ファイルがシンプル w
configuration
webpack v1 is deprecated. We encourage all developers to upgrade to webpack 2. webpack is fed a configuration object. Depending on your usage of webpack there are two ways to pass this configuration object: → CLI If you use the CLI it will read a file webpack.config.js (or the file passed by the --config option). This file should export the configuration object: module.exports = { // configuration
【意訳】Webpackの混乱ポイント - Qiita
この記事はWebpack — The Confusing Partsを、筆者の許諾を得て意訳しています。 何か誤りがありましたら、ご指摘いただけると幸いです。 (以下、訳) ReactとReduxで作られたアプリケーションにとって、Webpackは最先端を行くモジュールバンドラです。Angluar2やその他のフレームワークを使っている人々は、たいへんWebpackのお世話になっていることでしょう。 私が初めてWebpackの設定ファイルを見た時、それはさながら宇宙人のようで非常にわかりづらく見えました。しばらく試しているうちに、今では次のように考えるようになりました。Webpackは単に独特のシンタックスと新しい哲学を持っており、それがとっつきにくさの原因になっているのだと。偶発的とはいえ、これらの哲学は、Webpackの人気を押し上げた原因の１つでもあります。 Webpackのとっつきに
webpack2でTree Shaking以外に何ができるようになったのかメモ - dackdive's blog
メモ。 webpack 2 正式リリース（バージョンは 2.2）だとか Tree Shaking という機能がいいらしい とかは目にしていたけど 結局 v1 -> v2 とメジャーバージョンが上がって Tree Shaking 以外に何が変わったの？というのがよくわからなかったので調べてみた。 なお、Tree Shaking については最後に記載している。 参考にしたサイト 「webpack 2 whats new」とかでググって、見つけられたのはここ。 What's new in webpack 2 · GitHub （WIP て書いていて最新の情報かどうかわからないけど）ここに書いてある内容で気になったものをピックアップする。 なお、Getting Started with webpack 2 という記事は残念ながら v1 → v2 における新機能などについては言及されていなかった。
普通のRailsアプリケーションにReactを導入する | DevelopersIO
次にreactをインストールします。 $ npm install -S react react-dom package.jsonは以下のようになりました。 { (中略) "devDependencies": { "babel-core": "^6.21.0", "babel-loader": "^6.2.10", "babel-preset-es2015": "^6.18.0", "babel-preset-react": "^6.16.0", "webpack": "^1.14.0" }, "dependencies": { "react": "^15.4.2", "react-dom": "^15.4.2", }, (中略) } ビルド設定 webpackでビルドできるように設定ファイルを作ります。 clientディレクトリにwebpack.config.jsファイルを作成し以下の内容
Demystifying webpack2 tree shaking - from scratch
webpack2 に最近移行しました。 その時の知見とせっかくなので tree shaking が実際に中でやってることを追ってみたので紹介。 webpack2 移行時の注意 基本的にはほぼここに書いてあるとおり。 Migrating from v1 to v2 かいつまんで説明すると、configファイルの書き方がガラッと変わって、 module.loaders が module.rules になったり、 resolve.root がなくなって resolve.modules に変わったり。この辺の書き換えは割りとすんなりいくはず。 辛いのはpostcss周りのオプションの渡し方辺り。これまではconfigのrootにpostcssプロパティを用意してそこに記述できたが、その記述はできなくなり、 webpack.LoaderOptionsPlugin 経由で渡すか postcss.con
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webpack · Issue #1529 · request/request
Introducing React Loadable