vue-loader の使い方

参考:

Getting Started | Vue Loader [Official]

Using Pre-Processors | Vue Loader [Official]

CSS Extraction | Vue Loader [Official]

v14 から v15 に移行する

  • プラグインの追加
  • loaders オプションの廃止
  • それぞれのブロックに通常の rules が適用される

参考:

Migrating from v14 | Vue Loader [Official]

Vue.js アプリの webpack のバージョンを 4 系に上げた – ravelll の日記

2018年 Webpack4 で Vue.js 単一ファイルコンポーネントの作り方 – Qiita

Vue コンポーネントを Webpack+babel で扱うための設定 – Qiita

webpack と vue-loader v15 ではまって解決した – totechite’s blog

webpack4.x + vue.js 2.x + vue-loader でビルド環境を構築する その0001 導入 – Motomichi Works Blog

Vue.js and Webpack 4 From Scratch, Part 1 – ITNEXT

vue-loader 15.0 usage – GitHub Gist

vue-loader v15 requires VueLoaderPlugin in webpack config · Issue #1453 · rails/webpacker – GitHub

vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config. – Qiita

How to resolve vue-loader error ‘vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.’ – kakts-log

options

参考:

オプションリファレンス | vue-loader [公式]

Options Reference | Vue Loader [Official]

アセットの URL

参考:

アセット URL ハンドリング | vue-loader [公式]

CSS Extraction

参考:

webpackでVueファイルとSCSS+ExtractTextPluginをビルドする – Qiita

CSS を単一のファイルに抽出する | vue-loader [公式]

CSS Extraction | Vue Loader [Official]

webpack-contrib/extract-text-webpack-plugin: Extracts text from a bundle into a separate file – GitHub

mini-css-extract-plugin

参考:

CSS Extraction | Vue Loader [Official]

webpack4でVueとSCSSをコンパイルする方法が変更になった | MK Dev

webpack 3 から webpack 4 へアップデートする際にハマりそうなこと – rilakkuma3xjapan’s blog

vue-loader extract-text-webpack-plugin but webpack 4 needs requires mini-css-extract-plugin · Issue #1220 · vuejs/vue-loader – GitHub

webpack-contrib/mini-css-extract-plugin: Lightweight CSS extraction plugin – GitHub

Babel を使う (babel-loader)

参考:

ES2015 | vue-loader [公式]

[2.0.1] .vue components aren’t being transpiled with Babel but other .js files are · Issue #374 · vuejs/vue-loader – GitHub

Vue Loader doesn’t seem to use Babel ES2015 defaults · Issue #417 · vuejs/vue-loader – GitHub

Pug を使う

参考:

Webpack4 + Vue.js + Pug + Sass – Qiita

vue-loader/babel-loader のバージョン問題

参考:

Webpack build breaks after upgrading webpacker from 3.0.2 to 3.2.0 · Issue #1178 · rails/webpacker – GitHub

Hot Module Replacement

参考:

Vue.js で Hot Module Replacement をやってみた – Qiita

Hot Reload | Vue Loader [Official]

SourceMaps

参考:

Improve SourceMap Handling · Issue #1163 · vuejs/vue-loader – GitHub

デバッグ

参考:

A basic introduction to debugging Vue applications using breakpoints – Bjorn – Medium

vue-devtools

参考:

vuejs/vue-devtools: Browser devtools extension for debugging Vue.js applications – GitHb

VSCode と Chrome DevTools を使ってデバッグする

参考:

vscode-recipes/vuejs-cli at master · Microsoft/vscode-recipes – GitHub

How I stopped using console.log when debugging Vue components – Brock Reece – Medium

パフォーマンスの解析をする

参考:

Unlock performance tracing in Vue – Brock Reece – Medium

ローダーが複数回呼ばれる

参考:

Chained loader called multiple times per file · Issue #1164 · vuejs/vue-loader – GitHub

Tagged:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です