GitHub - privatenumber/esbuild-loader: 💠 Speed up your Webpack with esbuild ⚡️You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
webpack 4 の optimization.splitChunks の使い方、使い所 〜廃止された CommonsChunkPlugin から移行する〜 - Qiita
はじめに 先日リリースされたwebpack 4でCommonsChunkPluginは廃止されました（CommonsChunkPluginの解説はこちら）。 その代わりとした追加されたoptimization.splitChunksの基本的な使い方、使い所に関しての記事です。 optimization.splitChunksを利用すればサイトパフォーマンスの改善（詳細は後述）ができるため、利用する機会が多い設定（機能）です。 解説に利用しているコードの最終形態はGitHub上にあります。 hira777/webpack-split-chunks-example webpackを理解していることを前提とした記事ですので、基礎知識を習得したい方はwebpack 4入門をご覧ください。 optimization.splitChunksとは 「複数のエントリーポイント間で利用している共通モジュール
webpack@4のmodeとminimize(UglifyJS) - 30歳からのプログラミング
webpackではv4から、modeというオプションが追加された。 それに伴いminimize（コードの圧縮）の設定の仕組みも変わったので、それについても書いていく。 以下のライブラリのバージョンで動作確認している。 webpack@4.1.0 webpack-cli@2.0.10 uglifyjs-webpack-plugin@1.2.2 license-info-webpack-plugin@1.0.0 react@16.2.0 2種類のmode modeは、productionとdevelopmentの2種類。 以下のように、webpackを実行する際に引数として渡すことで、設定できる。 "scripts": { "build": "webpack --mode production", "develop": "webpack --mode development" }, modeを
webpackのrequire.ensureでDynamic Loadingをして大規模アプリケーションを作る - Qiita
大規模アプリケーションを運営するときに、最初にすべてconcatしたファイルをいっぺんに読み込むと膨大なコード量が読み込まれてしまうので、各ルーティングごとに分けて必要のあるときにだけJSを読み込みたいケースがあります。 従来はRequireJSを使えば解決できる話だけど、最近ではwebpackやbrowserifyを使うケースのほうが増えてきたきて併用なんて絶対したくないと思います。なのでwebpackを使った大規模サイト運営におけるDynamic Loading方法をここに書き置いておきます。（知ってる方にはしょうもない話ですが間違ってたら注意してもらえれば助かります。） require.ensureでjsファイルを後から読み込む
【意訳】Webpackの混乱ポイント - Qiita
この記事はWebpack — The Confusing Partsを、筆者の許諾を得て意訳しています。 何か誤りがありましたら、ご指摘いただけると幸いです。 (以下、訳) ReactとReduxで作られたアプリケーションにとって、Webpackは最先端を行くモジュールバンドラです。Angluar2やその他のフレームワークを使っている人々は、たいへんWebpackのお世話になっていることでしょう。 私が初めてWebpackの設定ファイルを見た時、それはさながら宇宙人のようで非常にわかりづらく見えました。しばらく試しているうちに、今では次のように考えるようになりました。Webpackは単に独特のシンタックスと新しい哲学を持っており、それがとっつきにくさの原因になっているのだと。偶発的とはいえ、これらの哲学は、Webpackの人気を押し上げた原因の１つでもあります。 Webpackのとっつきに
Webpack.config how to just copy the index.html to the dist folder
I am trying to automate assets going into /dist. I have the following config.js: module.exports = { context: __dirname + "/lib", entry: { main: [ "./baa.ts" ] }, output: { path: __dirname + "/dist", filename: "foo.js" }, devtool: "source-map", module: { loaders: [ { test: /\.ts$/, loader: 'awesome-typescript-loader' }, { test: /\.css$/, loader: "style-loader!css-loader" } ] }, resolve: { // you ca
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 については少ししか触れ
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-dev-serverの基本的な使い方とポイント - dackdive's blog
はじめに （2017/08/10追記） この記事では webpack-dev-server を独立したサーバーとして使う場合の方法です。 また webpack 1 系の情報になっており少々古いです。 最新の設定についてはこちらの GitHub リポジトリを参考にしてください。 https://github.com/zaki-yama/redux-express-template （追記ここまで） JavaScript のビルドに webpack を使っている場合、ローカルでの開発には webpack-dev-server を使うと便利です。 通常の webpack コマンドも --watch （または -w）オプションつきで実行することにより ファイルの変更を検知して自動でリビルドを行うことが可能ですが、 webpack-dev-server は上記に加えて ローカルサーバーも起動してくれ
こないだ社内の勉強会で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
webpack とは webpack は WebApp に必要なリソースの依存関係を解決し、アセット（配布物）を生成するビルドツール（要するにコンパイラ）です。JavaScript だけでなく、CoffeeScript や TypeScript、CSS 系、画像ファイルなどを扱うことができます。 WebApp のビルドツールは Grunt や Gulp が有名です。これらは基本的に、ビルド手順をタスクという形で自ら定義する必要があり、フロントエンド開発に馴染みのない開発者にとっては敷居が高いものでした（少なくとも、自分はそうでした）。 webpack を使えば、Grunt も Gulp も必要ありません！覚えるべきことはほとんどありません。（必要なら）簡単な設定ファイルを書いて webpack コマンドを実行するだけです。 以下では基本的な使い方を見ていきます。 ※もちろん Grunt/G
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webpackのビルド時間を1/3にした話 #gotandajs