WebPackのソースマップが混乱する（重複したファイル）

Question

私は今日、新しいプロジェクトでWebPackを試してみることにしました。私は今日、スピードアップしており、ソースマップから本当に変わった動作をしています。私はドキュメントでそれについて何も見つけることができませんし、StackOverflowをスキミングするときに誰もこの問題を抱えているのを見つけることはできません。

私は現在、Vue-CLI's WebPack templateで作成されたHelloWorldアプリを見ています。コードやビルド環境などは変更されていません。私はすべてのものをインストールし、そのようにそれを実行した

：

vue init webpack test && cd test && npm install && npm run dev 

は私sourcemapsを見て、私は、以下を参照してください。

これは熱い混乱です。なぜそこにあるHelloWorld.vueとApp.vueのバージョン？さらに悪いことに、それぞれのバージョンはわずかに異なるバージョンのコードを持ち、元のソースには一致しません。 HellowWorld.vueはルートディレクトリにあり、は元のソースと一致しますが、./src/componentsフォルダの代わりにその下に何をしていますか？最後に、なぜ元のソースがある第4のApp.vueがないのですか？

これまでWebPackローダーと関係があるかもしれません。しかし、他のバンドラーと一緒にこの種の問題を経験したことはありません。

はありませんwebpack://スキーマ、すべてのファイルのコピーは1つだけ、ファイルが実際に元のソースコードが含まれている（下記Browserifyヴュー-CLIテンプレートを使用して、まったく同じ手順の例です。ソースマップにとって重要なもの）、予期しないものはありません。(webpack)/buildinまたは(webpack)-hot-middleware、.サブディレクトリはありません。

Answer 1

て読ん推薦する本をより良く説明について

私は本当にこれが起こっているかを正確に記述することができないのVueで働いていないが、Vue Loaderに関連しているようです。私は実際にそれが一つの成分のための3つの異なるファイルを作成する理由を明確に何かを見つけることができませんでしたドキュメントを見てみると。しかし、.vueファイルには、<template>,<script>、および<style>の3種類のトップレベル言語ブロックが含まれている可能性があることを考慮すると、論理的です。

また、これらのファイルのうち2つを見ると、Vueローダーによって何らかの方法で変更されたことを示すコメントが各ファイルの最後に表示されます。いずれかのこの

////////////////// 
// WEBPACK FOOTER 
// ./node_modules/vue-loader/lib/template-compiler 

又は

////////////////// 
// WEBPACK FOOTER 
// ./node_modules/vue-style-loader!./node_modules/css-loader 

第3のファイルは異なっているが、それは依然としてヴューローダによって修飾されるものとしてそれを識別するコードを持っています。ここではそのコードの一部

function injectStyle (ssrContext) { 
    if (disposed) return 
    require("!!vue-style-loader...") 
} 
/* script */ 
import __vue_script__ from "!!babel-loader!../../node_modules/vue-loader/..." 
/* template */ 
import __vue_template__ from "!!../../node_modules/vue-loader/..." 
/* styles */ 
var __vue_styles__ = injectStyle 

documentでも、これは言う：

VUE-ローダーではJavaScriptモジュール平野に次の形式で記述されたVueのコンポーネントを変換することができWebPACKのためのローダーです：

これは、他のバンドルと同じタイプの動作が表示されない理由を説明しています。

これはあなたが探していた答えではないかもしれませんが、私が見つけたものを共有したいだけでした。

Answer 2

これは実際にwebpackの機能です。

webpackにはHMR（Hot Module Reloading）があります。ネットワークタブを見る場合は、HelloWorld.vueファイルを更新してください。更新されたJSONマニフェストと同様にjsチャンクが表示されます。これらの両方は、アプリケーションを変更するたびに、最後に一意のハッシュ値を持ちます。これは、ブラウザが完全なリロードを行う必要がないように、これを行います。私は非常にhttps://webpack.js.org/concepts/hot-module-replacement/