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

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

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

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

0回答

624閲覧

ライブリロードの調整

skillUp

総合スコア25

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2021/09/23 15:35

編集2021/09/24 00:20

下記をダウンロードし、webpack-dev-serverを使用して
ライブリロードをさせたいのですが、どうもうまくいきません。
https://github.com/puikinsh/Adminator-admin-dashboard

config.jsはwebpack.config.jsで読み込んでいます。
config.js内のdevServerに関する記述によりブラウザが立ち上がりはしますが
HTMLファイルを修正してもブラウザがリロードされません。
​publicPath: '/assets/', の記述が無いとライブリロードしないという記事を見つけたのですが
この記述をつけるとブラウザに「Cannot GET /」と表示されてしまい正しく表示されません。
パスが間違っているのか、あるいはほかの場所に原因があるのかがよくわからず困っています。
ご存じでしたら、教えてください。

ディレクトリ構成は

adminator |__src ​ | |__assets | | |__scripts | | |__index.js | ​|__ index.html | |__webpack.config.js | |__webpack | |__config.js | |__dist |__index.html(main.jsを読み込んでいます。) |__main.js
webpack.config.js -------------------------- const config = require('./webpack/config'); module.exports = config;
config.js (webpack.config.js内で読み込む) ------------------ // ------------------ // @Table of Contents // ------------------ /** ​* + @Loading Dependencies ​* + @Entry Point Setup ​* + @Path Resolving ​* + @Exporting Module ​*/ // --------------------- // @Loading Dependencies // --------------------- const ​path = require('path'), ​manifest = require('./manifest'), ​devServer = require('./devServer'), ​rules = require('./rules'), ​plugins = require('./plugins'); // ------------------ // @Entry Point Setup // ------------------ const ​entry = [ ​path.join(manifest.paths.src, 'assets', 'scripts', manifest.entries.js), ​]; // --------------- // @Path Resolving // --------------- const resolve = { ​extensions: ['.webpack-loader.js', '.web-loader.js', '.loader.js', '.js'], ​modules: [ ​path.join(__dirname, '../node_modules'), ​path.join(manifest.paths.src, ''), ​], }; // ----------------- // @Exporting Module // ----------------- module.exports = { ​devtool: manifest.IS_PRODUCTION ? false : 'source-map', ​context: path.join(manifest.paths.src, manifest.entries.js), ​// watch: !manifest.IS_PRODUCTION, ​entry, ​mode: manifest.NODE_ENV, ​output: { ​path: manifest.paths.build, ​publicPath: '', ​filename: manifest.outputFiles.bundle, ​}, ​module: { ​rules, ​}, ​resolve, ​plugins, ​devServer: { ​contentBase: path.join(__dirname, 'dist'), ​publicPath: '/assets/', ​watchContentBase: true, ​open: true, ​}, };
package.json (scripts部分のみ抜粋) "scripts": { "start": "webpack server --open --hot", "dev": "webpack-dashboard -t 'Project' -- webpack server", "clean": "shx rm -rf ./dist", "build": "npm run clean && cross-env webpack", "preview": "cross-env webpack server", "lint:js": "eslint ./src ./webpack ./*.js -f table --ext .js --ext .jsx", "lint:scss": "stylelint ./src/**/*.scss --syntax scss", "lint": "npm run lint:js && npm run lint:scss", "browser": "open -a 'Google Chrome' ./dist/index.html", "born": "npm-run-all -p start browser" },

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

アカウントをお持ちの方は

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問