vue-loader の使い方 [Vue.js]

vue-loader

参考：

Vue Loader [Official]

vuejs/vue-loader: Webpack loader for Vue.js components – GitHub

ドキュメント

参考：

Getting Started | Vue Loader [Official]

Using Pre-Processors | Vue Loader [Official]

CSS Extraction | Vue Loader [Official]

v14 から v15 に移行する

• プラグインの追加
• loaders オプションの廃止
• それぞれのブロック (template / script / style) に通常の 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

How to get started with Vue single file components using Webpack | freeCodeCamp.org

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

Vue.js and Webpack 4 From Scratch, Part 2 | 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

CSS SourceMap · Issue #72 · 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

vue-loader v14 以前

参考：

vue ファイル (単一ファイルコンポーネント) を webpack でビルド | zukucode