質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%

解決済

html-webpack-pluginで出力したHTMLにおいて、個別の外部JS・外部CSSを読み込む方法

toromou
toromou

総合スコア30

2回答

0評価

0クリップ

4896閲覧

投稿2020/01/29 05:13

html-webpack-pluginを使って、複数のHTMLを出力しています。
出力されるHTMLには自動でscriptタグやlinkタグが付与され、JavaScriptやCSSが読み込まれます。

html

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>タイトル</title> <link href="./css/common.css" rel="stylesheet" /> <link href="./css/index.css" rel="stylesheet" /> <link href="./css/menu.css" rel="stylesheet" /> </head> <body> <div class="wrapper"></div> <script type="text/javascript" src="./js/common.js"></script> <script type="text/javascript" src="./js/index.js"></script> <script type="text/javascript" src="./js/menu.js"></script> </body> </html>

現状は全てのファイルが読み込まれていますが、ページごとに特定のファイルを読み込むようにしたいです。
例えば以下のような感じです。

出力するHTML読み込むJS読み込むCSS
index.htmlcommon.js, index.jscommon.css, index.css
menu.htmlcommon.js, menu.jscommon.css, menu.css

お詳しい方がいらっしゃいましたらご教授の程よろしくお願いします。

package.json

json

{ "scripts": { "build": "webpack", "watch": "webpack --watch", "fmt": "prettier --write dist/*.html" }, "devDependencies": { "@types/jquery": "^3.3.31", "@types/swiper": "^5.2.1", "copy-webpack-plugin": "^5.1.1", "css-loader": "^3.2.0", "html-loader": "^0.5.5", "html-webpack-plugin": "^3.2.0", "mini-css-extract-plugin": "^0.8.0", "node-sass": "^4.12.0", "node-sass-glob-importer": "^5.3.2", "prettier": "^1.19.1", "pug": "^2.0.4", "pug-loader": "^2.4.0", "sass-loader": "^7.1.0", "ts-loader": "^6.2.1", "typescript": "^3.6.4", "webpack": "^4.41.0", "webpack-cli": "^3.3.9", "webpack-fix-style-only-entries": "^0.4.0" }, "dependencies": {} }

webpack.config.js

js

const path = require('path'); const globImporter = require('node-sass-glob-importer'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const FixStyleOnlyEntries = require('webpack-fix-style-only-entries'); const CopyWebpackPlugin = require('copy-webpack-plugin'); module.exports = { mode: 'development', devtool: 'inline-source-map', entry: { common: './src/ts/common.ts', index: './src/ts/index.ts', menu: './src/ts/menu.ts', 'common.css': './src/scss/common.scss', 'index.css': './src/scss/index.scss', 'menu.css': './src/scss/menu.scss', }, output: { path: path.resolve(__dirname, './dist'), filename: './js/[name].js' }, resolve: { extensions: ['.ts', '.js'] }, module: { rules: [ // TypeScript { test: /.ts$/, loader: 'ts-loader' }, // Sass { test: /.(sa|sc|c)ss$/, use: [ MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { url: false, } }, { loader: 'sass-loader', options: { sourceMap: true, outputStyle: 'expanded', importer: globImporter() } } ] }, // Pug { test: /.pug$/, use: { loader: 'pug-loader', options: { pretty: true, } } }, ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.pug', filename: './index.html', }), new HtmlWebpackPlugin({ template: './src/menu.pug', filename: './menu.html', }), new MiniCssExtractPlugin({ filename: './css/[name]', }), new FixStyleOnlyEntries(), new CopyWebpackPlugin([ { from: './src/img', to: 'img/' }, { from: './src/local', to: 'local/' } ]), ] }

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る