webpack でビルドするときの環境変数を読み込む方法の整理と、読み込み方法の切り替え
webpack でビルドするときの環境変数を読み込む方法の整理と、読み込み方法の切り替え2021-08-23 みなさんご存知の通り webpack での環境変数の設定は plugin に書けばおしまいな話ですが、いろいろやり方がありそれぞれメリット・デメリットがあります。そのため、「ローカルでは .env から読み込みたいけどデプロイ時は CD 環境の環境変数を使いたいのだが、どの方法が良いだろうか」「Git で管理するファイルへのハードコードはしたくない」などとケーススタディに即答できるかと言われると怪しいです。このように状況や要件によってはその読み込み方法の選定に悩むこともあったので、関連する技術の整理をしました。 よく見るやり方 「webpack 環境変数」などでググると下記のようなやり方があるようです。 .env に書き出す .env ファイルに書き出し、なんらかの手段でビルド実行
最新版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ファイルをまとめるモジュールバンド
やっぱりwebpackがわからない（エピソード1）
やっぱりwebpackがわからない（エピソード2）、そもそもnpmからわからないを公開しました。 webpackがわからない 最近はViteが注目されだして、実際にとても良いビルドツールです。Vue.jsのEvan Youさんが開発しただけのことはありますね。ネーミングもイカしてます。しかし、だからといって、では開発環境にViteを採用しようと簡単にはできないのが、業務の辛い所です。新しい技術を採用して、「わしが全責任を引き受けるぜよ」というThe 男気！な人はなかなかいません。 したがって、当分はwebpackを使い続けることになるのですが、これが未だによくわからないという人が意外と多いです。フロントエンドプログラミングの初心者に近い人などは、この段階でつまずくことにより、すっかり自信をなくしてしまうこともあります。 ですが一先ず安心してください。webpackを含むこれらフロントエンド
webpack-dev-server のオプション全部試した
本記事は webpack-dev-server v3 に関する内容となっており、 v4(またはそれ以降) とは一部オプションが廃止される、設定方法が変わるなどの差異がありますのでご注意ください はじめに webpack-dev-serverは、webpackを用いたプロジェクトにおける開発用サーバで、ブラウザのライブリローディングを提供します。 それによって、ソースコードの編集時に、webpackによる差分ビルドが実行されると、ブラウザがwebpack-dev-server経由で更新差分を受け取り、リアルタイムに変更内容を確認しながら開発ができるようになります。 webpack-dev-serverは内部的にはexpressで実装されており、express用のミドルウェアである webpack-dev-middleware によって実現されています。webpack-dev-serverに渡
webpack + ts-loader で使う tsconfig.json を動的に切り替える
webpack を使っていると typescript の module 指定は、ESM を treeshake するために "module": "esnext" としたい。 しかし、ts-node を前提としたユーティリティスクリプトを作っていると、"module": "commonjs" としないと実行に失敗するようになってしまう。ts-jest も同様。 ts-node に関しては、引数で compilerOptions を書き換える方法があり、次のようになる。 yarn ts-node -O '{"module":"commonjs"}' script/x.ts これだと常にこの引数を付けて実行する必要があり、不便。 ts-loader の configFile TypeStrong/ts-loader: TypeScript loader for webpack をちゃんと読むと、
vue-next（Vue.js 3.0 wip）+ TypeScript + webpackでの開発環境を構築する - Qiita
2020年のQ1にVue.js 3.0のリリースが予告されています。 公開に先駆けてVue 3.0の新機能を試したいと思い、TypeScript + Webpackでの開発環境を整えてみたのでまとめます。 （2020/06/04 追記） vue-cli-nextが出ているようです。 https://github.com/vuejs/vue-cli-plugin-vue-next （2020/02/04 追記） この記事で作った環境を使いVue3.0の新機能Suspense, Teleportを試しました。こちらも参考までに。 Vue.js 3.0 の新機能を試す。 〜 Suspense 編〜 Vue.js 3.0 の新機能を試す。 〜 Teleport 編〜 内容 vue-nextのREADME.mdで紹介されている以下リポジトリを参考に、Webpack版のVue.js 3.0の開発環境を
webpack 4 入門 - Qiita
お知らせ（2020/08/25 追記） Udemy で「webpack 最速入門（10,800 円 -> 2,000 円）という講座を公開しました。 本来の価格は10,800円ですが、上記リンクからアクセスすると2,400円で購入できます。 どんな内容？ webpack を利用したフロントエンド開発環境が構築できるようになる、ハンズオン形式の講座です。 詳細は上記のリンクのプレビュー動画で詳しく説明しています。 記事との内容の違い 記事の内容に、以下の内容や特徴が追加された感じです。 実務で利用できる開発環境を徐々に構築していくので、記事と比べて実践的な内容 ハンズオン形式の講座なので、手を動かしながら webpack を学習できる webpack の設定ファイルに追加する値の詳細をすべて解説 記事では解説していない細かい補足や、機能のご紹介 なぜ npm scripts を利用するのか
JavaScript webpack4でhtml-webpack-pluginを使い、キャッシュ制御、テンプレートにejsを使う | nansystem
html-webpack-plugin、css-loader、mini-css-extract-plugin、ejs-compiled-loaderを使い、分割したejsをテンプレートにして、ブラウザキャッシュを回避できるCSS、JavaScriptを読み込ませたHTMLを出力できるようにする。 # html-webpack-pluginとは html-webpack-plugin (opens new window)とはwebpackのプラグインで、webpackで生成したJavaScriptやCSSを埋め込んだHTMLを生成する。 webpackで生成したJavaScriptやCSSにユニークな識別子を付与することでブラウザキャッシュを回避したり、テンプレートとなるHTMLをカスタマイズすることができる。 # html-webpack-pluginでJavaScriptを読み込んだHT
webpack4対応webpack-dev-serverの主要な設定オプション(CLI,webpack.config.js)の意味と挙動 - Qiita
webpack4対応webpack-dev-serverの主要な設定オプション(CLI,webpack.config.js)の意味と挙動JavaScriptNode.jswebpackwebpack-dev-server 概要 Webpack 4を利用した開発に便利な webpack-dev-server の設定メモです。 webpack-dev-serverのソースコードと公式wiki、公式Docを参考に実動確認した結果を書きます。 HMR等オートリロード系の設定(--hotとかとか--inlineとか)やよく使いそうなCLIオプションなど理解しておくためのメモです。 環境 本投稿で使っている環境は以下の通り。 webpack-dev-server:3.1.7 webpack:4.17.1 webpack-cli:3.1.0 webpack-dev-server とは webpack-d
Vue.js＋Webpackで作ったプロジェクトをGitHub Pagesのサブディレクトリでの公開時PublicPath設定について - Qiita
Vue.js＋Webpackで作ったプロジェクトをGitHub Pagesのサブディレクトリでの公開時PublicPath設定についてVue.jswebpack はじめに Vue.js＋Webpackで作ったプロジェクトをそのままBuildして、GitHub Pagesへサブディレクトリとしてデプロイしました。 - 開発環境(Local) ⇒https://localhost:8080/ - 本番環境(GitHub Pages) ⇒https://<username>.github.io/<repository>/ GitHub PagesのURLにアクセスしたところ、imgタグの画像とCSSに定義した画像パスが404エラーとなって、5時間もはまってしまったので、解決するまでのメモを残しておきたいと思います。 GitHub Pagesに公開するために設定すべきところ 1.コンフィグファイル
Spring Boot ウェブアプリにフロントエンド技術を含める webpack ビルド - Qiita
はじめに Spring Boot で構築するウェブアプリケーションに、ES Modules、babel や Sass/CSS コンバートなどのフロントエンド技術を含めてビルドする TIPS を書いてみました。普段はバックエンドばかりで webpack よく分からないよ、という方の参考にもなるかもしれません（自分ですが…!） この記事中の全てのソースコードは以下のリポジトリーから参照できます。なるべくバックエンドとフロントエンド担当の方がリポジトリーを共有して作業できることを心がけました。 https://github.com/h1romas4/springboot-template-web また、Gitpod からビルドして動作する様子も確認できます。 # （Gitpod ターミナルで）Spring Boot アプリケーション起動 ./gradlew bootRun # （別なターミナルで
モダンJavaScript概論 − Node, npm, ECMAScript, Babel, Webpack | Hypertext Candy
2020.04.30 モダンJavaScript概論 − Node, npm, ECMAScript, Babel, Webpack この記事では、モダンな JavaScript を書くための前提として知っておくべき、いくつかのキーワードを紹介します。想定読者は、初心者 〜 jQuery なら書けるレベルの開発者です。これから React や Vue.js を学びたい方、または Web 開発の世界に飛び込む新人さんなどの学習の助けになれば、と思います。 「モダン」な JavaScript ここで言う「モダン」とはどういう意味でしょうか？ 「モダン JavaScript」という表現は数年前から目にしますが、大抵 ES2015（JavaScript の 2015 年バージョン）以降の JavaScript を指しているようです。確かに、const / let やアロー関数などの文法的な改善、A
Webpackを使用してhtmlの共通部分をテンプレート化 | TIPS
実現したいこと事前準備npmパッケージのインストールサンプルサイトの構成htmlの作成JavaScriptファイルの作成webpack configの設定html-webpack-pluginのその他のオプションページタイトルをwebpackのconfigで管理するキャッシュ対策JavaScriptファイルの読み込む位置を指定するデモ・ソース最後に参照
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
Vue.jsのSFC（単一ファイルコンポーネント）＋PHPでWebアプリケーションを構築する - フロントエンド環境編 - Qiita
はじめに 本記事は『フロントエンド環境構編』です。続編は『バックエンド環境編』をご覧ください。 Vue.jsのコンポーネントとは、HTMLのテンプレート（＋CSSスタイル）に、JavaScriptのデータとメソッドが1セットになった画面構成部品の事です。SFC（単一ファイルコンポーネント）は、このコンポーネントを1つのファイルで定義する仕組みのことです（慣例的に拡張子を.vueとするファイルを作成します）。 詳細は、以下のページをご覧ください。 Vue.jsのSFC（単一ファイルコンポーネント）について SFCを使うには、webpackやBrowserifyなどのビルドツールの導入が必須です。 本記事は、Vue.jsのSFCをwebpackでビルドできるように設定を行い、バックエンドにPHPを組み合わせた構成で、Webアプリケーションを構築する一連の流れを説明する記事です。 前置き めちゃ
Webpackを一歩一歩確実に理解してReact + TypeScript環境を作る (2022/10/31 追記) - Qiita
2022/10/31 追記 2022年時点ではWebpackでReactの環境を構築するより、Viteを用いて環境構築するほうがメジャーになっています。 筆者としても新規開発するならWebpackより、Viteの方で構築することをおすすめします。 ViteではReactのビルド用設定はPluginとしてパッケージされており、Webpackのように設定が必要ではありません。 下記はWebpack v4の話であり、すでに過去の物となっています。 ※自分のブログに投稿したのものと同じです。 https://mr-ozin.hatenablog.jp/entry/2020/06/20/043243 動機 毎回 npx create-react-app で React アプリを生成していて Webpack の勉強から逃げていたが、いい加減向き合いたいと思ったため。 昔 Webpack に入門しようと
Webpack 5を使ったvue.jsの環境構築とSFCの利用方法 | アールエフェクト
Vue CLIを利用することでvue.jsの開発環境を簡単に構築することができます。Vue CLIで簡単に環境構築、アプリケーションの開発を行うことができますが裏側で何が行われているのかわからない人も多いのではないでしょうか。Vue CLIを利用することなしでWebpackをインストールを行いSingle File Component(単一ファイルコンポーネント)を使ってVueのアプリケーションを構築できる環境を作成してみたいという人向けに本文書を作成しています。本文書ではwebpackのインストールからSFCを使えるまでの手順をStep By Stepで丁寧に説明していますので一通り読み終えるとVueで開発を行うためにwebpackで必須な設定を理解することができます。 Vueの開発環境の構築に関する知識も深まります。 Single File Componentとは VueのSingle
【Vue.js】Composition API時代の便利ライブラリ「VueUse」を使ってみた - Qiita
Vue Composition API によって Vue.js にも React Hooks のようなロジックの再利用性の高い開発体験がもたらされようとしています。 しかし、まだ「Composition API の良さをわかっていない」という方や「Composition API をうまく利用した書き方がわからない」という方も多いかと思います。 本記事では Composition API 時代の便利ライブラリ VueUse を用いた実装例や、 VueUse 自体の実装がどのようなものか紹介します。 Composition API の良さや雰囲気もキャッチアップしていただければ幸いです。 VueUse とは？ VueUse は Anthony Fu さん1が中心に開発しているライブラリで、Composition API を用いた便利系関数を数多く集めたライブラリです。 例えば、ブラウザ上のマウ
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
社内でフロントエンドのパフォーマンスチューニングコンテストを開催した
