WebpackとVue-CLIを使った開発手法

現状

Vue-CLI の pwa テンプレートで開発をしています。
Vue-router, Vuex も使うことになると思います。
Webstorm を使っています。

やりたいこと

作成されたプロジェクトに Google の Material Design Components for the Web を使用したい。
なるべく本家のものを使いたい。

わからないこと

index.html に以下のコードを書いた場合、

index.html
1<link rel="stylesheet"
2href="node_modules/material-components-web/dist/material-components-web.css">

index.html
1<script src="node_modules/material-components-web/dist/material-components-web.js"></script>
2<script>mdc.autoInit()</script>

node_modules はそのままでは参照できないのではないか。
npm run build でディレクトリ構造が変わって参照できなくなるのではないか。
Vue で autoInit() を呼び出す適切なタイミングがわからない。（全コンポーネントでマテリアルデザインを使いたい）
この記述がWebpack関係でファイルを一つにまとめてくれてるらしい？

Webpackの機能を活用する形で行きたい。

index.html
1<% for (var chunk of webpack.chunks) {
2    for (var file of chunk.files) {
3      if (file.match(/.(js|css)$/)) { %>
4<link rel="<%= chunk.initial?'preload':'prefetch' %>" href="<%= htmlWebpackPlugin.files.publicPath + file %>" as="<%= file.match(/.css$/)?'style':'script' %>"><% }}} %>

行動規範の内容に同意します

回答1件

メインエントリーとなっている JavaScript ファイル内で material-components を import すれば良いですよ。

javascript
1import 'material-components-web/dist/material-components-web.css';
2import 'material-components-web/dist/material-components-web.js';

またサーバーが HTTP2 をサポートしてるのならファイル数が増えてもあまり速度に影響ありませんので CDN 使ったほうが良いかなと思います。

html
1<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/material-components-web@0.38.2/dist/material-components-web.min.css" />
2.
3.
4.
5<!-- メインエントリーの <script> タグの直前に記載 -->
6<script src="https://cdn.jsdelivr.net/npm/material-components-web@0.38.2/dist/material-components-web.min.css"></script>