という要望があると思うんですよ。でも、調べても全然いい感じの回答がなかったので書く。

やりたいこと


例えば「node_modules配下のjquery.min.jsをビルド時にdistにそのまま出力したい」みたいなのあると思うんですよ。要するに公式が既にminifyして配布してるやつをそのままnode_modules配下から持ってきて出力みたいなやつ。

結論


先に結論を書くとcopy-webpack-pluginを使えばいいです。

環境


以下の環境でやりました。

  • webpack: 4.35.0
  • webpack-cli: 3.3.4
  • copy-webpack-plugin: 5.0.3
  • uglifyjs-webpack-plugin: 2.1.3

webpackのminify & uglifyについて


webpackは4系からproductionモードだとデフォルトでminify & uglifyするようになってるらしい[1]のですが、それを細かくコントロールするのがuglifyjs-webpack-pluginというやつらしい[1:1]です。

uglifyjs-webpack-pluginのexcludeについて


これもよくわからないのですが、どうもドキュメント通りに下記のように指定(stringもダメだった)してもなぜか除外されずにminify & uglifyされてしまいます。

1
2
3
4
5
6
7
8
9
10
11
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
optimization: {
minimizer: [
new UglifyJsPlugin({
exclude: /\/node_modules/,
}),
],
},
};

よくわからんのでとりあえずGitHubで検索してみるとなんかいろいろ読むと本当に解決できてるのかどうかよくわからん感じのIssueがいくつかあるので、早々に別のアプローチを探すことにしました。

コピーするという発想


そもそも、もともとやりたいことを考えると「そうこれはコピーですよ。除外じゃない。コピーだ。我々がやりたいのは…」ということで探したら前述のcopy-webpack-pluginがあったわけですね。というわけで、ドキュメントを参考にして下記のように書きます。

1
2
3
4
5
6
7
8
9
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
plugins: [
new CopyPlugin([
{ from: './node_modules/hoge/hoge.min.js', to: './dist/hoge/hoge.min.js' },
]),
],
};

以上。

感想


こういうバンドル系ツール、技術発展の途上で必要なのは理解できるんですが「やっぱりあんまし好きになれないよなぁぁぁ…[2]」と改めて思いました。


  1. 「らしいらしい」書きまくってるのは私が片手間フロントエンドIT事務員おじさんだからであって、よくわからないのでらしいと書いてます。 ↩︎ ↩︎

  2. バンドル系に限らずフロント全般的にもそうなんですが ↩︎