For every build in Webpack, I am attempting to create a customized index.html file. In order to achieve this, I have incorporated html-webpack-plugin.
I comprehend that to generate an index.html file within my dist directory, the following configurations are required in my webpack.config.js:
output: {
path: path.resolve(__dirname, './dist'),
filename: '[name].js',
},
plugins: [
new HtmlWebpackPlugin(), // generates an index.html file
],
The above settings should produce the desired output outlined below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<script type="text/javascript" src="build.js"></script></body>
</html>
However, utilizing the vue-simple Webpack boilerplate for my VueJS learning project results in a publicPath entry within the output section:
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: '[name].js',
}
With the aforementioned settings, the html-webpack-plugin understandably generates the following script tag in the index.html file located in my dist folder, which does not align with my requirements as the src now points to "/dist/build.js".
<script type="text/javascript" src="/dist/build.js"></script></body>
Removing publicPath from the output settings would break everything on my development server preventing me from loading the page. Despite reading about publicPath in this SO post, I remain uncertain about modifying my webpack.config.js to meet my objectives considering the boilerplate has already set up the environment. What steps should I take to edit webpack.config.js and generate the desired index.html without causing any disruptions on my dev server?
Listed below are my complete webpack.config settings:
(previous webpack configuration)This is how my folder structure appears: