Mam prosty projekt, na którym uczę się używać Webpacka. Wcześniej Webpack poprawnie działał, ale przestał po zmianie struktury katalogów.
- Polecenie, które uruchamiam:
npm run dev
-
package.json:
...
"scripts": {
"dev": "webpack --mode=development",
...
}
...
-
webpack.config.js(cały):
const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
mode: "development",
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin(
{
template: "./app/src/index.html"
}
)
],
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js"
},
devtool: "inline-source-map",
devServer: {
contentBase: "./app/dist"
},
module: {
rules: [
{
test: /\.css$/,
use: [
"style-loader",
"css-loader"
]
}
]
}
};
- Błąd, jaki się pokazuje:
Insufficient number of arguments or no entry found.
Alternatively, run 'webpack(-cli) --help' for usage info.
...
Asset Size Chunks Chunk Names
index.html 424 bytes [emitted]
ERROR in Entry module not found: Error: Can't resolve './src' in '[ścieżka do katalogu głównego projektu]'
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = index.html
[./node_modules/html-webpack-plugin/lib/loader.js!./app/src/index.html] 636 bytes {0} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
+ 1 hidden module
...
- Struktura katalogów w projekcie:
app
- src
- - ...
- - index.html
- - index.js
node_modules
.gitignore
package-lock.json
package.json
README.md
webpack.config.js
UPDATE: Webpack działał poprawnie, zanim przeniosłem katalog src do katalogu app. Chcę jednak mieć taką strukturę, dlatego chciałbym dostosować konfigurację HtmlWebpackPlugin do niej, a nie odwrotnie.
PS. Poza rzeczami, które muszę zmienić, by działało, chętnie przeczytam także, dlaczego teraz nie działa.