Native CSS support · Issue #14893 · webpack/webpack
Current State: opt-in via experiments.css: true Explainer (not everything is implemented yet): experiments.css: true enables the native css support in webpack This will be enabled by default in webpack 6 There will be multiple modes depending on how you reference CSS A: import "./style.css": Attaches the stylesheet to the document as side effect of importing. @import and url() are resolved. B: imp
webpack or esbuild: Why not both? - LogRocket Blog
John Reilly MacGyver turned Dev 🌻❤️ TypeScript / ts-loader / fork-ts-checker-webpack-plugin / DefinitelyTyped: The Movie Builds can be made faster using tools like esbuild. However, if you’re invested in webpack but would still like to take advantage of speedier builds, there is a way. In this tutorial, we’ll show you how to use esbuild alongside webpack with esbuild-loader. The world of web deve
1枚岩なMPAプロダクトでWebpackのマルチエントリーをさらにグルーピングしてビルドする - メドピア開発者ブログ
Noita世界の理不尽をこの身をもって体験した末にバウンドルミナスで全てを切り刻んでクリアしました、フロントエンドグループの小宮山です。 以前からこれできたらいいのになぁと思いながら無理そうと諦めていた掲題の事柄を実現できた嬉しさの勢いのままに書き始めています。 状況 1枚岩なMPAプロダクトがどういうものかというと、 ルーティングをRails側で管理するMPA（複数エントリーポイント） 異なる種別のユーザー向けシステムが複数内包されている という構成です。 ルーティングについては要するにSPAではなく、ページ毎のhtmlファイルとmain.jsがあるということです。 異なる種別というのは、要するにユーザー向け画面と管理者向け画面が分かれているような状況です。場合によっては3種類、4種類以上の異なるシステムが内包されたりもします。BtoBtoCなサービスだったりする場合ですね。 課題感 こ
Using Webpacker in Your Ruby on Rails Application — a Deep Dive | AppSignal Blog
ruby Using Webpacker in Your Ruby on Rails Application — a Deep Dive At the beginning of the internet age, websites were much simpler and not very interactive. With the advancement of technology, devices, and programming languages, they became more complex and consisted of several files, including assets like images and CSS stylesheets. The more interactive your website is, the more JavaScript cod
2020 年の瀬の JS ビルド＆バンドルツールの検討
今年から ZOZO テクノロジーズの Web エンジニアになりました。@takewell です。 もう年の瀬になりました。一年は早いですがブラウザの寿命は存外長いです。 来年はきっと Internet Explorer のサポートブラウザから外すことができるかもしれない。来年はわざわざツールを介さずとも ECMAScript 202X が動くブラウザが世界中のみなさんに使われるようになるかもしれない。そう願ってなりませんが、現実はそうではありません。 こうした課題を少しでもマシにするために webpack (シェア 76%)を代表とする ESNext (ECMAScript Next Generation) なコードをレガシーブラウザにビルドしたり、コードを単一ファイルにバンドルしたりするツールが数多く存在します。(以降、ビルド&バンドルなどの事前変換処理をプリプロセスと表記します。) こ
webpack v5がリリースされたので、現状をまとめてみた
10/10 に webpack v5 がリリースされたので、今回は変更点や気をつけたい点をまとめてみました。 プロダクションで使うのはまだ早いかも(2020/10/27時点) webpack v5 のリリースは行われたが、まだバグが多くあり、webpack で使用する loader や plugin は対応が追いついていません。 パッとwebpack 5 関連の Issueを眺めるだけでも、まだ多くの問題があることがわかります。 なので、webpack v5 を使用するのは安全にいきたければ 1,2 ヶ月ほど待ってもよいと思います。 いまはこのバグ対応によりすでに webpack のバージョンは v5.3.0 になっています。 試して見たい方は v4 から v5 へのマイグレーションガイドを参考にするとよいです。 周辺ツールの現状 webpackを使用するにあたって特に重要な webpac
webpack 5にアップデート - Qiita
webpackを ^4.44.0 -> ^5.0.4にマイグレーションしましたので、 その際の作業の覚書です。 migrationの仕方 https://webpack.js.org/migrate/5/ 基本的に上記の公式を読みつつ、エラーが出たらその都度エラー文を元に対応していく形で進めました。 元々のwebpackの設定にもよって対応も変わってくるかと思いますが、 主要な変更箇所と実際に私が変更した箇所を紹介しておきます。 loaderとuseの厳格化 【参考】 https://blog.hiroppy.me/entry/webpack5 rules.loaderとrules.useの使用ルールが厳格になったことで、 環境によってはエラーとなる可能性があります。 optionsを使用しない場合は use、 optionsを使用する場合はloaderとなるように設定を見直しましょう。
RailsでVue.jsのSFC（単一ファイルコンポーネント）を使うためにWebpackを入れてみた - SMARTCAMP Engineer Blog
こんにちは。エンジニアの笹原です。 スマートキャンプではフロントエンドの開発にVue.jsを取り入れています。 Vue.jsで開発するうえで、SFC（単一ファイルコンポーネント）を利用できることは良さの一つだと思います。 今回は、Sprocketsでアセット管理を行っているRailsプロジェクトに、Webpackを入れることでSFCを使えるようにする方法を紹介します。 SFC（単一ファイルコンポーネント）とは SFCの良さ SFCの実装方法 Sprocketsを利用しているRailsプロジェクトにSFCを導入する 課題と解決方法 完成予想プロジェクト構成 導入手順①: 必要なnpmモジュールのインストール 導入手順②: Webpackの設定 導入手順③: ビルドの実行 終わりに SFC（単一ファイルコンポーネント）とは Single File Componentの略で、テンプレート、ロジッ
最新版TypeScript+webpack 5の環境構築まとめ(React, Three.jsのサンプル付き) - ICS MEDIA
TypeScriptはMicrosoftが開発するプログラミング言語です。JavaScriptのスーパーセットという位置づけで、静的型付けなど強力な言語機能を備えています。TypeScriptは高度なウェブアプリケーションの開発で使われることが多く、Google社内の標準言語として2017年に採用されるなど、注目が高まっています（参考記事『Google社内の標準言語としてTypeScriptが承認される － Publickey』）。 ▲TypeScriptの公式サイト TypeScriptはコンパイラによってJavaScriptのコードが得られますが、TypeScriptのコンパイラにはECMAScript Modules（ES Modules = importやexport文のこと）をまとめる機能が提供されていません。そのため、ES ModulesのJSファイルをまとめるモジュールバンド
Getting the most out of Webpack(er), Part 1
If you’ve done any front-end work over the past couple years, Webpack likely needs no introduction. It’s the industry-standard module bundler and build tool for JavaScript codebases of all sizes. In a Rails project, Webpack can replace a portion of the functionality that has traditionally been handled by the Asset Pipeline, and the Rails community has enthusiastically embraced the shift. Rails’s f
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
module bundlerの作り方(準備編) - hiroppy's site
今回は中身がどう動いているかを解説したいと思います。 最初のこの記事では、最低限の実装を説明していくことにします。 webpack のアルゴリズムの仕組みはこちらを読んでください。 必要なステップ 必要なステップは以下の 3 つです。 エントリーポイントからのすべてのモジュールを走査し、requireを解決後にユニーク id を付与していく コード内のモジュールパス(requireの引数(e.g. ./module.js))を id へ置換する runtime のコードテンプレートの作成 IIFE(即時関数)箇所とそれに付随する引数の module 群 この実装されあれば、動くコードはできます。(2 つめは optional でもいいけど後からつらくなる) モジュール解決 今回は説明しやすいように関数を 2 つに分けています。 すべてのモジュールの把握と ID 作成 コード内の requi
俺の 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を本番で使わずとも、デバッグで使ってることが多いの
How to Create a Production-Ready Webpack 4 Config From Scratch
Webpack is a powerful bundler and dependency manager used by many enterprise-level companies as tooling for their front-end code. Typically, webpack is configured when a project is first set up, and small tweaks are then made to the config files as needed from time to time. Because of this, many developers don’t have a lot of experience working with webpack. In this hands-on tutorial, we’ll go thr
現代フロントエンドに欠かせない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��
Simpacker: Rails と webpack をもっとシンプルにインテグレーションしたいのです - クックパッド開発者ブログ
技術部の外村（@hokaccha）です。Rails で webpack を使うためのシンプルな gem を作ったのでそれについて紹介します。 Webpacker Rails で webpack を利用した Web フロントエンドの環境を作る場合、最近では Webpacker が選択されることが多いでしょう。Rails 6 からは Webpacker が標準になることもあり、この流れはますます加速すると思われます。 私自身もこれまでいくつかのプロジェクトで Webpacker を利用してきました。Webpacker は webpack を Rails から簡単に利用でき非常に便利なのですが、使っているうちにいくつか不満な点がでてきました。 一番大きい問題として Webpacker が @rails/webpacker という npm パッケージに webpack の設定を隠蔽し、Webpac
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Using web fonts with SASS and Webpack
社内でフロントエンドのパフォーマンスチューニングコンテストを開催した