I am learning webpack js; following an example where the trainer loads an html page from src folder to a destination (dist) folder. I am trying the same thing but on Webpack5. I have created a config folder and running the below webpack.dev.js from config folder.
Webpack.dv.js
const path = require("path");
module.exports = {
entry: {
main: ["./src/main.js"]
},
mode: "development",
output: {
filename: "[name]-bundle.js",
path: path.resolve(__dirname, "../dist"),
publicPath: "/"
},
devServer: {
contentBase: "dist",
overlay: true
},
module: {
rules: [
{
test: /\.css$/i,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader"
}
]
},
{
test: /\.html$/i,
use: [
{
loader: "file-loader",
options: {
name: "[name].html"
}
},
{
loader: "extract-loader"
},
{
loader: "html-loader",
}
]
}
]
}
};
Upon yarn serve --config=config/webpack.dev.js command, I get the following error,
./src/index.html 39 bytes [built] [code generated] [1 error]
ERROR in ./src/index.html
Module build failed (from ./node_modules/extract-loader/lib/extractLoader.js):
SyntaxError: unknown: Unexpected token (3:61)
1 | // Imports
2 | import ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___ from "../node_modules/html-loader/dist/runtime/getUrl.js";
> 3 | var ___HTML_LOADER_IMPORT_0___ = new URL("./main-bundle.js", import.meta.url);
| ^
4 | // Module
5 | var ___HTML_LOADER_REPLACEMENT_0___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___);
6 | var code = "<!DOCTYPE html>\n<html>\n <head>\n <title>Testing Webpack with Yarn!</title>\n </head>\n <body>\n <div class=\"profile\">\n <h1>Hello World!</h1>\n </div>\n <script src=\"" + ___HTML_LOADER_REPLACEMENT_0___ + "\"></script>\n </body>\n</html>";
at Parser.pp$5.raise (/Users/syedahmedhussain/Documents/workspaces/Webpack/YarnWebpackMix/node_modules/babylon/lib/index.js:4454:13)
at Parser.pp.unexpected (/Users/syedahmedhussain/Documents/workspaces/Webpack/YarnWebpackMix/node_modules/babylon/lib/index.js:1761:8)
at Parser.pp$3.parseExprAtom (/Users/syedahmedhussain/Documents/workspaces/Webpack/YarnWebpackMix/node_modules/babylon/lib/index.js:3627:50)
at Parser.pp$3.parseExprSubscripts (/Users/syedahmedhussain/Documents/workspaces/Webpack/YarnWebpackMix/node_modules/babylon/lib/index.js:3494:19)
So I played around with the Script tag in the HTML file (given below),
<!DOCTYPE html>
<html>
<head>
<title>Testing Webpack with Yarn!</title>
</head>
<body>
<div class="profile">
<h1>Hello World!</h1>
</div>
<script src="main-bundle.js"></script>
</body>
</html>
Turns out if I remove the <script> tag, the project builds fine but nothing is copied over to dist folder. Can someone please point out as to what is wrong with the above configurations? What am I missing or what can I do to make this work? Also please point out why is it a good or bad idea to load an index.html from a src?
package.json:
{
"name": "name-this-anything",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"start": "webpack serve --config=config/webpack.dev.js"
},
"devDependencies": {
"css-loader": "^5.2.5",
"extract-loader": "^5.1.0",
"file-loader": "^6.2.0",
"html-loader": "^2.1.2",
"style-loader": "^2.0.0",
"webpack": "^5.37.1",
"webpack-cli": "^4.7.0",
"webpack-dev-middleware": "^4.3.0",
"webpack-dev-server": "^3.11.2"
}
}
Thanks!