webpack
webpack で特定の warning 表示を消す場合。 ignoreWarnings を使う。 module.exports = { //... ignoreWarnings: [ { module: /module2\.js\?[34]/, // A RegExp }, { module: /[13]/, message: /homepage/, }, /warning from compiler/, (warning) => true…
問題 Herokuへのデプロイが失敗した。 webpacker gemを2.0に上げたのが原因っぽい（元々は1.2でした）。 こちらがエラーログ。 Configuration config/webpacker.yml file not found. Make sure webpacker:install is run successfully before running depend…
アプリケーションと呼ぶには程遠いですが、ひとまず最低限の形になったのでメモ。 From REST to GraphQLを読んだのが、直接のきっかけっちゃあきっかけ。 JSだけで、一通り作ってみようと。 注意書き 筆者は、ReactもRelayもGraphQLも初心者です。このポスト…
webpackの仕組みについて、見ていきます。 前回↓ chuckwebtips.hatenablog.com 前回は、webpackがexportやmodule.exportsをどのように変換するかについて見てみました。 今回は、モジュールのimportやrequireがどのように処理されるかを見てみます。 まず、…
引き続き、webpackの仕組みについて見ていきます。 chuckwebtips.hatenablog.com 前回書いたコードはこちらでした。 // gist.github.com 本当に単純な定数定義ですね。 実際の開発では、JavaScriptはモジュール単位で書くのが基本だと思います。なので、まず…
ずっとWebpackのソースコードを読んだり、仕組みを知りたかったのですが、時間がなくてやれずにいました。 今日からはWebpackの仕組みについて、ちょっとずつ探っていこうと思います。何度かに分けて書きますが、記事が溜まってきたらQiitaにでもまとめます…
前回までで、JSの開発環境が整いました。 chuckwebtips.hatenablog.com ビューライブラリにReact.jsを、サーバサイドにExpressを、そして開発環境のサポートにはWebpackを利用しています。 今回は、ReactのうえにRelayを載せていきます。 Relayとは最近話題…
JSでつくる開発環境のつづきです。 chuckwebtips.hatenablog.com 今回は、Reactをサーバサイドレンダリングできるようにします。主にExpressを利用して実現するのですが、そこらへんは以下の記事に書いたとおりです。 chuckwebtips.hatenablog.com ↑のとおり…
↓のつづき。 chuckwebtips.hatenablog.com 今回は、スムーズに開発が進むように、WebpackのHMR（HotModuleReplacement）をオンにします。 以前、QiitaにPostしたこの記事では、CLIから実行することが推奨されていました。 qiita.com ただし、今回はコンフィ…
つくるやつ React, Webpack, Express, Relay, GraphQLあたりをつかった何か。 内容はあまり重要ではなくて、ひとまずぜんぶJSだけで作ってみたい。 ただし、以下の記事でも書かれているように、必要ないものをどんどん盛り込むのは違うと思う。 medium.com …
すみません、こちらの記事に完全にお世話になりました。 サーバーサイドReactをwebpackを使って最小構成で試す (ES6 ＆ TypeScript) - Namiking.net 以下、すべて写経のメモになります。 いつものクライアントレンダリング まずは、HTML。 gistacfad61f44971…
引き続き、Reduxのお勉強です。 chuckwebtips.hatenablog.com 今回はようやくReduxに触れます。ひとまずactionを書こうと思います。 CSS in JS with Webpack actionの前に、ちょっとだけスタイルを書きます。 今回は、HTMLではなく、JS内にスタイルを持って…
Reduxをもっと頭に定着させるため、今一度チュートリアルを写経しました。 ちなみに前回は写経したはいいものの、Webpackでのビルドが通りませんでした。 chuckwebtips.hatenablog.com 結論から言うと、bebel-preset-reactというパッケージが足りていません…
Redux練習記録です。 前回は基本的なセットアップを行いました。 chuckwebtips.hatenablog.com 今回からは実際にReactを書いていきます。 Reactの基本となる、コンポーネントを作成します。 コンポーネントディレクトリ Reduxを利用する場合のコンポーネント…
webpack上でglobを使う方法について、業務で触れることがあったのでメモ。 インストール なにはともあれインストール。 $ npm init -y $ npm install webpack glob ディレクトリ構造 ディレクトリを以下のように作りました。 src/にJSファイルが格納されてい…
ひきつづきWebpackのチュートリアルを進めていきます。 前回までで、ローダーを使ったバンドルの方法を勉強しました。 chuckwebtips.hatenablog.com 今回は、さらにプラグインを追加していきます。 github.com さらなるプラグインの追加 今回はもう１つ、新…
引き続きWebpackのチュートリアルを消化していきます。前回はプラグインの使用方法を学びました。 chuckwebtips.hatenablog.com 今回はその中でもcss-loaderに着目します。 css-loader WebpackはJSファイル以外もrequireすることができます。そのためには、…
前回は、最小構成でのWebpackの利用を学びました。 chuckwebtips.hatenablog.com 今回はWebpackチュートリアルの第３回目。プラグインの使用について学びます。 github.com プラグインの使用 今回はファイルを圧縮するUgilifyJSPluginを使用します。 config…
非公式Webpackチュートリアルのその２です。 前回の記事がこちら。 chuckwebtips.hatenablog.com 今回消化するチュートリアルはこちらです。 github.co 最小構成例 前回はバンドラとローダーという俯瞰的な例でしたが、今回からは具体的なチュートリアルに入…
今日からWebpackのチュートリアルを何回かに分けて消化していきます。 消化するのはこちらのチュートリアル。 github.com 公式ではなく、有志によるチュートリアルです。 主にBabelやES2015をガリガリ使っていく前提で書かれているので、かなり有用なチュー…
どうも、chuckです。 前回は以下の記事を参考に、Rails環境にWebPackを導入してみました。 qiita.com その記事がこちら↓ chuckwebtips.hatenablog.com 前回までで、環境設定は終わったので、今回は実際にJSを書いてビルドをしてみようと思います。 モダンJav…
どうも！chuckです。 今日はRailsの開発環境にWebpackを導入してみたいと思います。 ※前提として、僕はまだまだひよっこエンジニアです。記事の中に誤りがあるかもしれません。その際は何卒ご指摘いただけると助かります。 Webpackとは gulpやbrowserifyのよ…
WebPackの公式チュートリアルを消化していきます。WebPackはすでに何度か触っていますが、一度基本から学んでみます。 過去記事↓ chuckwebtips.hatenablog.com インストール 何はともあれ、WebPackをインストールします。 今まではpackage.jsonに記述してロ…
