vueを手動で構築するwebpack構成の注意点
900 ワード
公式ドキュメントhttps://vue-loader.vuejs.org/zh/
主にvueファイルの処理ですが、まずvue-loader処理を提供し、同時にvue-template-compilerを同時にインストールしなければならないことを公式に提示しました.webpackはテンプレートを認識できないため、プラグインを追加しなければなりません.
これでテンプレートはvueファイルの処理に問題ありません
しかし、私たちのページの起動がまだ私たちの内容が現れていないのは、vueのデフォルトのエントリファイルの問題のためで、手動で別名でvueのコンテンツファイルを指すことができます.
もちろん面倒でなければ、インポートごとに書きます.
その後、vueプロジェクトを走ることができます(ファイルのパッケージ化、ホットロードなどの構成については、本明細書の範疇内ではありません).
主にvueファイルの処理ですが、まずvue-loader処理を提供し、同時にvue-template-compilerを同時にインストールしなければならないことを公式に提示しました.webpackはテンプレートを認識できないため、プラグインを追加しなければなりません.
yarn add -D vue-loader vue-template-compiler
{
test: /.vue$/,
loader: "vue-loader",
}
const VueLoaderPlugin = require("vue-loader/lib/plugin");
plugins: [
// !
new VueLoaderPlugin()
]
これでテンプレートはvueファイルの処理に問題ありません
しかし、私たちのページの起動がまだ私たちの内容が現れていないのは、vueのデフォルトのエントリファイルの問題のためで、手動で別名でvueのコンテンツファイルを指すことができます.
resolve: {
alias: {
vue$: "vue/dist/vue.esm.js",
},
}
もちろん面倒でなければ、インポートごとに書きます.
import Vue from 'vue/dist/vue.esm.js'
その後、vueプロジェクトを走ることができます(ファイルのパッケージ化、ホットロードなどの構成については、本明細書の範疇内ではありません).