I have had lingering questions about how webpack dev server emulates an output .js file that is an html file’s dependency. The current issue highlights this lack of understanding.
Here is a part of public/admin.html
<h1>admin.html</h1> // displays as expected
<div id="reactAdminDiv"></div>
<script src="adminArea.output.js"></script> // GET http://localhost:3000/adminArea.output.js net::ERR_ABORTED 404 (Not Found)
From AdminAreaFull.tsx
ReactDOM.render(<AdminAreaFull />, document.getElementById("reactAdminDiv"));
And my webpack.config.js:
const webpackConfiguration = {
entry : {
productFlow : "./frontEnd/productFlow/index.tsx"
, adminArea : "./adminArea/AdminAreaFull.tsx"
}
, output : {
filename : "public/[name].output.js"
, path : path.join(__dirname, "public")
}
, watch : true
// , watchOptions : { aggregateTimeout : 300 }
, devtool : 'inline-source-map'
, mode : "development"
, devServer : {
port: 3000
, contentBase : ['./public']
, hot : true
, historyApiFallback : true
}
, plugins : [
new webpack.HotModuleReplacementPlugin(),
new dotEnvWebpack
]
, node : {
fs: "empty" // for dotenv to work correctly
}
, resolve : { extensions : ['.ts', '.tsx', '.js'] }
, module : {
rules : [
{
test : /.ts(x?)$/
, use : {
loader: 'awesome-typescript-loader'
}
, exclude : [/node_modules/, /outputScripts/, /.dependabot/, /.next/, /.idea/, /lib/, /pages/, /.dependabot/]
}, {
enforce : 'pre'
, test : /.js$/
, loader : 'source-map-loader'
}
]
}
};
when running webpack-dev-server
in terminal:
「wds」: Project is running at http://localhost:3000/
ℹ 「wds」: webpack output is served from /
ℹ 「wds」: Content not from webpack is served from /home/owner/PhpstormProjects/shopify/buyUsed/public
ℹ 「wds」: 404s will fallback to /index.html
I suppose I don’t have my output settings correct, or maybe there is a misconfiguration under devServer. Any pointers would be appreciated.
2
Answers
Fixed by
npx webpack
which builds the bundle files.webpack-dev-server
It will auto-update from there. The important thing is that the output file must be generated before using webpack dev server
I think you could try setting a different contentBase for devServer:
try