Hatena Blog Tags
はてなブログ トップ
webpack
このタグでブログを書く

webpack

このタグの解説についてこの解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。
stmn tech blog•3 日前

Rails+React環境下における、Hot Module Replacementの導入

はじめに はじめまして。株式会社スタメンでエンジニアをしております、永井(@0906koki)です。 以前の記事では、筋トレを週5でしていると書いていましたが、今は週2に減らして体をメンテナンスしています。 今回の記事ではRailsとWebpack、そしてReactを使って、webpack_dev_serverによるHot Module Replacement（以下 HMR）を実装する方法について書きたいと思います。 軽くwebpack_dev_serverとHMRの説明をすると、webpack_dev_serverとはWebpackを利用した開発環境向けWebサーバーで、Webpack管理内…

#react#webpack#hmr#webpack_dev_server#manifestPlugin

関連ブログ

ngnmtky’s blog•3 日前

ブログ開始！

現在、Web制作会社に勤めていましてHTML, CSS, jQueryを使用したマークアップを主に担当しています。 残念ながら弊社はエンジニア・コーダーの数が少なく、入社した時は私含め3人しかいませんでした。 しかも全員未経験からの転職組で私より先に入った2人も入社してから3ヶ月程度しか経っていなかったため全員が同じようなレベル感です。 なかなか厳しい環境ではありましたが、そこからgulpを導入して全員が同じようにコーディングできる環境を整えたり、SassやPugを導入したり、コーディングルール（道半ば・・）を作ったりと環境を整えてきました。 そんな中、私個人としてはJavaScriptの知見…

#JavaScript#webpack
RX100で撮り歩くブログ•25 日前

webpack5でdevtoolが空でエラー

LPとかを作る時用にstaticサイト用の開発環境のwebpackのバージョンを5にあげてみたときに以下のエラーが出た ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema. - configuration.devtool should match pattern "^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-…

#webpack
pione30’s blog•2 か月前

webpack 5 Node.js polyfill

webpack 4 以前では Node.js core module の polyfill が webpack 自体に同梱されていて、bundle したい module が 1 つでも core module の機能を使っていれば自動的にその polyfill が追加されていました。 しかし webpack 5 からはこの自動 polyfill が廃止され、真に必要な場合にのみユーザが手動で polyfill を追加するというようになりました 1 。 具体例を挙げると、react-markdown は unified 2 を通じて vfile というパッケージに依存しており 3、vfile は…

#webpack
Madogiwa Blog•3 か月前

Ruby on Rails: Asset Pipelineを使わないwebpackなRailsアプリケーションをHerokuでデプロイする

個人アプリの開発ではHerokuを使うことが多いのですが、最近webpack + Railsの環境を使っていてデプロイまわりで少しハマったので、デプロイ方法をメモしておきます📝 Herokuのデプロイついて Herokuによる標準のRailsデプロイ WeboackなRailsをHerokuにデプロイする 参考 Herokuのデプロイついて 使用する Heroku buildpack によって、アプリケーションの開発プロセスや、コードの実行時に用意すべきアセットやランタイムが決まります。複雑なアプリケーションで複数の言語を実行する場合は、1 つのアプリケーションで複数の buildpack を…

#Rails#Heroku#webpack
かあちゃんSEの気まぐれ開発メモ•3 日前

なんとなく使ってたpackage.jsonについて調べた

1. 開発環境 個人商店のお客様に、小さな売上管理アプリを提供するってことになりまして。 下記環境でコツコツ開発を続けています。じっくり作ってるうちに、どんどんフロントエンド技術が進化しちゃって使ってるフレームワークが古びてゆき困る。早くリリースせねば。backend: CakePHP ver. 2.10.19 (.lib/Cake/VERSION.txtで確認) front: CakePHPの標準view (*.ctp の拡張子) + jQuery + vue.js server: ローカルでの確認はとりあえずdocker上せっかくお勉強しているvueを使いたいんで、伝統的javascrip…

DS INSiDE•3 日前

今アツいプログラミング言語！TypeScriptに迫る！

こんにちは。フロントエンドエンジニアの藤澤(@f_a24_)です。 本稿では、今とても勢いのあるプログラミング言語TypeScriptについて紹介したいと思います。 TypeScriptとは？ TypeScriptはMicrosoft製のAltJS（JavaScriptに変換される言語）で、一言で言うと型のあるJavaScriptです。 Googleの社内標準言語になっていたり、直近1年で最も使われているプログラミング言語第4位になっていたりと 特にWebフロントエンド界隈を中心にデファクトスタンダード化しており、多くのプロダクトやライブラリにTypeScriptが使用されています。 【直近1…

stmn tech blog•3 日前

Rails+React環境下における、Hot Module Replacementの導入

はじめに はじめまして。株式会社スタメンでエンジニアをしております、永井(@0906koki)です。 以前の記事では、筋トレを週5でしていると書いていましたが、今は週2に減らして体をメンテナンスしています。 今回の記事ではRailsとWebpack、そしてReactを使って、webpack_dev_serverによるHot Module Replacement（以下 HMR）を実装する方法について書きたいと思います。 軽くwebpack_dev_serverとHMRの説明をすると、webpack_dev_serverとはWebpackを利用した開発環境向けWebサーバーで、Webpack管理内…

食べチョク開発者ブログ•3 日前

会社の支給PCがMacBook Pro M1なので、新しく開発環境を構築した話

こんにちは。 今年の年始からジョインした遠藤です。 さて、入社したところ会社支給のMacBook ProがM1チップのものでした。 はい、現状は開発環境で苦労するとか色々噂を聞くやつです。 実際に試したのですが、 現状の開発環境構築スクリプト、手順書が一切使えない VitualBox, Vagrantは利用不可 Dockerは利用可能ではあるが、一部イメージが対応されてない 古いパッケージは動かす手段がない などなど、通常ではぶつからない問題にぶつかります。 食べチョクでは、 Ruby Node.js MySQL Redis ElasticSearch Kibana を利用しています。 この辺…

青いやつの進捗日記。•4 日前

scrollboosterでドラッグで横スクロールする機能を実装。IE11にも対応。

一番ありそうな場面は、 テーブルで、左列がstickyで固定されていて、2列目以降がスクロール出来るやつ。縦に長いテーブルだと横スクロール出来る入力デバイスを持っていないとスクロールバーをクリックしないとスクロール出来ないので操作がかなりめんどくさい。 なので、加えてドラッグで横スクロール出来る機能も実装する。 jQueryでどうにかする、みたいなのも出てくるけど、普通に良い感じのライブラリがあった。 bl6.jp www.npmjs.com ilyashubin.github.io github.com そして、TypeScriptなら型定義ファイルも www.npmjs.com overf…

約束の地•4 日前

VS Code のデバッグツールで Yarn の ウォッチ を走らせる

本来的な使い方ではないですが、応用が効くかもしれませんので記しておきます。 やりたいこと VS Code のデバッグツールを使って、例えば $ yarn webpack:watch のようなコマンドを裏で走らせたままにしておきたい。 結論 (launch.json) 上記のことをやるためには以下のような launch.json を書きます。 { "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Yarn de Watch", "runtimeExecutable": "…

備忘録•5 日前

はぎわらさんから npm initしてからnpm installする npm initでpackage.jsonとnode_modulesができるはず・・・ 先にinitしないと同階層の別ディレクトリにinstasllした場合に、既に上の階層にinitしたディレクトリがあると、install時にそこのpackage.jsonとnode_modulesを探しに行くことがある？らしくerror等の要因になる -g でインストールはやめとくのが無難 ローカルのがそのディレクトリのみに影響を及ぼすので、限定的に使える webpackがnode.jsによってjavascriptを旧javascriptに…

えぐろぐ•6 日前

TypeScriptsでnew URL をする時のエラー

以下のように書いていたら import * as url from "url" const url = new url.URL("https://google.com") 以下のエラーがコンソールに出力された TypeError: undefined is not a constructor (evaluating 'new url__WEBPACK_IMPORTED_MODULE_9__["URL"] 調べてみると、lib.dom.d.ts に処理が追加されたとのことなので github.com importは不要で以下だけで良かったみたい。 const url = new URL("htt…

WEBサイト制作の勉強•6 日前

新しいスキルを身に着ける

授業も残り3週間になりました。残りの期間はとにかく今まで授業でインプットして来た物をポートフォリオという形でアウトプットしていきます。 けれど、ただ漠然とポートフォリオを作るというのも難しいので、目標となる物（入りたい会社や仕事でやりたい事）をしっかりとイメージし、そこに行くにはどういった物が必要か？、どういった道筋で辿り着きたいのか？、なんかを考えると、今やるべき事が見えてきます。 未経験から就職する為に必要なスキルは授業内でやっている事で充分ですが、さらにその先を見据えた場合、学ぶべきスキルはまだまだあります。仕事を始めると日々の仕事に追われ、なかなか新しいスキルを勉強する機会が持てないの…

nao blog•6 日前

【2021版】Hugo で typescript と tailwind css を使う

はじめに 2019年に Hugo で typescript を利用する という記事を書きました。 Hugo は進化が早く webpack は必須ではなくなっていたりと現時点でのベストプラクティスをまとめます。 また、今回は typescript に加え tailwind という css framework も利用します。 Hugo で typescript と tailwind css を使う site の作成からtypescriptの導入、tailwind cssの導入の順でまとめます。 Hugo で site を作成する hugoコマンドでexample-siteという名前のサイトを作成し…

dunno logs•8 日前

ASP.NET Core で小さく Sass と ES6 を使う

「小さく」と書いた理由には、その対比として Webpack のような Node のエコシステムを使った手法を置いている。つまり、そちらを「大掛かり」としている。 フロントエンドエンジニア不在の現場でフロントと向き合う ASP.NET Core 関連のブログ等を読んでいたり、ASP.NET Core の SPA サポートをみていても、おそらく大きな流れとしては Node を素直に利用して、フロントはフロントの文化の中で開発しようというものに見える。 一方で、React / Vue などを使ったフロントエンド開発は、ASP.NET (MVC or WebForm) + jQuery の開発を主とす…

uhiaha888’s diary•10 日前

TypeScript + Vue.js で Chrome拡張機能を開発する

前回とほぼ同じ話です。 Chrome拡張機能の開発ではアイコンクリック時に表示されるポップアップと、開発者ツールに追加するタブでHTMLページを利用します。 このHTMLページの開発でVue.jsを利用したい、というのがモチベーションです。 Vue.jsでの開発ではよくvue-cliが利用されると思いますが、何をしているかよくわからない感じがあまり好きじゃないのでvue-cliは利用せずに行きたいと思います。 参考 : github.com まずはnpmのプロジェクトを作成します $ cd my-extension $ npm init This utility will walk you t…

かもメモ•12 日前

Webpack production mode の時だけ babel-preset-minify で console.log を消したい

開発中は console.log で色々確認したいけど、ESLint で console.log が残ってるとエラーになるようにしてると、特に雑でいい個人開発だと都度消してってのがメンドイので production の時だけ console.log を削除してしまいたかった。 webpack の uglifyjs-webpack-plugin で実現できていたみたいだけど、リポジトリが archived になっていたので、コレは使わず今回は babel の babel-preset-minify を使って console.log を削除するようにしてみた。 環境 webpack ^5.6.0 …

Vapor Trail•13 日前

2020年振り返り

Cordova 経験として身についたこと。 Sass BEM記法 Vue.js Cordova・ネイティブ関係の知識とか改善したこと WKWebView対応 UniversalLinkの設定 署名付きAPKのビルドの自動化 デプロイゲートの利用 ReactNative React Hooks 非同期 Redux Toolkit コンポーネント設計 ReactNativeで開発するにあたって参考にしたものとか Cordova 4月あたりからcordova+cakephpの仕事を引き継いで機能追加やバグ修正をしていた。cordova全くわからんかったけど、html+css+jsでwebview表示…

RAKUS Developers Blog | ラクス エンジニアブログ•13 日前

フロントエンドとバックエンドを改めて整理する

はじめに みなさんこんにちは。フジサワです。 「フロントエンド」や「フロントエンドエンジニア」という単語を耳にするようになって久しいですが、自他共に認めるバックエンドエンジニアを出自に持つ私にとって フロントエンド界隈の移り変わりは激しく、追いかけるのもなかなか大変です。 そこで今回は、改めてフロントエンドとは、またフロントエンドエンジニアに必要なスキルとは、といったあたりを整理してみたいと思います。 フロントエンドエンジニアに興味を持ったものの、あまりよくわかっていないと言う方の参考になれば幸いです。