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
フロントエンド開発に Babel も Webpack も必要ない ※ - KAYAC engineers' blog
できらぁ！ 面白法人カヤックのエンジニアのごんです。 昨今のフロントエンドといえば、 Todo アプリを作るにも Webpack やら Babel やら必要だと脅され、 始める前にうんざりしてしまうと話題ですが、 実は、最新のブラウザに限って言えば、そんなことはなく、 ECMAScript の新しい構文や JavaScript Modules など、 多くの機能がネイティブの状態でも使えます。 もちろん、古いブラウザのサポートや、通信パフォーマンスのことを考えると、 ビルドツールを使ったほうが良いのは間違いないのですが、 JavaScript の新しい機能に触れてみたり、自分用のツールを作るぶんには十分でしょう。 ソースコードはこちら！ そんなわけで、今回はビルドツールなしでウェブアプリを作ってみました。 ECMAScript に関するクイズゲームです。 最新版の Google Chrom
Webpackのビルド時間を短くするための取り組み - freee Developers Hub
メリークリスマス。freeeでエンジニアをやってます @yo_waka です。 この記事は freee Developers Advent Calendar 2017 の25日目です。 Webpack でビルドしてますか？僕は今日もビルドしています。 弊社ではフロントエンドのビルドに Webpack を用いているのですが、サービスの規模が大きくなるとともにビルド時間が長くなってきて困ってきました。 会計freee というサービスのフロントエンドの規模的にはこのような感じです。 JSコード行数: 275421行 Webpack エントリポイント数: 108 そこそこですね。 煩悩の数だけJSのエントリポイントがあります。 エントリポイントが多い理由は、元々は Rails の標準である Sprockets のみでビルドしていたものを少しずつ移行していったためです。 元々SPAで作られているアプ
webpack.config.jsがわからない - Qiita
webpack.config.jsがいつまでたってもわからない Javascript開発には欠かせないwebpackですが、webpack.config.jsファイルの書き方がいつまで経っても検索&コピペばかりで身に付きません。別にコピペでいいじゃんという考え方もありますが、webpackのドキュメントに沿って設定内容を理解し、自分の環境に合わせた形でwebpack.config.jsが書けるようにまとめていきたいと思います。バージョンは3.8.1の想定です。ディレクトリ構成も考えながらやっていきたいと思います。今のところprojectディレクトリ以下に次のようにファイルが存在しているとします。
Backpackについて調べた - Qiita
お手伝いしているプロジェクトでBackpackなるものが使われており、はてな？と思ったので調べました。 Backpackとは？ Backpack is a minimalistic build system for Node.js projects. Backpackは、Node.jsのプロジェクトの最小限のビルドシステムだぜ！とのことです。create-react-appやNext.jsにインスピレーションを得たようで、設定ファイルの記述や追加のnpmパッケージなしで、 Babelによるトランスパイルの実行。async/await、object rest spread、class propertiesなどの構文の利用 source-mapの対応（source-map-support） nodemon的なファイル監視、再実行（Live Reloading） が、出来るようです。内部ではwe
sourcemap を無効化して webpacker の production build を 2000% 速くする - Qiita
TL;DR プロダクションで sourcemap が有効化されていたので、関連オプションを切って回ったら 2000% 高速化した。 問題 NODE_ENV=production bundle exec rake webpacker:compile が致命的に遅かった。 エントリーポイントが17個でビルド時間が合計680s という有様で、プロダクションとはいえ デプロイ を11分遅くさせるのは、ビジネス的に致命的な感じだった。 調査 さしあたり、いつもの経験則で uglify の mangle オプションが遅いんだろう、と思って、webpacker のソースの設定を見に行ったら、うん？？？？となる設定をみつけた。 this.plugins.set('UglifyJs', new webpack.optimize.UglifyJsPlugin({ sourceMap: true, compre
逆引きWebpackの使い方 - Qiita
cloudpack あら便利カレンダー 2017 10日目の記事です。 最近はもっぱらWebpackです。 gruntがあんまり好きになれず、その後にきたgulpでしばらくやってましたが、 昨年からはもっぱらWebpackを使うようになりました。 npmに公開されているライブラリをモジュールとして扱いやすかったり、 JSフレームワークをつかったSPAサイトのソースコンパイルがしやすかったりと最近のフロントエンド開発を行うにはなにかと便利なツールです。 ただ実際開発に利用するとなると何かとこれはどうするの？ってのが出てくるので逆引き的に使えるようなリストを書きました。 基本公式サイトにのってる内容になります。 Webpack公式 ざっくり知っときたいけど、英語の公式読むの面倒ってかたの役に立てばいいなーと思います。 出力するファイルをわける、名前を指定する まずは基本編。 const pat
Webpacker を使わずに webpack で頑張る - Qiita
はじめに Rails で Sprockets を使ったフロントエンドの開発環境を webpack に徐々に移行していく話です。 Rails の開発環境と JavaScript 周りのエコシステムの話は度々話題に上がります。 Rails 5.1 から Webpacker が導入されるようですが、個人的には次のような思いがあります。 Rails のレールにはできるだけ乗りたいが、フロントエンド環境は分離したい 新しいヘルパを導入する必要がある ( javascript_pack_tag など ) Webpacker の開発速度に依存してしまうのが不安 そこで、以上の問題を踏まえつつ、スムーズに移行できるような構成を考えてみました。 方針 Sprockets のヘルパーや digest 機構はそのまま使う なるべく webpack で完結 (gulp や grunt のようなツール、rake タ
TypeScript2 + webpack2でのcss-loader, file-loader周辺をなんとかする - Qiita
TypeScript2 + webpack2でのcss-loader, file-loader周辺をなんとかするJavaScriptTypeScriptwebpackcss-modules WebpackとTypeScriptの扱いについて、まだ手探りだが、今のところのプラクティスをまとめたい。 css-loader, file-loaderなどで読み込むリソースが型エラーになるのをなんとかする話 webpack + babel + css-loader という構成のところからwebpack + typescriptにしていくにあたって、js, ts以外のファイルの読み込みは、当然そのままだと型がエラーとなる。 これを解決するのに、2点ほど手順が必要だった。 手順1. 読み込み方法を変更 file-loaderなどはmodule.exports = "some-resource"という形で
フロントエンド知らない私のwebpack入門 その1 - Qiita
jQuery 1.7 あたりで知識が止まっている、最近のフロントエンド開発を知らない私が入門しています、という記事です。 なんか長くなったし、気力も持たないので、その1ということで書いています。 webpackってなあに？ npm経由で入るアセットバンドラー (asset bundler)です。Webフロントエンド開発用のビルドツールです。 SPAなどを作る時、 HTML・JS・CSS・画像やウェブフォントなど一連のリソースをまとめてくっつけたり、 くっつけられるように加工したり、 JSをbabelで古いブラウザ向けに変換したり、 TypeScriptやらをJSに変換したり、 全部面倒見てくれます。 ただwebpackに上記の機能を全て内蔵しているわけもなく、プラグインやローダーとかいった追加の機能をプロジェクトにインストールして設定することにより利用できるようになります。 最近のフロント
Webpack の本質とそれがよく分かるチュートリアル - おいちゃんと呼ばれています
DHH さんが Rails 5.1 に Webpack を取り入れる意向 を示し、webpacker gem なるものをつくり始めたようである。 今後ますます Webpack は利用されていくであろうが、一方で Webpack はいろんなことができ過ぎるが故にかえって本質が掴みにくい点があると思う。そういえばこの間も、同僚のデザイナーに Webpack がよく分からないんですけど？と質問されていたのだった。 そこで今回 Webpack の本質つまり Webpack がどんな問題を解決しようとしているものなのかについて整理する。また Webpack の中核となる機能をよく理解できるチュートリアルを見つけたので紹介する。 （フロントエンドエンジニア Advent Calendar 2016 - Qiita の 9日目が空いていたので、後付けだけどそこに登録した） Webpack がつくられた背
step by stepで始めるwebpack - Qiita
※webpack1系の記事です。 1→2への移行ガイドを見る限り破壊的な変更点はそんなにありませんが、preLoadersやpostLoadersがなくなっていたり、差が出ていますのでご注意ください。 https://webpack.js.org/guides/migrating/ webpackを手を動かしつつ学べる初学者向け資料を作成しました。 公式のチュートリアルもあるのですが、webpackが使用されているOSSのボイラープレートを見る限り、世の中の使われ方に沿ってないかも？と思い書きました。 これから始める人の手助けになれば幸いです。 また最終形のソースをupしてあるので詰まったら見てください。 webpackとは webpack で始めるイマドキのフロントエンド開発の説明が良かったので引用させていただきます。m(_ _)m webpack は WebApp に必要なリソースの依
webpackを使った Rails上でのReact開発 - クックパッド開発者ブログ
はじめに こんにちは、投稿開発部エンジニアの芳賀です。 既存のRailsプロジェクトの中でReact.jsを利用する機会があったので、その時にやったことについてまとめてみます。 私自身は普段RailsのサーバサイドとCoffeeScriptが中心で、最近のJavaScript開発環境についてあまりキャッチアップできていなかったのですが、それらの状況を把握しつつ試行錯誤で開発していった経験から、できるだけ「React採用してみたいけどJavaScript界隈よくわからない目線」で書いてみようと思います。 RailsでReact.jsを使ういくつかの方法 2016年時点で、RailsでReact.jsを使う方法はいくつかあって、どれを採用するかで悩みました。 vendor/assets/javascripts にreact.jsを置いて利用する react-rails gem を利用する br
webpackで作るSprockets無しのフロントエンド開発 - クラウドワークス エンジニアブログ
こんにちは！12月に子供が生まれたばかりの鈴木( @suzan2go ) です。現在は週2~3日リモートで子供の成長を片目にみつつコードを書いています。うちの子はガラピコぷ〜がお気に入りです。 さて今回はRailsでのフロントエンド開発についてです。 昨今のフロントエンドの進化はめまぐるしく、Rails標準のSprocketsというgemでJavaScriptやCSSをコンパイルする仕組みでは以下のような要望に答えられなくなってきています。*1 ECMAScript6で書きたい！ フロントエンドのライブラリ管理にnpmを使いたい！ で、上記に対応するにはおおまかに分類すると以下のような方法があります。 browserify-rails を使う github.com これが一番導入が簡単ですし、既存のRailsアプリに突っ込むならこれが選択肢としては手堅いと思います。 ただ開発中のビルドがめ
webpack.config.jsの読み方、書き方 - dackdive's blog
（2017/08/28追記） この記事は webpack v1 系での config について書かれています。 v2 系以降は一部の項目名などに変更があります。 Migrating from v1 to v2 を読んで v2 系への移行を行うか、または私のリポジトリを参考にしてください。 https://github.com/zaki-yama/react-redux-template https://github.com/zaki-yama/redux-express-template （追記ここまで） はじめに webpack を使った JS/CSS のビルドを行う場合、webpack.config.js という設定ファイルを用意してコマンド自体は webpack で済ませることがほとんどだと思いますが 公式チュートリアルでも webpack.config.js については少ししか触れ
【意訳】Webpackの混乱ポイント - Qiita
この記事はWebpack — The Confusing Partsを、筆者の許諾を得て意訳しています。 何か誤りがありましたら、ご指摘いただけると幸いです。 (以下、訳) ReactとReduxで作られたアプリケーションにとって、Webpackは最先端を行くモジュールバンドラです。Angluar2やその他のフレームワークを使っている人々は、たいへんWebpackのお世話になっていることでしょう。 私が初めてWebpackの設定ファイルを見た時、それはさながら宇宙人のようで非常にわかりづらく見えました。しばらく試しているうちに、今では次のように考えるようになりました。Webpackは単に独特のシンタックスと新しい哲学を持っており、それがとっつきにくさの原因になっているのだと。偶発的とはいえ、これらの哲学は、Webpackの人気を押し上げた原因の１つでもあります。 Webpackのとっつきに
webpack(v1)とbabelでES6コードをさくっと書く - getalog
最低限のコストで最近よく聞くいい感じのjsを書きたい時の構成をずらーっと書いてみる 準備するもの node/npm (最近はrbenvクローンのnodenvがいい感じ、操作は同じ) webpack babel .babelrc .babelrcを設置しとくとbabelのデフォルト設定がこいつの中身で書き換わる Reactを使わないなら、presetのreactはいらない export defaultされたパッケージをimportした時に.defaultで引くのを許せるなら、add-module-exportsはいらない(後述) Reactいる { "presets": [ "es2015", "stage-0", "react" ], "plugins": [ "add-module-exports" ] } いらない { "presets": [ "es2015", "stage-0"
こないだ社内の勉強会でwebpackのこととか話したのでまとめた - getalog
webpackとは いろんなファイルをtranspileしてES5のJavaScriptに変換してくれるやつ AMDかCommonJSの形式でファイルをロード(CommonJSならrequire)すると、transpileしたファイルをロードしてくれる クライアント側のjsコードでもrequireを使用することができる assetとしてビルドして配布するイメージ コードが共用の場合、設定を変えることで素のrequireを利用するサーバー用コードと、webpackがpolyfillしたrequireを利用するクライアントコードとを別々に生成できる 全てがJavaScriptになる、画像やCSSも 画像は「Base64かFilePath」に CSSは「headにstyleを挿入するjsコード」に 特定のファイルをどのようにtranspileするかはpathマッチングでプラグイン形式で設定する
webpack入門 - Qiita
React初学者のためのガイドで著者のPete Hunt氏がオススメしていたwebpack入門を和訳しました。 意訳が含まれるため、誤りやより良い表現などがあればご指摘頂けると助かります。 原文：https://github.com/petehunt/webpack-howto Webpack入門 このガイドの目的 これはwebpackで物事を成し遂げるためのクックブックです。インスタグラムで実際に使用されているものをほぼ網羅した実践的な内容となっています。 私からのアドバイス：まずはこれをwebpackの参考資料として手元に置いて始めてみましょう。公式ドキュメントは理解を深めるために後で参照することにしましょう。 前提条件 browserify、RequireJSまたは類似したものを知っていること 下記のいずれかに価値を見出していること バンドルの分割 非同期ローディング 画像やCSSの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
hirata.blog
