タグ

関連タグで絞り込む (2)

タグの絞り込みを解除

webpackに関するzonomuroのブックマーク (6)

  • 俺の 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.config.js-20200503 - mizchi's blog
  • 最新版で学ぶwebpack 5入門 - JavaScriptのモジュールバンドラ - ICS MEDIA

    webpack(ウェブパック)とはJSファイルをまとめる高機能なモジュールバンドラー。まとめることでウェブページのHTTPリクエストの数を減らしたり、高度なウェブアプリケーションの開発に役立ちます。 連載ではTypeScriptやBabelなどのES2015+の環境構築、ReactなどのJSライブラリの設定方法を網羅。サンプルファイルで詳しく解説します。 webpackの入門記事は他のサイトにもありますが、対象バージョンが古くて使えなかったりします。検索結果の上位の野良記事を参照にしたら古いバージョンの内容ばかり。解説記事通りにやったのにうまく動かない・・・なんて困った方も多いのではないでしょうか。記事は常に最新版に対応させているので、安心して読み進めてください。 ※記事では2023年3月現在のwebpack 5(2020年10月リリース)以上で解説しています。 記事で解説しているこ

    最新版で学ぶwebpack 5入門 - JavaScriptのモジュールバンドラ - ICS MEDIA
  • 最新版で学ぶwebpack 4入門 – JavaScript開発で人気のバンドルツール - ICS MEDIA

    webpack(ウェブパック)とはJSファイルをまとめる高機能なモジュールバンドラー。まとめることでウェブページのHTTPリクエストの数を減らしたり、高度なウェブアプリケーションの開発に役立ちます。 連載ではTypeScriptやBabelなどのES2015+の環境構築、ReactなどのJSライブラリの設定方法を網羅。サンプルファイルで詳しく解説します。 webpackの入門記事は他のサイトにもありますが、対象バージョンが古くて使えなかったりします。検索結果の上位の野良記事を参照にしたら古いバージョンの内容ばかり。解説記事通りにやったのにうまく動かない・・・なんて困った方も多いのではないでしょうか。記事は常に最新版に対応させているので、安心して読み進めてください。 ※記事では2023年3月現在のwebpack 5(2020年10月リリース)以上で解説しています。 記事で解説しているこ

    最新版で学ぶwebpack 4入門 – JavaScript開発で人気のバンドルツール - ICS MEDIA
  • 【2019年版】webpack 4 個人的設定まとめ – expexp.jp

    2019.02.052021.03.09 webpackで開発を行ってきましたが、導入当初から仕様が変わったり、個人的な設定方法が固まってきたので一旦記事としてまとめます。 ちなみに以前の記事はこちらです。Babelをはじめ、CSS/SASSのバンドル、さらにファイルを分ける設定までを紹介しています(記事でも同様の内容を紹介)。 今回はwebpackによる環境構築から、JS/CSSファイルの出力、さらにHTMLwebpackから出力する方法を紹介します。環境はMac、node v10.15.1、npm 6.7.0、webpackのバージョンは4.29以上で進めます(近頃、開発中のwebpack 5の話題を見かける。4の記事を書くのもそろそろ終わりかな)。 目次環境構築ベーシックな設定ファイルを監視する設定JavaScriptをまとめる設定JavaScriptをBabelでトランスパイル

    【2019年版】webpack 4 個人的設定まとめ – expexp.jp
  • ブラウザとnode.jsに両対応したライブラリを作りたいときのWebpackレシピ集 - Qiita

    概要 Webpackを使ってNode.jsとブラウザに両対応したライブラリを作るときのレシピ集です いろいろなレシピを見てWebpackによるライブラリ生成の挙動を理解することを目的としています ブラウザにもNode.jsにも両対応したライブラリを作りたい ブラウザとNode.jsに両対応したいとおもったとき、 両方同時に対応した1つのバンドルjsを作る【統合型】と、 ブラウザ用、Node.js用と別々にライブラリを出し分ける【出し分け型】の2パターンある。 稿では主に【統合型】について説明する ライブラリのビルドに関するWebpack設定項目 レシピ集に行く前に、 まず、ライブラリのビルドに関する設定項目をざっくりみていく。 webpack.config.js 以下のような典型的なwebpack.config.jsの中でoutput以下の項目でライブラリ生成のためのパラメータを決める。

    ブラウザとnode.jsに両対応したライブラリを作りたいときのWebpackレシピ集 - Qiita
  • 面倒なJavaScriptコードのとりまとめがこれ1つで可能に、「webpack」入門 | さくらのナレッジ

    最近JavaScript関連の開発で採用が進んでいる「webpack」は、JavaScriptファイルの変換や結合といった操作をコマンド1つで実行できるツールだ。記事では、webpackとは何かという基的な概念から導入方法、実際の利用例などを紹介する。 モジュール管理機構の不足や未サポート機能の問題をツールで解決する「webpack」 今日のWeb開発においてJavaScriptの利用は避けることができないが、JavaScriptのソースコードをどのように管理・デプロイすべきかという問題に対しては、まだ決定的な解決策が生まれていない状況が続いている。その根的な原因の1つには、最近までJavaScriptにおいて普遍的に利用できるモジュール管理システムが存在しなかったことがある。 一般的なプログラミング言語では、大規模なプログラムを実装する際に作業性やメンテナンス性を高めるためプログラ

    面倒なJavaScriptコードのとりまとめがこれ1つで可能に、「webpack」入門 | さくらのナレッジ
  • 1