Rust + Webpack = Rspack の紹介
概要 本記事では、JavaScript モジュールバンドラの一種である、 Rspack について、公式ドキュメントからわかることを要約し、自分なりの所感を付け加えて紹介します。 https://www.rspack.dev/misc/branding.html ※ 本記事は、Webpack に関する最低限の知識を前提としています。 ※ 本記事は、2023/03/12 時点の情報であり、古い内容が残っている場合があります TL;DR; Rspack は Webpack との互換性とパフォーマンスを両立したモジュールバンドラ Webpack より5~10倍高速 Webpack と設定ファイルや loader, plugin に充分な互換性を持つ Webpack の一般的な設定パターンがビルトインで用意されており、シンプルに使える 現在はアーリーステージで、Vue.js のサポートもこれからとい
似て非なるCSS Module Scripts
昨年くらいからNext.jsの影響もあり、CSS Modulesの人気がまた高まってるように感じますね。State of CSSのCSS-in-JSランキングでも満足度、興味、利用率、認知度などどれをとっても1~2位に入ってました。 CSS Moduels自体はReactのJSXなどと同様、JSを拡張し利用できる技術です。しかし、このアプローチを有用と思った人たちが「JSやブラウザの仕様としてCSSをimportできたらいいのにね」と思いChromeに実装されつつあるのが「CSS Module Scripts」です。 仕様になったならいい話じゃん！で終わればいいんですが、なんとこの「CSS Module Scripts」、「CSS Modules」と仕様が違うんですね。現状まだwebpackでは「CSS Module Scripts」は未サポートですが、今後サポートするつもりっぽいのでこの
人気のJavaScriptバンドルツール「webpack」の開発はなぜ終わり、後継として「Turbopack」の開発が始まったのか。開発者がその理由を語る
人気のJavaScriptバンドルツール「webpack」の開発はなぜ終わり、後継として「Turbopack」の開発が始まったのか。開発者がその理由を語る 複数のJavaScriptやTypeScriptの依存関係などを解決し、コードやフォント、画像などのリソースなどをまとめるバンドルツール（あるいはモジュールバンドラやビルドツールなどとも呼ばれます）は、多数のライブラリやコンポーネントなどを用いてチームで開発するWebアプリケーションの開発には欠かせないツールとなっています。 そのバンドルツールの代表がwebpackです。約4万人のITエンジニアによるアンケート結果が示された「State of JavaScript 2022」でもwebpackはGulpやViteなどを抑えて最も人気のあるバンドルツールとなっています。 参考：「State of JavaScript 2022」公開。利用
Webpackのresolve.aliasとVSCodeのjsconfig.jsonを使ってimportを快適にする - Qiita
import { someConstant } from './../../config/constants' import MyComponent from './../../../components/MyComponent' import { myActionCreator } from './../../../ducks/someReducer' いちいちターゲットのファイルとインポート先のファイルの相対パスを確認する必要があってめちゃくちゃ面倒ですよね。そこで今回はwebpackのresolve.aliasとjsconfig.jsonを使って↑のコードを import { someConstant } from '@config/constants' import MyComponent from '@components/MyComponent' import { myActi
TypeScirptのプロジェクトにエイリアスを設定して絶対パスでimportするメモ
TypeScriptのプロジェクトを作る度に設定すると思うのでメモ。 前提 Link to heading Webpackでプロジェクトを管理している Linterはeslintを使用している tsconfig.jsonの設定 Link to heading tsconfig.jsonのcompilerOptionsを設定してsrc以下のディレクトリに対してエイリアスを貼る。 エイリアスになる文字は何でも良いが、私はnpm経由でimportするmoduleと混同しないように @/ を使用している。 { "compilerOptions": { ~~~ "baseUrl": "./", "paths": { "@/*": ["src/*"] }, ~~~ } } import { Configuration } from 'webpack'; const config: Configurat
babel-loader で TypeScript をビルドする - 30歳からのプログラミング
最小構成のサンプルから始めて、React のビルドや Babel プラグインの利用も出来るようにしていく。 当初はts-loaderとbabel-loaderを組み合わせてビルドする予定だったのだが、Babel プラグインが動かなかったので断念した。この資料の内容に沿って設定してもダメだった。 そのため、babel-loaderのみでビルドすることにした。 使用しているライブラリのバージョン。 webpack@4.30.0 webpack-cli@3.3.2 babel-loader@8.0.5 @babel/core@7.4.4 @babel/preset-env@7.4.4 @babel/preset-typescript@7.3.3 typescript@3.4.5 react@16.8.6 react-dom@16.8.6 @types/react@16.8.17 @types/r
【webpack5】ts-loader + babel-loader を併用する【TypeScript】 - Qiita
ts-loaderとbabel-loaderを組み合わせる babel-loaderだけで、TypeScriptはトランスパイルが可能です。 具体的には @babel/preset-typescript を使います。 もしBabelが必要な状況なのであれば、ts-loaderは必要ありません。 逆に、Babelが不要なのであればts-loaderが必要です。 しかし、 レガシーブラウザ向けにBabelを通したもの モダンブラウザ向けにTSをトランスパイルしただけのもの の両方が必要な場合は、自分はts-loaderとbabel-loaderを組み合わせるようにしています。 私の環境ではtsconfig.jsonはいずれの場合も次のようなイメージでした。 project │ .babelrc │ package-lock.json │ package.json │ tsconfig.json
グーグルが開発した画像圧縮ツールSquoosh。フロント開発向けにNode.jsで扱う方法まとめ - ICS MEDIA
グーグルが開発した画像圧縮ツールSquoosh。フロント開発向けにNode.jsで扱う方法まとめ 『Squooshスクーシュ』というGoogleが開発した画像圧縮ウェブアプリがあります。ブラウザで変換結果を見ながら圧縮設定ができるので、画像圧縮の難しい知識を持たない方でも使いやすいことが特徴です。圧縮だけでなく、WebPなどの各種フォーマットへの変換・リサイズといったこともできる便利ツールです。 このSquooshをNode.jsで扱える『libSquoosh』が存在します。libSquooshは大量の画像を一括で圧縮、WebPへの変換、リサイズなどの処理をこれ1つで完結できるのがポイントです。昨今のウェブはページの読み込み時間が重視される傾向があります。画像のファイルサイズは読み込み時間に大きく影響するため、画像圧縮は重要なテクニックです。libSquooshをwebpack・Viteと
[Angular] Angular 12 (Webpack 5)アップデート記念ビルドエラー対処メモ - Qiita
Angular 12から、Webpackが5になりました。 そのせいではないと思うのですが、ビルド時にいくつかエラーになりました。 これはその対処メモです。 環境 Angular 12.0.4 pdfjs 2.7.570 pdfAnnotate 1.0.14 Node 14.17.0 Warning: Module not found: Error: Can't resolve 'crypto' 起こったこと ng serve時にこのようなメッセージが出力されました。 ./node_modules/crypto-js/core.js:43:22-39 - Warning: Module not found: Error: Can't resolve 'crypto' in '~/node_modules/crypto-js' BREAKING CHANGE: webpack < 5 use
![[Angular] Angular 12 (Webpack 5)アップデート記念ビルドエラー対処メモ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/21834a5c79678183248ae1cdc68decb4538fb787/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCQW5ndWxhciU1RCUyMEFuZ3VsYXIlMjAxMiUyMCUyOFdlYnBhY2slMjA1JTI5JUUzJTgyJUEyJUUzJTgzJTgzJUUzJTgzJTk3JUUzJTgzJTg3JUUzJTgzJUJDJUUzJTgzJTg4JUU4JUE4JTk4JUU1JUJGJUI1JUUzJTgzJTkzJUUzJTgzJUFCJUUzJTgzJTg5JUUzJTgyJUE4JUUzJTgzJUE5JUUzJTgzJUJDJUU1JUFGJUJFJUU1JTg3JUE2JUUzJTgzJUExJUUzJTgzJUEyJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0wYmVjOGIxMzg3ODRkMDc1NzMzMzA4NmJkNDFhMzA2MQ%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBzZW5nb2t1JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1lYWNiYmI4Yzk1MmVkYjkwODY3MTMxMTVkMzMzNGY1Nw%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D9aaa6a8ec1e9f88e48413ddc16e8fbb0)
Babelの出力から"use strict"を除去したい - Qiita
BabelでJavaScriptをコンパイルするとデフォルトで"use strict";が付きます。 ソース・コードがstrictに書かれたものなら良いのですが、いろいろ事情があってstrictではない場合もあり、"use strict";を付けたくないこともあります。 以下の方法で"use strict";なしの出力ができました（Babel 7.5で確認）。 sourceTypeオプションを使う sourceTypeオプションに"script"を指定すると"use strict";が出力されなくなります。このオプションのデフォルトは"module"なので、デフォルトのままだと出力は自動的にstrictモードになります。
webpackで複数のエントリーとアウトプットの設定で引っかかったこと - Qiita
const path = require('path'); module.exports = { mode: 'development', target: 'electron-main', entry: './src/ts/index.ts', output: { path: path.join(__dirname, "dist"), filename: "main.js" }, module: { rules: [{ test: /\.ts$/, use: 'ts-loader' }] }, resolve: { modules: [ "node_modules", ], extensions: [ '.ts', '.js' ] }, node: { __dirname: false, __filename: false }, }; module.exports = { mode: 'd
webpackの設定ファイルを環境ごとに分けるには - Qiita
webpackの設定を開発環境や本番環境ごとで分けて設定ファイルを作る方法について、作成の際に参考資料が少なかったので、自分で行った方法を共有します。誰かのお役に立てば幸いです。 webpackはひとことで言えば、複数のjsファイルやcssファイルを1つのファイルにまとめてくれるビルドツールです。 設定ファイルを分ける方法 実際にどのように設定ファイルを分けるのか方法を説明していきます。 1つの設定ファイルでは 通常では1つの設定ファイルwebpack.config.jsを作成すると思いますが、 環境ごとに異なる設定をしたい場合１つのファイルだと以下のように環境で条件分岐が必要になってきます。 var destPath = 'dist/'; if (process.env.NODE_ENV === 'production') { destPath = 'hoge/'; } const co
最新版で学ぶwebpack 5入門 - Babel 7でES2023環境の構築(React, Vue, Three.js, jQueryのサンプル付き) - ICS MEDIA
最新版で学ぶwebpack 5入門 Babel 7でES2023環境の構築 (React, Vue, Three.js, jQueryのサンプル付き) ECMAScript 2015(略：ES2015)以上の言語仕様でJavaScriptを書くことが、昨今のウェブのフロントエンドエンジニアの基本テクニックです。しかし、ECMAScript 2015以上の仕様のJavaScriptで記述すると、Internet Explorer 11など古いブラウザでは動作しないこともあります。そこでBabelなどのトランスパイラと呼ばれるツールを使って、ES2015〜ES2023の仕様で記述したJavaScriptファイルを互換性のあるECMAScript 5に変換します。 トランスパイラとして一番有名なのが「Babel」というツールです。ただ、BabelにはECMAScript Modules（impo
それでも私がTailwind CSSではなく、CSS Modulesを推す理由 - Qiita
*2021 6/11追記 『でもクラス名考えるのめんどくさい』問題についての私の見解を大幅加筆しました。 *本記事はピュアなCSSについてのある程度の知識があり、Tailwind CSSの採用について考えている層を対象読者としています。ピュアCSSの知識が乏しく、最適なCSSフレームワークを探している読者は対象としていません。 色々書き比べた結果Tailwind CSSにしたという話 こちらの記事がバズっていた(6/9現在 over 200likes)為、読ませて頂きました。 これまで主観的な印象と薄い議論で賛否が分かれていたTailwind CSSについてこれまでのcssの技術の変遷を踏まえて技術的にかなり踏み込まれた考察の上で選定の理由が書かれており、Tailwind CSSアンチ派の私にとっても非常に勉強になる記事でありました。リスペクト。 その上で、こちらの記事では私が『それでもC
webpack で JavaScript と CSS を minify する単純な例 | knooto
JavaScript と CSS を minify する手順 1. 作業フォルダ上で npm init -y コマンドを実行して package.json を生成します。 2. 作業フォルダ上で npm install --save-dev webpack webpack-cli css-loader mini-css-extract-plugin optimize-css-assets-webpack-plugin コマンドを実行して必要なライブラリを導入します。 css-loader は JavaScript 上で CSS を require や import できるようにするものです。 mini-css-extract-plugin は CSS の内容を JavaScript とは別ファイルにビルドするものです。 optimize-css-assets-webpack-plugin
Web制作向けwebpack - Qiita
JavaScriptのBundle、TypeScriptのBundleとTranspile、CSSやSCSSのBundleとベンダープレフィックスの追加、画像の圧縮、Pugのコンパイル、JavaScriptとCSSのLint、ソースマップの出力などを行います。 ファイル構成 website ├ src │ ├ pug │ │ ├ index.pug │ │ ├ sub.pug │ │ ├ _include │ │ └ _included.pug │ │ │ ├ img │ │ ├ img.jpg │ │ ├ img.png │ │ ├ img.svg │ │ └ img.gif │ │ │ ├ css │ │ ├ style.css │ │ └ sub.css │ │ │ ├ scss │ │ ├ style.scss │ │ └ sub.scss │ │ │ ├ ts │ │ └ sub
一から作るモダンフロントエンド環境【Webpack & Babel編】 - Qiita
どうも、ディベロッパーの羽田です。 最近業務でモダンJSフレームワークやwebpackを使うことが多くなってきたので開発環境の構築手順をまとめてみます。 概要 ウェブ開発のデファクトスタンダードとなりつつあるWebpackとモダンJSフレームワークを使用したフロント開発環境構築の手順をまとめました。 自分用のメモも兼ねてるので雑な部分や端折ったりしてる部分があります。 対象者 ある程度JSの知識がある人 モダンJSフレームワークに興味がある人 Webpackを使用した開発環境構築に興味ある人 章節 【基本構築編】 【Webpack & Babel編】←イマココ 【css & sass編】(執筆中) 【React & React Router編】(執筆中) 【Redux編】(執筆中) Webpack周辺を構築 パッケージ名 説明
ブラウザとnode.jsに両対応したライブラリを作りたいときのWebpackレシピ集 - Qiita
概要 Webpackを使ってNode.jsとブラウザに両対応したライブラリを作るときのレシピ集です いろいろなレシピを見てWebpackによるライブラリ生成の挙動を理解することを目的としています ブラウザにもNode.jsにも両対応したライブラリを作りたい ブラウザとNode.jsに両対応したいとおもったとき、 両方同時に対応した1つのバンドルjsを作る【統合型】と、 ブラウザ用、Node.js用と別々にライブラリを出し分ける【出し分け型】の2パターンある。 本稿では主に【統合型】について説明する ライブラリのビルドに関するWebpack設定項目 レシピ集に行く前に、 まず、ライブラリのビルドに関する設定項目をざっくりみていく。 webpack.config.js 以下のような典型的なwebpack.config.jsの中でoutput以下の項目でライブラリ生成のためのパラメータを決める。
最新版で学ぶwebpack 5入門 - JavaScriptのモジュールバンドラ - ICS MEDIA
webpack（ウェブパック）とはJSファイルをまとめる高機能なモジュールバンドラー。まとめることでウェブページのHTTPリクエストの数を減らしたり、高度なウェブアプリケーションの開発に役立ちます。 連載ではTypeScriptやBabelなどのES2015+の環境構築、ReactなどのJSライブラリの設定方法を網羅。サンプルファイルで詳しく解説します。 webpackの入門記事は他のサイトにもありますが、対象バージョンが古くて使えなかったりします。検索結果の上位の野良記事を参照にしたら古いバージョンの内容ばかり。解説記事通りにやったのにうまく動かない･･･なんて困った方も多いのではないでしょうか。本記事は常に最新版に対応させているので、安心して読み進めてください。 ※本記事では2023年3月現在のwebpack 5（2020年10月リリース）以上で解説しています。 本記事で解説しているこ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2022年に起きたフロントエンドの変化
