tag:crieit.net,2005:https://crieit.net/tags/Webpack4/feed
「Webpack4」の記事 - Crieit
Crieitでタグ「Webpack4」に投稿された最近の記事
2022-08-24T23:53:31+09:00
https://crieit.net/tags/Webpack4/feed
tag:crieit.net,2005:PublicArticle/18287
2022-08-24T23:45:46+09:00
2022-08-24T23:53:31+09:00
https://crieit.net/posts/clean-dist-folder-by-webpack
【JS/Webpack】ビルドしたフォルダの不要ファイルを削除する
<p>こんにちは、しきゆらです。今回は、Webpackでビルドしたものが出力されるフォルダにできる不要ファイルを削除する方法を知ったのでメモしておきます。</p>
<p>WebpackでJSのコードをビルドしていると、結構な頻度で不要なファイルができたりします。例えば、デバッグ用に生成したソースマップファイルがそのまま残っていたり、過去に設定を変えてあるところから出力しなくなったファイルが残っていたり等、ビルド先のdistフォルダの中はごちゃごちゃしがちです。これを何とかしたいなぁ、と思って調べたら簡単に解決できました。</p>
<p>Webpackでこういうことできないかなぁと調べると大抵プラグインが出てきて追加しないといけないことが多く、今回もそのパターンでよくわからないものを追加しないといけないのかなぁ・・・と思っていたのですが、どうも標準機能として用意されているようでした。ということで結論。</p>
<h2 id="結論: outputの中に[clean: true]を追加すればよい"><a href="#%E7%B5%90%E8%AB%96%3A+output%E3%81%AE%E4%B8%AD%E3%81%AB%5Bclean%3A+true%5D%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8C%E3%81%B0%E3%82%88%E3%81%84">結論: outputの中に[clean: true]を追加すればよい</a></h2>
<p>ドキュメントを読むことは大事ですね。しっかり記載がありました。</p>
<p><a target="_blank" rel="nofollow noopener" href="https://webpack.js.org/guides/output-management/#cleaning-up-the-dist-folder">https://webpack.js.org/guides/output-management/#cleaning-up-the-dist-folder</a></p>
<p>こちらによると、ビルドしたものを置くdistフォルダの中身をビルドのたびにきれいにしたい場合はoutput.cleanオプションを使え、とあります。ただし、この方法が使えるのはWebpack5以降のみなので注意してください。</p>
<pre><code class="javascript">// webpack.config.jsの一部分
~~~~~~
output: {
filename: "output.js",
path: path.resolve(__dirname, "dist"),
clean: true // この1行を追加すればよい
}
</code></pre>
<p>はい、たったこれだけ。1行追加するだけで、ビルドのたびにdistフォルダの中身をきれいにしてくれるので、過去にビルドした残骸が残ることはなくなりました。</p>
<p>また、こちらのページには細かい設定方法もありました。</p>
<p><a target="_blank" rel="nofollow noopener" href="https://v4.webpack.js.org/guides/output-management/#cleaning-up-the-dist-folder">https://v4.webpack.js.org/guides/output-management/#cleaning-up-the-dist-folder</a></p>
<p>そして、前述の通りこの方法が使えるのはWebpack5以降のみとのことでした。Webpack4などを使っている方は、プラグインでの対応となるようです。</p>
<h2 id="Webpack4を使っている方: clean-webpack-pluginを使う"><a href="#Webpack4%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%84%E3%82%8B%E6%96%B9%3A+clean-webpack-plugin%E3%82%92%E4%BD%BF%E3%81%86">Webpack4を使っている方: clean-webpack-pluginを使う</a></h2>
<p><a target="_blank" rel="nofollow noopener" href="https://v4.webpack.js.org/guides/output-management/#cleaning-up-the-dist-folder">https://v4.webpack.js.org/guides/output-management/#cleaning-up-the-dist-folder</a></p>
<p>Webpack4版のドキュメントを見ると、同様の項目ですが対応方法が異なっていました。「clean-webpack-plugin」というプラグインを使えば削除できるので、導入・設定しましょうとのことでした。以下にドキュメントにあったサンプルを載せておきます。</p>
<pre><code class="bash"># プラグインのインストール
npm install --save-dev clean-webpack-plugin
</code></pre>
<p>webpack.config.jsはこんな感じ。</p>
<pre><code class="javascript">// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// プラグインを読み込む
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js',
},
plugins: [
new CleanWebpackPlugin(), // この行を追加する
new HtmlWebpackPlugin({
title: 'Output Management',
}),
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
},
};
</code></pre>
<p>これにより、output.pathで指定したフォルダにある不要ファイルを削除したうえでビルドしてくれるとのことでした。さらに、Webpack5では細かい設定ができましたが、clean-webpack-pluginでも似たような設定はできそうです。</p>
<p><a target="_blank" rel="nofollow noopener" href="https://www.npmjs.com/package/clean-webpack-plugin">https://www.npmjs.com/package/clean-webpack-plugin</a></p>
<h2 id="まとめ"><a href="#%E3%81%BE%E3%81%A8%E3%82%81">まとめ</a></h2>
<p>今回は、Webpackで過去にビルドした残骸をきれいに削除する方法をまとめました。不必要なプラグインを導入せずに、たった1行の設定追加だけでやりたかったことが実現できてとてもハッピーです。</p>
<p>そして、Webpack5ではデフォルトでこの機能が入っていることを知りませんでした。過去に調べたときはプラグイン対応だったよなぁと思いつつ調べると、やはりプラグインを導入しろ、という記事が多く出てきました。とりあえずググるのは大事ですが、ドキュメントをさっくりと眺めておく、というのも必要ですね。</p>
<p></p>
しきゆら
tag:crieit.net,2005:PublicArticle/15223
2019-07-11T00:15:45+09:00
2019-07-11T00:15:45+09:00
https://crieit.net/posts/Webpack4-jQuery
Webpack4 ビルドするフロントエンド環境で jQuery に依存したライブラリを使う
<p>バックエンドにPython3+bottle, フロントエンドにJavascript+jQueryを使って個人Webサービスを開発しています。<br />
(いまだに jQuery なん? というツッコミは甘んじて総受けいたします…)</p>
<p>GUI を作り込んでいくにあたり、型安全の安心に包まれて開発したいので Typescript への移行を目論んでいます。<br />
ついでに Javascript のモジュールの仕組もモダンな ES Modules を導入したかったので、ビルドツールとして <a target="_blank" rel="nofollow noopener" href="https://webpack.js.org/">Webpack4</a> を導入しました。</p>
<p>現在は <code><script></code> タグで多数の Javascript を読込み、グローバルな変数や関数が散在しているのを整理しながら、ES Modules 方式に直している所です。<br />
jQuery を使用している箇所では、</p>
<pre><code class="javascript">import $ from 'jquery';
</code></pre>
<p>のように先頭に書いておけば、<code>$("#code")</code> のような書式はそのまま ES Module 環境でも動作します。</p>
<p>ところが、テキスト編集に <a target="_blank" rel="nofollow noopener" href="https://github.com/NicolasCARPi/jquery_jeditable">jQuery-jeditable</a> プラグインを使用していた箇所の修正でつまづいてしまいました。<br />
このプラグイン自体は npm にあるのでインストール自体はすんなりできましたが、</p>
<pre><code class="bash">> npm install --save-dev jquery-jeditable
</code></pre>
<p>実行中に jQuery が参照できない、というエラーが出てしいましました。ライブラリの中なので、↑の import 文を追記することもできません。(直接 node_modules ディレクトリ以下のソースを書き換える事はできますが、npm 管理に任せておきたいのでやりたくはありません)</p>
<p>結論としては、Qiita 記事「<a target="_blank" rel="nofollow noopener" href="https://qiita.com/soarflat/items/28bf799f7e0335b68186">webpack 4 入門</a>」Webpack4 公式サイト内の「<a target="_blank" rel="nofollow noopener" href="https://webpack.js.org/plugins/provide-plugin/">ProvidePlugin | webpack</a>」を参考に、以下のように <code>webpack.config.js</code> を修正することで解消しました。</p>
<pre><code class="javascript">module.exports = {
:
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
],
:
};
</code></pre>
<p>これにより、Webpack4 でビルドする全ての Javascript ファイルに対して、<code>$</code>, <code>jQuery</code> 双方の変数が使えるように効にできるため、node_modules 以下にある jQuery-jeditable からも参照できるようです。</p>
<p>…こんなんで悩むくらいなら「ヘイYou、Vue.js とか使っちゃいなYo!」ですか? そうですね、そう遠くない将来は私もそうしたいと考えています。(もくもく会でもいろんな方からこうしたアドバイスを頂きます…)<br />
しかし、jQuery から Vue.js への移行というのは個人的に移行しづらい障壁があると思っています。</p>
<p>それは、移行する技術が2つあることです。1つはフレームワーク(ライブラリ)自身、もう1つはビルド環境です。<br />
HTML から <code><script></code> タグで Javascript を読み込むだけだった牧歌的なあの頃から、Webpack4 を使ったモダンなビルド環境へ移行するのは自分にとって簡単ではありませんでした。(ビルドツールだけでも色々あるので、どれに移行すべきかも当初は見えていませんでした)</p>
<p>こうした状況では、開発経験が豊富なあなたならきっと内なる心のささやきが聞こえるはず。</p>
<pre><code class="text">「複数の技術を同時に移行しようとすると、路頭に迷う」
</code></pre>
<p>未知の用語や設定を見かけた時に、どちらの技術に由来するのかが不明なため、ドキュメントを読む手間が倍増します。<br />
何かトラブルが起きた時に、どちらの技術に関わるものか、切り分けが困難になります。</p>
<p>多少なりともコード資産がある状況では、段階を踏んだ移行により心理的な安全を確保しながら進むのが大事だと思っています。</p>
ともたこ