webpack-serve v2.0変更点 (deprecated) - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
webpack-serve で動的な処理をアドオンする(deprecated) - Qiita
追記: webpack-serve は非推奨になり、 webpack-dev-server の開発が再開しました。ここは webpack-dev-server を使っておきましょう。 とりあえず動かしたい場合は https://qiita.com/ma2saka/items/eb4190a009da9649583c に最低限の設定方法を書いたのでそちらを参照する。 webpack-serve は webpack で開発しながら動的にビルド走らせてサーバで動作確認するためのものと認識している。「ファイルを監視して webpack を適切に実行してブラウザをリロードする」が主な役割。 ただ「本番系では手前にリバースプロキシがいてURLの書き換えやってる」とか「APIサーバが別にいてそっちへのアクセスはモックしたい」とかいろいろ都合があるもので、そのあたりはアドオンとしてカスタマイズする流れにな
NextJS + dockerでhmrが効かない時の対処方法メモ - Qiita
概要 nextjs + typescriptをdockerとkubernetesを用いて動かすため、minikubeを使ってローカル環境で諸々を試していてhmrが効かないということに遭遇したので、その対処方法を備忘録としてメモ。 環境 os x 10.11.6 nextjs 6.1.1 minikube v0.28.2 virtualbox 5.2.16 何をしていたか nextjs + typescriptのアプリケーションを公式を参考に最低限動作させた yarn dev起動し、簡単にhmr導入できるなーと感動していた Dockerfileを作って↑をimage化 docker runでも動くことを確認 minikube、kubectl、helmを入れて諸々ゴニョゴニョ minikubeのhypervisorとしてはvirtualboxを使う helmのdeploymentでホストディレ
Railsのプリコンパイルをローカル環境で行ってデプロイを高速化する方法 - Qiita
Rails アプリを Capistrano でデプロイするとき deploy:assets:precompile タスクでフロントまわりのビルドが走ります。 デプロイ先のサーバーが低スペックだと、そのビルドに時間がかかってデプロイがなかなか終わりません。その上、サーバーの負荷も上昇し、サービスも不安定になってしまいます。 そこでプリコンパイルだけローカルで行うようにする例がこちらです。 unless ENV["REMOTE_BUILD"] == "1" # 元のタスクの内容は消しておく(重要) Rake::Task["deploy:assets:precompile"].clear # 新しく定義 # cap production deploy:assets:precompile desc "ローカルで assets:precompile してコピー" task "deploy:asset
Electron & React & Redux & TypeScript アプリ作成ワークショップ 5日目 - Qiita
1 日目 2 日目 3 日目 4 日目 5 日目（この記事） 6 日目 7 日目 8日目 9日目 前回は、TODO アプリの Store、Action、Reducer まで作成しました。 今回は、Component を作っていきますが、その前に styled-components の話をします。 styled-components 概要 今回は CSS を使って装飾をするのですが、CSS ファイルを作成するのではなく、SASS などの AltCSS を使うわけでもなく、CSS in JavaScript を使って見たいと思います。 従来の CSS や AltCSS を別ファイルとして管理する場合、定義したクラス名と JavaScript での実装と離れているので、下記のような問題があります。 どこで何が使われているのかわかりにくい。未使用のものの検出が困難。 スペルミスした場合に実行時にし
firebaseのRealtimeDatabaseをtypescriptでいじりたい（webpack + typescript + firebase_admin） - Qiita
firebaseのRealtimeDatabaseをtypescriptでいじりたい（webpack + typescript + firebase_admin）JavaScriptTypeScriptFirebasewebpack RealtimeDatabaseのデータをmigrationとかでいじりたいときあるっすよね。 想定してないデータができないようにルールを使うと思うんですが、 自分はtypescriptでルール通りに型をつくってデータを作成するようにすると安心できるので気に入ってます。 typescriptのコンパイルでwebpackを使ったんですが構成は下記みたいな感じ↓ https://github.com/chucker34/firebase_admin_pack ちょっと詰まったところはwebpack.config.jsのresolve.mainFieldsでmain
SPAからconsole.error() でBugsnagにエラー情報を送信する。 - Qiita
課題 目下、ReactによるSPA(Single Page Application)の開発に関わっており、その途上で以下の課題 console.error() にErrorオブジェクトを渡すことで、 Bugsnag にエラー情報が送られるようにしたい。 が発生したので取り急ぎ以下のように解決した。 解決策 console.error()の先頭パラメーターがErrorオブジェクトの場合、そのError情報がBugsnagに送信され、それ以外はデフォルトと同じ動作をするようにした。概略は以下。 import bugsnag from 'bugsnag-js'; const origConsoleError = console.error; console.error = (...args) => { if (args.length > 0 && /Error$/.test(args[0].co
Webpack2のTree Shakingを試す - Qiita
社内勉強用資料。 Tree Shakingとは？ ESモジュール形式で書かれたコードをbundleして一つのファイルにする時に、exportしているけどどこからもimportされていない、使われていないコードを削除する機能のことです。 もともとはrollupというBundlerに実装されていた機能ですが、webpackの次バージョンであるwebpack2にも実装されているということで試してみました。 webpack2のTree Shakingの仕組み Tree-shaking with webpack 2 and Babel 6 上記記事に詳しく書いています。簡潔に説明すると、まず、ESモジュール形式で書かれたJSファイルを全て結合し、そのタイミングでどこからもimportされていないexport文を消してしまいます。あとは、コードをminifyするタイミングで完全に取り除かれるという感じ
webpack build 高速化 まとめ - Qiita
この記事はTypescript Tutorial React & Webpackを出汁にしています。 $ npm install -D webpack@beta typescript@beta ts-loader source-map-loader @types/react-dom @types/react $ npm install -S react@next react-dom@next 途中webpackのバージョンが更新されていますがこの記事に関しては問題ないと思われます。 気になる方は What's new in webpack 2 エピソード 1 「Qiita 新着順で眺めてたら記事発見」 webpackのDLLバンドルを使ってビルドを速くする pirosikickさんの投稿でHappyPackの存在を知る。 HappyPackに関する日本語の記事は一つもなかったので、公式ドキ
webpackのCommonsChunkPluginの使い方、使い所 （webpack 4で廃止） - Qiita
#2018/3/15追記 先日リリースされたwebpack 4で、CommonsChunkPluginは廃止され、代わりにoptimization.splitChunksが追加されました。 詳細は記事に書きましたのでwebpack 4を利用している方は以下をご覧ください。 webpack 4 の optimization.splitChunks の使い方、使い所 〜廃止された CommonsChunkPlugin から移行する〜 それ以前のバージョンでは有用なツールだと思いますので、まだ移行できない方はご覧いただければと思います。 はじめに webpackのプラグインであるCommonsChunkPluginに関しての基本的な使い方、使い所に関しての記事です。 CommonsChunkPluginを利用する機会はそこそこあると思うですが、日本語の解説記事をほとんど見かけなかったため本記事を
2018年は、reduxとeslintとflowとwebpackを捨ててみようと思う - Qiita
2017年版と2018年版でwebアプリケーション作成時のreactの（マイ）ベストプラクティクスを以下のリポジトリに、まとめてみたので記事にしてみました。 react-best-practices https://github.com/wheatandcat/react-best-practices/tree/master ちなみにタイトルは、その過程で2018年版に削除したpackageです（理由は後述） github サンプルコードの内容は、ログイン/ログアウト + fetchした内容を画面に表示するだけです （ただのサンプルなので、実装はハリボテです） 2017年版 https://github.com/wheatandcat/react-best-practices/tree/master/2017years 2018年版 https://github.com/wheatandc
Webpacker + Vue + Vuex + ActionCable で動作するサンプルを作った話 - Qiita
はじめに Qiita では初めまして、主に ProjectHL2 という名義で活動している何でも屋のおじさんです。 小さなソフトウェア開発会社でエンジニアをやっており、主に Ruby on Rails を用いた業務システム開発を行っておりました。 最近は会社にも後輩のエンジニアが増え、フロントやモバイルの開発もバンバン行うようになり、こうした技術についてもっと世のエンジニアの皆さんとも共有して行きたい（ついでに仕事も欲しい）と思い記事を書いていく事にしました。 今後ともよろしくお願いします。 動機 元々 React + Redux はたまたま実案件でご一緒させて頂いたエンジニアさんと「全然分からないんですか！僕もです、やりましょう！」といった流れで勉強しました。意味不明ですが、人生とはそういうものだと思います。 ともあれ Vue + Vuex でも同じような事ができそうだったので、後輩エン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React.js 開発環境を webpack4 + webpack-serve + babel 7 で作る(Deprecated) - Qiita
webpack-serveとreact-routerでSPA環境(Deprecated) - Qiita
webpack-serveでcontentをwatchしてブラウザをライブリロードさせる - Qiita
Electron & React & Redux & TypeScript アプリ作成ワークショップ 4日目 - Qiita
Vue CLI 3 + DockerでHMRが動かない時の解決策 - Qiita
webpack.config.jsがわからない - Qiita
npmとwebpack4でビルド - jQueryからの次のステップ - Qiita
electron 上で vue.js を動かす - Qiita
