発生した問題
vueコンポーネント(SFC)を作成し、webpack v4でproductionビルドするとstyleタグの情報が消えてしまう問題が生じた。
原因
package.jsonで sideEffects: false を定義していた。
これによりvueコンポーネントのstyleタグがtree shakingされてしまっていた。
以下、参考にしたもの。
以下詳細。
vue-style-loaderはwebpackのloaderとしてpitch関数を呼び出し、vueのcontentのstyle情報をhtmlに書き加える以下のようなscriptを生成する。そしてscriptをbuildされたコードの中に用意する。すると、bundleしたjsがロードされたタイミングでstyleタグがhtmlに書き加えられる仕組みになっている。
'var add = require(' + addStylesClientPath + ').default',
'var update = add(' + id + ', content, ' + isProduction + ', ' + JSON.stringify(options) + ');'
https://github.com/vuejs/vue-style-loader/blob/master/index.js#L58-L59
しかし、このコード自体は他のjsから依存していない。つまり呼び出されないコードだと判断されてしまうため、tree shakingされてしまうものと考えられる。
対策
本質的な解決策ではないが、sideEffectsでvueに副作用があることを示しておくことでtree shakingの対象にはならない。
"sideEffects": [
"*.vue"
],
まとめ
本質的な解決策ではないけど、とりあえずproductionビルドでもstyleがロードされるようになった。
