webpackの次のバージョンで入るassetModulesの紹介 - hiroppy's site
この機能が導入されることにより、{raw/file/url}-loader が不要となります。 webpack@4 でも使えますが、まだ実験的フェーズです。 Documentation Asset Modules | webpack webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, ... モジュールタイプと以前との対応表 asset/resource -> file-loader asset/inline -> url-loader asset/source -> raw-loader asset -> asset/resourceとasset/inlineを自動選択する(閾値: 8kb) 使い方 実験フラグをオンにする。 // webpa
webpackでnpmでないCDNのライブラリを読み込んでESLint対応 - Qiita
最初に結論から 現時点で僕が考えるベストプラクティスはこの組み合わせ。 CDNのURLはwebpackからうまく指定できないので、HTML側の<script>タグ内に書く webpack.config.jsでexternalsを使ってHTML側のモジュールを利用 アプリ側のJSコードでimportする eslint-import-resolver-webpackを使ってESLintにwebpackの設定を認識させる 具体例（コード抜粋) Google API Client Library for JavaScriptをCDNで使う場合の例です。 eslint-plugin-importを使っていない場合 これがwebpackのオーソドックスな方法 externalsで外部にgapiが存在することを教えてあげると、 アプリ側のJSコードでimportすることができます。 https://we
【意訳】Webpackの混乱ポイント - Qiita
この記事はWebpack — The Confusing Partsを、筆者の許諾を得て意訳しています。 何か誤りがありましたら、ご指摘いただけると幸いです。 (以下、訳) ReactとReduxで作られたアプリケーションにとって、Webpackは最先端を行くモジュールバンドラです。Angluar2やその他のフレームワークを使っている人々は、たいへんWebpackのお世話になっていることでしょう。 私が初めてWebpackの設定ファイルを見た時、それはさながら宇宙人のようで非常にわかりづらく見えました。しばらく試しているうちに、今では次のように考えるようになりました。Webpackは単に独特のシンタックスと新しい哲学を持っており、それがとっつきにくさの原因になっているのだと。偶発的とはいえ、これらの哲学は、Webpackの人気を押し上げた原因の１つでもあります。 Webpackのとっつきに
Webpack4でFont-awesomeを利用する - Qiita
Webpack4を使ってFont-awesomeを利用する 通常であればCDNを使って済みますが、Webサーバーにホスティングして公開したい人も多いはずです。 ダウンロードしたFontsディレクトリやCSSなどを手動でコピーすれば使えますが、Webpackを使っていると、自動でnode_modulesディレクトリから取得してうまい具合に配置してほしいと願うものです。 以下、Font-awesome用のプラグイン等は使わずに、シンプルにFont-awesomeを利用する方法です。 0.前提 NPMを利用して次のパッケージをインストール済みとします。 また、今回はFont-awesome系のファイルをJSにはバンドルせず、FontディレクトリやCSSを別ファイルにする分ける方法をとっています。 "webpack": "^4.29.0", "webpack-cli": "^3.2.1", "@f
Webpack の考え方について - mizchi's blog
なぜ初心者は webpackが解らないのか？- Why can’t you understand the webpack? - from 健人 井関 www.slideshare.net この記事バズってたけど、わからない人がよりわからなくなる、という点で問題だと思っていて、webpack の目的の本質的な部分から整理する必要があると思います。 (あと友人が webpack に挑戦していたので入門資料も兼ねてる) Webpack の本質的な部分は次の3つです。それ以外は全部おまけ機能だと思ってよいです。 ES Modules のエミュレート node_modules のリンカ 拡張子ごとの変形 Webpack が本当にやりたいこと こういうコードがあるとします。 // src/a.js export default () => console.log('hello'); // src/in
webpack 4 の optimization.splitChunks の使い方、使い所 〜廃止された CommonsChunkPlugin から移行する〜 - Qiita
webpack 4 の optimization.splitChunks の使い方、使い所 〜廃止された CommonsChunkPlugin から移行する〜JavaScriptwebpack はじめに 先日リリースされたwebpack 4でCommonsChunkPluginは廃止されました（CommonsChunkPluginの解説はこちら）。 その代わりとした追加されたoptimization.splitChunksの基本的な使い方、使い所に関しての記事です。 optimization.splitChunksを利用すればサイトパフォーマンスの改善（詳細は後述）ができるため、利用する機会が多い設定（機能）です。 解説に利用しているコードの最終形態はGitHub上にあります。 hira777/webpack-split-chunks-example webpackを理解していることを前提
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
