Webpackのtree shakingと副作用のあるimport
副作用のあるimportとは、import対象のモジュール(ファイル)を読み込んだタイミングで何かしらの処理が実行されることです。
例えば以下は、hoge.jsを読んだタイミングでコンソールにhogehogeが出力されます ...
5分で作る React ⁺ webpack の本当にシンプルな構成
実用性はないですが、React + webpack の最小の構成を5分で作成します。
※ホットリロードは設定しないので、React のコードを変更するたびにビルドコマンドを手動実行する必要があります。
手順プロジェク ...
webpackでビルドされたファイルにスタイルが反映されていないときに確認する点
css-loaderを使ってJS内のCSSを解決しているにもかかわらず、ブラウザで確認するとそのCSSが反映されていない場合には、まずビルドされたファイルの中に対象のCSSがあるかを確認します。
なかった場合は、style ...
webpackのprogressオプションについて[覚書]
webpackコマンドのprogressオプションを有効にすることで、ビルド時の進捗状況をコンソールに出力します。
公式ドキュメントはこちら
有効にした場合は、ビルド時に以下のような出力が得られます。
4 ...
フロントエンジニア入門 webpack-dev-server を使って便利な開発環境を作る
ある程度HTMLやJavaScriptについては学習できたが、実際の現場でどのような開発環境が使われているのか知らない、より実践的な開発を知ってスキルアップしたい、という方におすすめです。
webpack ...
webpack 入門 全体像をみるためのちょっとしたおさらい
前回に引き続き webpack 入門です。
今回はこれまでのおさらいも兼ねて全体像をみたいと思います。
webpack は、フロントエンドで必要なファイルの依存関係をみて、それらをバンドルしてくれるツールです。 ...
webpack 入門 設定ファイルに entry を設定してみよう
前回に引き続き webpack の入門です。
今回は以前少し登場した entry オプションを設定ファイルに記述します。
entry を設定するまず index.js を app.js などに名前を変更します。 ...
webpack 入門 設定ファイルを使ってみよう
前回に引き続き webpack 入門です。
今回は設定ファイルの webpack.config.js について触れます。
webpack.config.js とはこれまでは、webpack のオプションをコマン ...
webpack 入門 複数ファイルをバンドルしてみよう
前回に引き続き webpack の入門です。
今回は、複数ファイルを一つにバンドルする方法をみていきます。
二つの javascript ファイルを一つに束ねるフロントエンドの開発において、javascript ...
webpack 入門 導入と基本的な使い方
フロントエンドの開発をしていると、html, css, javascript, jpg ファイルなどいろいろなファイルを作成します。
そして、それらが複雑に組み合わさって動くことになります。