俺の webpack.config.js-20200503 - mizchi's blog
基本思想 とにかく薄く。必要なものだけ。基本は ts-loader を transpileOnly: true で使うだけ。最悪これだけでいい。型チェックはIDEか yarn tsc -p . --noEmit でやる。 CRA や parcel は使わない。暗黙な振る舞いが多すぎるので。一切勉強したくない人はいれていいと思うが、その場合 eject しない、dist ディレクトリをそのまま使うこと前提。 style-loader/css-loader は外部CSSを読むときに設定する worker-plugin はなくてもいいけど、 worker もビルドしたいことが多いので、入れていることが多い html-webpack-plugin と webpack-dev-server 組み合わせると、他と組み合わせずに完結して動く。このHTMLを本番で使わずとも、デバッグで使ってることが多いの
Webpack Additional Compilation Pass | Tan Li Hau
The problem The 1st approach Updated Feb 27, 2020 The 2nd approach Updated Feb 27, 2020 The 3rd approach Closing Notes Updated Feb 27, 2020 Recently, I was working on a server-side rendering application, and encounter a scenario that I think it requires "double compilation" with webpack. The problem I am not entirely sure I am doing it in the right approach, feel free to suggest or discuss it with
Snowpack で実現する未来のフロントエンド開発 - Qiita
Web アプリケーション開発において TypeScript で型付けをして、 React, Vue, Angular などのフレームワークでビューを作り、 Webpack でバンドルする、という構成が当たり前のようになってから久しいですね。 フロントエンドアプリケーションの設計は洗練され、我々はまあまあ安全かつ開発しやすい環境でアプリケーションを作れるようになりました。 ところでみなさんはその開発環境の構築にどれだけのコストをかけていますか？ 新規プロダクトを作るたびに最適な Webpack の設定ファイルを作るために苦心して、気づけばその肉体にゴリゴリのウェブパッ筋を宿していませんか？ 賢い人はスターターボイラープレート的なものを自分で用意しているかもしれません。 だけどそれも頻繁な依存ライブラリのアップデートに合わせるために常にメンテナンスが必要となります。カビの生えないボイラープレー
Webpackで始めるVue.js | log.pocka.io
まえがき この記事は Webpack を使って単一ファイルコンポーネント(Single File Component)の Vue アプリケーションを作るチュートリアルです。 公式の日本語ドキュメントはかなりしっかりしています。 しかし、vue-cli を使わない通常の開発フローに沿ったチュートリアルや、単一ファイルコンポーネントの使い方等、実際に使うにあたって必要な情報がかなり少ないです。 本記事ではその部分のカバーをすることを目的とします。 対象読者は フロントエンド開発の知識がある(JS や CSS のコンパイル等) npm を用いた開発フローをある程度知っている Vue.js の名前くらいは知っている 最近の Javascript がある程度書ける くらいの人を想定しています。 つくるもの このチュートリアルでは、Vue.js を使ったカウンターアプリを作ります。 JS ファイルのビ
How can I run multiple npm scripts in parallel?
In my package.json I have these two scripts: "scripts": { "start-watch": "nodemon run-babel index.js", "wp-server": "webpack-dev-server", } I have to run these 2 scripts in parallel everytime I start developing in Node.js. The first thing I thought of was adding a third script like this: "dev": "npm run start-watch && npm run wp-server" ... but that will wait for start-watch to finish before runni
Nuxtベースで静的・Wordpress共用の開発環境を整えました - Qiita
19/06/13 追記 その後、実環境で使用していくつか改善したので、編集加えました そして大したものでもないのですが、せっかくなのでgitでファイル公開しました https://github.com/webiscuit/Boilerplate-Nuxt-Wordpress 20/01/24 追記 ↓REST APIなどを使用しないライトな構造です。 なんだかんだ受託案件などで急にREST API導入は難しい場合にご参考になれば こんにちは、はじめまして フリーランスでフロントエンドデベロッパーをしています。 普段は静的サイトのHTML,CSS,JavaScriptコーディング、WordPressテーマの開発なんかやっていることが多いです。 Qiitaは以前から使ってたのですが見る専でしたが 最近、開発環境を見直して整え直したので、せっかくなので備忘録も兼ねてシェアさせていただきます✨ ゴ
Nuxt.jsのbundleサイズを55%削減したwebpack周りの小技 - Qiita
// import _ from 'lodash' import escape from 'lodash/escape' export default function (string) { // ... return escape(string) } これでbundleされるのはescape関数のみとなります。lodashはgzippedのものでも25kbほどあるため、きちんと気をつけておきましょう。 2. Vuetifyのa-la-carte（110kb→20kb） VueのマテリアルUIフレームワークといえばVuetify.jsが人気でわたしもお世話になっています。 しかしそのままVue.use(Vuetify)のようにしてしまうと、Vuetifyの全てのコンポーネントなどがbundleされてしまいます。 そこでa-la-carte（フランス語で、メニューから選んだ/お好みの料理の、
webpack4でReact16のSSR（サーバサイドレンダリング）をする - Qiita
Webpack4でReact16のSSR（サーバサイドレンダリング）する webpack4になり、ビルド速度の大幅改善や developmentモードとproductionモードのサポートがされました。 productionモードでビルド時はいくつかの最適化plugin不要でコードサイズの圧縮などをやってくれたりします。 さらに、splitChunksのoptimize設定をすることでwebpackの設定レベルでCodeSplitを行ってくれます。 webpack 4: released today!! 最新版で学ぶwebpack 4入門 – JS開発のモジュールバンドラ webpack 4 as a zero configuration module bundler 今回はwebpack4でReactJS16+Redux+ReactRouter+MaterialUIのSSRをやってみます
webpackとBabelの基本を理解する(1) ―webpack編― - Qiita
独学の内容をまとめたものです。誤りがございましたら、ご連絡いただけると幸いです。 リンク 1. webpackとBabelの基本を理解する(1) ―webpack編―（本記事） 2. webpackとBabelの基本を理解する(2) ―Babel編― 3. webpackとBabelの基本を理解する(3) ―webpackとBabel編― 4. webpackとBabelの基本を理解する(4) ―React編― 5. webpackとBabelの基本を理解する(5) ―Sass編― 概要 この記事の概要 目的 フロントエンドの環境構築に利用されるツールへの理解を深める 本記事のゴール webpackでJSファイルを結合する方法を知る 対象者 WEBフロント担当者 HTML,CSS,JavaScript(es2015含む)の基本的な構文を理解している人 npmの利用方法を理解している人 環境
webpack3でbabelとscssを別々のエントリーポイントからコンパイルする方法 - Qiita
こんにちは。初投稿です。 gulpを卒業し、webpackオンリーの開発環境を作りたいと思っている見習いフロントエンドエンジニアです。 本題 babelとscssは別エントリーポイントで、 babelはbabel、scssはscssのファイルのままコンパイルし、 それぞれをjs, cssファイルに書き出すような最低限の設定内容です。 色々調査しても、エントリーポイント1つで、jsオンリーでやっていたり、 webpack2以下の記事しか発見できなかったりだったので書いてみました。 エントリーポイントは1つの方がきれいなんだろうなと思いつつ・・・ 需要があれば、幸いですm(-ω-)m 入門的な内容だと思いますので、ツッコミどころあればバシバシお願いします。 パッケージインストール npm i -D webpack babel-core babel-loader babel-preset-env
最新版で学ぶwebpack 5入門 - スタイルシート(CSS/Sass)を取り込む方法 - ICS MEDIA
ウェブのフロントエンドエンジニア開発で人気を集めるモジュールバンドラーのwebpack（ウェブパック）。webpackにはJavaScriptファイルのバンドルだけではなく、スタイルシート（CSSやSass）のバンドルもできます。ICS MEDIAの記事「最新版で学ぶwebpack入門」では、webpackの基本的な使い方を解説しましたが、この記事ではスタイルシートに焦点をあてて解説します。 ※webpackを利用するには事前にNode.jsをインストールしておいてください。この記事では2021年5月現在最新のNode.js v14、npm 7と、webpack 5をもとに解説しています。 この記事で説明していること CSSをバンドルする利点 CSSのバンドル方法 Sassのバンドル方法 Sass内の画像もバンドルする方法 容量の閾値で画像のバンドルを制御する方法 PostCSS(Auto
簡単な Webpack loader をいくつか書いて Webpack と仲良くなる
2018/12/08 00:00:00 JavaScript2 Advent Calendar 2018 - Qiita 8 日目のエントリーです。 このエントリーは Webpack 4.26.1 を基準に書かれました。このエントリー用に書いたコードは mmmpa/create-webpack-loader-practice にあります。 序 Webpack の設定の複雑さには毎回目が回ります。ある目的があってその目的に合う設定を見つけられればコピペで済みますが、それに loader を加えたくなった途端に複雑さが襲ってくるような印象があります。 基本的に Webpack loader はあるファイルを加工して別の状態にするのが主な作用なので、ひとつひとつの働きは把握しやすいはずです。そこで簡単な loader をつくりつつ loader 何ができるのかを見ていきたいと思います。 基本的な
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - wasm-tool/emscripten: Emscripten loader for webpack
Prefetch, Preload- Take control from webpack
Workbox Broadcast Cache Update | Workbox | Google Developers
webpack "--watch" vs "--hot" : what's the difference?
Webpack 4 babel-loader config
Multiple entry points -> multiple html outputs? · Issue #218 · jantimon/html-webpack-plugin
https://o296.com/e/%E7%B0%A1%E5%8D%98%E3%81%AAWebpackplugin%E3%82%92%E4%BD%9C%E6%88%90%E3%81%97%E3%81%A6Webpack%E3%81%A8%E4%BB%B2%E8%89%AF%E3%81%8F%E3%81%AA%E3%82%8B(%E3%83%93%E3%83%AB%E3%83%89%E6%99%82%E6%83%85%E5%A0%B1%E3%82%92console.log%E3%81%AB%E8%A1