GitHub - originjs/vite-plugin-federation: Module Federation for vite & rollupYou signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
おそらく誰も使わない @babel/parser 7.14 新機能 TypeScript プラグイン の dts オプションについて
const { parser } = require("@babel/parser"); const code = `const foo: string = "foo"`; parse(code); // 構文エラー、型注釈の構文をパースできない parse(code, { plugins: ["typescript"] }); // typescript プラグインを有効にしているため型注釈の構文をパースできる 現在実装されているプラグインは https://babeljs.io/docs/en/babel-parser#plugins で確認できます。 プラグインという呼ばれ方をしていますが、サードパーティがプラグインを実装することはできません。これは、@babel/parserの方針として決まっており、今後もそのような対応をすることはないでしょう。 なので、実際はプラグインというより
"CSS Module" をめぐる混乱
"CSS Module" が指すもの ２つある 従来のコミュニティベースのもの これのこと。そしてその実装。 現状フロントエンドエンジニアが指すものはだいたいこれ。 Web 標準になりつつあるもの Import Assertions で実現しそうな Synthetic Module としての CSS Module 標準になりそうな所まで来ている。 この２つに関して話がごちゃごちゃになるんで整理する。 コミュニティベースの CSS Module https://github.com/css-modules/css-modules コレ自体は概念的なもの。 その実装 として Webpack の CSS Loader などがある。 なので、一般的に「CSS Module か Styled Component か」みたいな議論ででてくるものの場合、 Webpack の CSS Loader を入れ
Webpack 5 Headache
Webpack no longer automatically polyfills Node.js APIs. This is a huge breaking change and will inconvenience both users and package maintainers. Most packages on npm are mainly made with Node.js in mind. However, thanks to automatic polyfilling, most of them have for years worked fine in the browser too. The problem is that Webpack created convenience by automatically polyfilling and then now sud
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の次のバージョンで入る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.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を本番で使わずとも、デバッグで使ってることが多いの
Snowpack vs. webpack: A build tool comparison - LogRocket Blog
LogRocket’s Galileo AI watches every session, surfacing impactful user struggle and key behavior patterns. Editor’s note: This post was updated on 14 March 2022 to include information relevant to Snowpack v3 and webpack v5. Few tools have been as central and important to the JavaScript ecosystem as webpack. Launched in 2012, the JavaScript module bundler has been a cornerstone of modern JavaScript
Snowpack で実現する未来のフロントエンド開発 - Qiita
Web アプリケーション開発において TypeScript で型付けをして、 React, Vue, Angular などのフレームワークでビューを作り、 Webpack でバンドルする、という構成が当たり前のようになってから久しいですね。 フロントエンドアプリケーションの設計は洗練され、我々はまあまあ安全かつ開発しやすい環境でアプリケーションを作れるようになりました。 ところでみなさんはその開発環境の構築にどれだけのコストをかけていますか？ 新規プロダクトを作るたびに最適な Webpack の設定ファイルを作るために苦心して、気づけばその肉体にゴリゴリのウェブパッ筋を宿していませんか？ 賢い人はスターターボイラープレート的なものを自分で用意しているかもしれません。 だけどそれも頻繁な依存ライブラリのアップデートに合わせるために常にメンテナンスが必要となります。カビの生えないボイラープレー
Solve Module Import Aliasing for Webpack, Jest, and VSCode
Scale any project past a certain point of complexity, and you’ll find yourself traversing up and down your file system in your components trying to resolve your imports. Here’s how to configure aliasing to make things easier. If you’re not familiar with the concept of aliasing, it turns a file like this: import React from 'react' import { connect } from 'react-redux' import { someConstant } from '
webpack 4の入門連載のお知らせ | ClockMaker Blog
webpackの入門記事をICS MEDIAで書いているのですが、連載の全部を最新版のwebpack 4に更新しました。webpack 3から4へのアップデートで、webpack-cliが必要になったことと、mode引数で開発用/本番用に切り替えられるようになったことがポイントです。 導入編 最新版で学ぶwebpack入門 – ICS MEDIA ECMAScript 2015+編 webpack + BabelでES2017環境の構築 – ICS MEDIA webpack + TypeScriptの環境構築 – ICS MEDIA BabelやTypeScriptのゼロコンフィグのビルド環境構築 – Qiita スタイルシート編 スタイルシート(CSSやSass)を取り込む方法- ICS MEDIA Bootstrapをバンドルする方法 – ICS MEDIA その他 Gulpで始める
webpack-dev-server の後継らしい webpack-serve について調べた - 備忘録β版
追記（2018-09-19） webpack-serve が DEPRECATED となり webpack-dev-server の利用が推奨されています。 README には DEPRECATED. Please use webpack-dev-server (he is in support and update mode again). Feel free to create a issue if some features are not implemented in webpack-dev-server. との記載があるので、webpack-dev-server の開発が再開したようです。 DEPRECATED となった理由についても記載されているので、興味のある方は GitHub のリポジトリを御覧ください。 webpack-serve/README.md at edaf28c
最新版で学ぶwebpack 5入門 - スタイルシート(CSS/Sass)を取り込む方法 - ICS MEDIA
ウェブのフロントエンドエンジニア開発で人気を集めるモジュールバンドラーのwebpack（ウェブパック）。webpackにはJavaScriptファイルのバンドルだけではなく、スタイルシート（CSSやSass）のバンドルもできます。ICS MEDIAの記事「最新版で学ぶwebpack入門」では、webpackの基本的な使い方を解説しましたが、この記事ではスタイルシートに焦点をあてて解説します。 ※webpackを利用するには事前にNode.jsをインストールしておいてください。この記事では2021年5月現在最新のNode.js v14、npm 7と、webpack 5をもとに解説しています。 この記事で説明していること CSSをバンドルする利点 CSSのバンドル方法 Sassのバンドル方法 Sass内の画像もバンドルする方法 容量の閾値で画像のバンドルを制御する方法 PostCSS(Auto
Cacooの次期エディターでWebpackのビルドを6倍早くした話-Wepackビルドパフォーマンス改善ガイド | 株式会社ヌーラボ(Nulab inc.)
こんにちは。みなさまがCacooで図の編集をするエディターを開発している、Cacooチームの国広です。Cacooチームでは、エディター部分のビルドに Webpack を使用しています。ビルド対象はTypeScript、JavaScript、PostCSS、Riot（のtagファイル）、画像等です。 そのままビルドするには少し我慢ならない程度に待たされるようになったので、Webpackの公式ドキュメントを見ながら少しだけビルドのパフォーマンスの改善を行いました。その結果、ビルドにかかる時間は当初のシンプルな構成に比べて6倍早くなりました。 対象読者 Webpackを使用している人 ビルドのパフォーマンスを改善したい人 Webpackのビルドパフォーマンス改善 ビルドとは何か 現在のCacooのエディターでは、いくつかのJavaScriptファイルをHTMLに読み込ませることでアプリを起動させ
webpack 3 リリース内容まとめ - dackdive's blog
2系に上げるかどうかを悩んでいる間に 3.0.0 がリリースされてしまった。 を参考にアップデート内容をメモ。 概要、v2 からのマイグレーション 大きな feature は Scope Hoisting と Magic Comment ぐらい。 v2 からの移行も特別な作業は必要なく、たいていはバージョン上げるだけで機能するとのこと。 それでもメジャーバージョンを上げたのは内部的に breaking changes があって、いくつかのプラグインには影響しそうだったから、とのこと。 ということはプラグインが動くかどうか一応確認した方がいい...？ Scope Hoisting 目玉機能その１。 これまでの webpack ではモジュールを１つ１つクロージャでラップしており、それによりそれぞれのモジュールの独立性が保たれていた（関数名の衝突とか）ものの、ブラウザでの実行速度が重くなる原因に
🍾🚀 webpack 3: Official Release!! 🚀🍾
After we released webpack v2, we made some promises to the community. We promised that we would deliver the features you voted for. Moreover, we promised to deliver them in a faster, more stable release cycle. No more year-long betas, no breaking changes between release candidates. We promised to do you right by you, the community that makes webpack thrive. The webpack team is proud to announce th
webpackとRollup：似て非なるもの | POSTD
先日、Facebookは 膨大なプルリクエスト をReactにマージして、既存のビルドシステムを Rollup ベースのシステムに移行しました。 その結果 、 何人もの人々 から「なぜwebpackではなくRollupを選んだのか」という質問が寄せられました。 これは、もっともな疑問でしょう。 webpack は、近年JavaScriptコミュニティで最も評価されているツールの1つです。毎月のダウンロード数は何百万件にもおよび、何万個ものウェブサイトやアプリケーションに使用されています。巨大なエコシステムがあり、コントリビュータも多くいます。さらにオープンソースプロジェクトとしては珍しく、 かなりの寄付金 が集まっています。 それに比べるとRollupは小規模です。しかしReact以外にも、Vue、Ember、Preact、D3、Three.js、Momentなど、数々の有名なライブラリに
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - merkle-open/webpack-config-plugins: Provide best practices for webpack 4 loader configurations
GitHub - neutrinojs/webpack-chain: A chaining API to generate and simplify the modification of Webpack configurations.
GitHub - mrdziuban/scalajs-loader: Scala.js webpack loader
