dackdive's blog

新米webエンジニアによる技術ブログ。JavaScript(React), Salesforce, Python など

webpack

LDSとdesign-system-reactをBabel&webpackな環境に導入する

メモ。 ちょっと前から Lightning Design System(LDS)の React 実装が公式から出てます。 Lightning Design System for React で、ようやく入れてみようとドキュメントを頼りにやってみたところ色々手こずったので、手順をまとめておきます。 はじめに des…

thread-loaderとcache-loaderでwebpackのビルドを高速化する

はじめに こちらのスライドを見て。 Webpackのビルド時間を1/3にした話 #gotandajs // Speaker Deck 紹介されている thread-loader も cache-loader も知らなかった!ので、使い方やどういった効果があるのか自分でも調べてみます。 なお、スライド中にもあ…

webpack 3 リリース内容まとめ

2系に上げるかどうかを悩んでいる間に 3.0.0 がリリースされてしまった。 を参考にアップデート内容をメモ。 概要、v2 からのマイグレーション 大きな feature は Scope Hoisting と Magic Comment ぐらい。 v2 からの移行も特別な作業は必要なく、たいてい…

webpack-dev-serverをExpressに組み込んで使う(webpack-dev-middleware, webpack-hot-middleware)

はじめに 1年以上前ですがこんな記事を書きました。 このときは webpack-dev-server をスタンドアロンなサーバーとして使う方法しか知らなかったのですが 既存の Express アプリに組み込んで使うこともできます。 そのためには webpack-dev-middleware およ…

webpack+ES2015でGoogle Apps Scriptローカル開発するためのテンプレート作った

gapps を使って Google Apps Script をローカルで開発するための方法については 以前 Qiita に書いた し、それにより ES2015 や TypeScript で書いて手元でビルド、みたいなことはみんなやるようになったんだけど webpack を使った構成が探してもあまり見つ…

webpackでReact/Reduxを本番環境用にビルド(production build)する

はじめに React に限らず、JavaScript を使ってると本番環境用のビルド(以後、production build)として圧縮や難読化を行う必要があります。 webpack にはそのためのプラグインとして UglifyJsPlugin があるのは知っていましたが、 単純にこのプラグインを…

webpack2でTree Shaking以外に何ができるようになったのかメモ

メモ。 webpack 2 正式リリース(バージョンは 2.2)だとか Tree Shaking という機能がいいらしい とかは目にしていたけど 結局 v1 -> v2 とメジャーバージョンが上がって Tree Shaking 以外に何が変わったの?というのがよくわからなかったので調べてみた。…

webpack-dev-serverの基本的な使い方とポイント

はじめに (2017/08/10追記) この記事では webpack-dev-server を独立したサーバーとして使う場合の方法です。 また webpack 1 系の情報になっており少々古いです。 最新の設定についてはこちらの GitHub リポジトリを参考にしてください。 https://github.…

webpack.config.jsの読み方、書き方

(2017/08/28追記) この記事は webpack v1 系での config について書かれています。 v2 系以降は一部の項目名などに変更があります。 Migrating from v1 to v2 を読んで v2 系への移行を行うか、または私のリポジトリを参考にしてください。 https://github…