Webpack-dev-server not using the template in the HtmlWebpackPlugin options
Question
* Edit: Example (hopefully) made more clear.
I'm sure there's something simple here I've missed, but I can't see it...
I'm using one HtmlWebPlugin instance with a template per page/entry point. When I use webpack-dev-server only the first instance actually respects what's in the template, the rest just use simple html and meta tags
Writing the files to disk, either by using WriteFilePlugin with dev-server, or by simply building the files without dev-server, uses the template correctly. I'm stumped.
Expected: about.html/index.html This is what I get using both write-file-webpack-plugin and by just running 'webpack --config webpack.config.js' . Index.html is identical.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About</title>
</head>
<body>
<p>About</p>
</body>
</html>
Actual output from Webpack-dev-server: (view page source)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<script type="text/javascript" charset="utf-8" src="/about.js"></script>
</body>
</html>
Config:
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WriteFilePlugin = require('write-file-webpack-plugin');
const path = require('path');
module.exports = {
entry: {
index: './src/js/index.js',
about: './src/js/about.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.html$/,
use: 'html-loader'
}
]
},
devServer: {
openPage: 'about'
},
plugins: [
new WriteFilePlugin(),
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'src/index.ejs',
chunks: ['index']
}),
new HtmlWebpackPlugin({
filename: 'about.html',
template: 'src/about.ejs',
chunks: ['about']
}),
]
};
I can't see anything obviously wrong, but then I'm new to multiple pages and webpack
Thanks
**Edit: Given that the files written to disk are fine it feels like it might be a problem with where wds is serving files from or where I'm navigating to? localhost:8080 => html and script links are there. localhost:8080/index => script links but no html from the template. localhost:8080/about => script links but again no html from template.
i ｢wds｣: Project is running at http://localhost:8080/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from C:\Users\Nick\Javascript\Webpack\test
3 answers
solution1
2 ACCPTED 2020-08-02 07:59:41
Well, I might as well post my shame as the answer in case it helps anyone else in the future...
I was navigating to localhost:8080/about rather than localhost:8080/about.html .
The script was injected at /about, but the template wasn't. At /about.html both the script and template were used. I'm not sure why there's a difference there, but that was my problem!
solution2
1 2020-08-02 05:57:13
I think you are missing a loader there check https://www.npmjs.com/package/ejs-webpack-loader
I found an example in the package page with HtmlWebpackPlugin, try it maybe it will help you
plugin: {
new HtmlWebpackPlugin({
template: '!!ejs-webpack-loader!src/index.ejs'
})
}
solution3
0 2020-08-02 03:44:51
As a reference here: https://github.com/jaketrent/html-webpack-template/issues/69#issuecomment-376872044 .
In short answer, you need LOOP to all chunks to insert into your final html file.
Below is example code in your template file
<% for (var chunk in htmlWebpackPlugin.files.js) { %>
<script src="<%= htmlWebpackPlugin.files.js[chunk]%>"></script>
<% } %>
Hope this help, please feel free if I got misunderstanding.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.