ライセンスコメントを出力する webpack プラグインを作りました - 備忘録β版
【2017-10-17 追記】license-pack から license-info-webpack-plugin に名称変更しました webpack でビルドした npm パッケージのライセンスをコメントとして出力する license-info-webpack-plugin というプラグインを作りました。 browserify でライセンスコメントを出力する licensify がありますが、その webpack 版プラグインのようなものです。 www.npmjs.com 特徴 package.json と LICENSE ファイルを読み取り出力 出力形式はコメント形式か別ファイル (html) webpack でビルドの際に用いられた npm パッケージの package.json を読み取り、出力するファイルの先頭にコメント形式で出力されます。 デフォルトの設定では license
webpack@4 で出力するファイルをリビジョン管理する - 30歳からのプログラミング
ここでいうリビジョン管理とは、JavaScriptファイルやスタイルシートのファイル名に、ハッシュ値などのユニークな値（リビジョン）を付与すること。 そうすることで、ブラウザが古いファイルのキャッシュを利用してしまい変更が反映されない、という事態を回避できる。 手動でファイル名を更新することも可能ではあるが、ビルドの際に自動的に付与されるようにするのが一般的。 ここでは、webpackのv4でリビジョンを付与する方法を書いていく。 この記事で出てくるライブラリについては以下のバージョンで動作確認している。 webpack@4.23.1 webpack-cli@3.1.2 html-webpack-plugin@3.2.0 css-loader@1.0.1 mini-css-extract-plugin@0.4.4 clean-webpack-plugin@0.1.19 出力するファイルにハ
webpack@4 でCSSを抽出する際は mini-css-extract-plugin を使う - 30歳からのプログラミング
この記事を読んでいて知ったのだが、CSSを抽出する目的でextract-text-webpack-pluginを使うのは非推奨になったらしい。 qiita.com github.com webpack@4では mini-css-extract-plugin というプラグインを使うことが推奨されている。 というわけで、その使い方を書いていく。 webpack でのCSSの扱いの基礎については、以前書いたこの記事を参照。 numb86-tech.hatenablog.com 本記事は以下のバージョンで動作確認している。 webpack@4.20.2 webpack-cli@3.1.2 css-loader@1.0.0 mini-css-extract-plugin@0.4.4 optimize-css-assets-webpack-plugin@5.0.1 terser-webpack-plu
webpackでCSSやSASSを使う - 30歳からのプログラミング
webpackでは、JSファイルだけでなくCSSやSASSもバンドルの対象にできる。 このエントリではその方法を書いていく。 webpackのバージョンは以下。 webpack@4.0.1 webpack-cli@2.0.9 下準備 webpackをインストール。 $ npm i -D webpack webpack-cli npm scripts。 出力されたファイルの中身を見たいので、モードはdevelopmentにしておく。 "scripts": { "build": "webpack --mode development" }, webpack.config.js。 このように書いてビルドすると、src/index.jsをエントリポイントとして、dest/bundle.jsとして出力される。 const path = require('path'); module.exports
Code Splitting | webpack
tipThis guide extends the example provided in Getting Started. Please make sure you are at least familiar with the example provided there and the Output Management chapter. Code splitting is one of the most compelling features of webpack. This feature allows you to split your code into various bundles which can then be loaded on demand or in parallel. It can be used to achieve smaller bundles and
なんとなくで理解しないWebpackのCSS周辺 - Qiita
CSS in JSに夢を見たが、なかなか一筋縄では行かなかったので1、webpackにおけるCSSと本気で向き合ってみた。 しかしまだ理解が甘いところがあったのでloader, pluginまわりの関係性を整理した。 （前置き）webpackの基礎情報 css関連の本題にはいる前に、webpackの基礎を再確認する。 Webpackの特徴 webpackの特徴的な事項として、CSSや画像など、javascriptでないデータも基本的に全てをjavascriptで扱ってしまう、という事が挙げられる。 同等の対抗として挙げられるbrowserifyやrollupは、あくまでも「javascriptのmodule解決」にフォーカスしているのに対して、webpackは全く違う方向を向いている loaderとpluginの違い 結構あやふやに扱っていたが、上記のwebpackの基本部分を明確にして考
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The need for multiple output paths? · Issue #1189 · webpack/webpack