下記をダウンロードし、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" },
あなたの回答
tips
プレビュー