This article records issues and solutions I experienced when using webpack at work. devServer configuration Webpack cannot lanuch default browser chrome automatically after running yarn dev or npm start, I have to input localhost:3000 at the address bar manally. Solution: Edit webpack.config.js My root route is not at localhost:3000, it is localhost:3000/demo/,then, each time I start the project, it says Cannot GET / Solution: Edit webpack.config.js, add openPage property: Get 404 Not found error when refreshing non-root route page manually. Reason: This is because the SPA uses client-side rendering and programming router navigation (inside the application, a route is a usually a component), and there is no request sending to the server when navigation inside the SPA. However, a manual refresh of non-root will send a request to the server, but no resource will be returned as the server-side rendering does except the root route request. Solution: As I use history style router(provided by react-router-dom), and the historyApiFallback configuration item of webpack is used for fixing this issue. or: Note: I found historyApiFallback: true doesn't work for me, this may be caused by I don't serve my devlopment env at / instead of /demo. By doing the above(both ways works): a non-existing route will fallback to root route automatically; programming routes can be put in the browser address bar and access them directly. assets loaders Failed to compile when using line comments (// comment content line) in the style file Solution: Just use block comments only(/* line or block comments */) instead of line comments(//). I use CTRL + /…

2021年04月22日 0Comments 2170Browse 0Like Read more