Vue CLI 3でproduction時のソースマップを無効にする
「どんなしょぼい内容でも躓いたり、調べて解決したことはブログに書こう」月間。
Vue CLI 3でproduction時のソースマップを無効にしたくて、やったこと・調べたことの諸々。
環境
まずVue CLI 3のデフォルト設定を確認する
そもそもVue CLI 3ではどういう設定でwebpackを動かしているのか。
以下のファイルで確認できた。
- production：/プロジェクトフォルダ/node_modules/@vue/cli-service/lib/config/prod.js
- development：/プロジェクトフォルダ/node_modules/@vue/cli-service/lib/config/dev.js
sourcemapの設定は以下のようになっていた。
webpackConfig
.mode('production')
.devtool(options.productionSourceMap ? 'source-map' : false)
webpackConfig
.devtool('cheap-module-eval-source-map')
Vue CLI 3でwebpackの設定を変えるには
Vue CLI 3の公式ドキュメントにはこう書いてある。
WARNING Some webpack options are set based on values in vue.config.js and should not be mutated directly. For example, instead of modifying output.path, you should use the outputDir option in vue.config.js; instead of modifying output.publicPath, you should use the publicPath option in vue.config.js. This is because the values in vue.config.js will be used in multiple places inside the config to ensure everything works properly together.
Quote source:Working with Webpack | Vue CLI 3
直接変更する方法も同じページに書いてあるけど、「いくつかのwebpackのオプションは、直接編集するな」とある。
webpackのリファレンス通りに書けばいいわけではなく、Vue CLI 3独自のオプションを使わなきゃいけない。
じゃあ「直接編集してはいけないオプションの一覧ってどれだよ？」って一瞬探したが、以下のConfiguration Reference にあった。
ソースマップの設定を変更するにはproductionSourceMapオプションを使う
ソースマップに関するオプションも、「直接編集するべきではないオプション」の一つ。
vue.config.jsでproductionSourceMapを使う。 デフォルト値はtrue。
- vue.config.js
module.exports = {
productionSourceMap: false,
};
cf.) https://cli.vuejs.org/config/#productionsourcemap
ちなみにwebpack本家では
webpack本家では、ソースマップが必要なときは設定ファイルにdevtool: 'inline-source-map' を記載し、必要なかったら書かなければよい。
- webpack.dev.js
devtool: 'inline-source-map',
