在 React.js 2020 中运行 Webpack 配置时无法获取

Question

I run 'watch' to execute webpack dev sever "watch": "webpack-dev-server --progress"

it compiles with no issues detected in terminal. However, when i go to http://localhost:8080 , I receive an error message 'Cannot Get'

I've created a sandbox .

What I've tried so far adding writeToDisk: true in webpack.config.js and including loaders for svg "file-loader" and css "css-loader" which corrected another error i was having regarding not using a loader for css. I've also tried changing the port to 3000. Not sure how relevant this is to solving this issue but i am using webstorm ide.

UPDATE:

I fixed this issue by moving index.html and manifest.json in to the src folder.

My question now is is there away to make this work without moving index.html and manifest into the same folder as webpack.config.js? If possible i'd rather leave index.html and manifest in the public folder.

Answer 1

I'd suggest reading through webpack's documentation on Output Management .

To your question:

My question now is is there away to make this work without moving index.html and manifest into the same folder as webpack.config.js?

You can make this work using the official HtmlWebpackPlugin to generate your index.html file. You'll be able to point it at your own file, wherever you want it, and it will also let you scale your code eventually to generate the html file from a template.

    new HtmlWebpackPlugin({
      template: 'path/to/index.html'
    })