Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

what's the difference between webpack:// and webpack-internal://

Tags:

webpack

reactjs

typescript

webpack-dev-server

I'm writing a webpack-react-typescript kit, and I've found that the source-map can't direct to the source code.

It directs to the webpack-internal://src/App.tsx file, this file has some webpack injection code.

Another computer has both the webpack:// and webpack-internal domain, and the source map, which in the webpack:// domain can't direct to the current source code.

So what I want to know is:

  1. What's the difference between webpack and webpack-internal?
  2. Why does one computer have webpack:// and the other one doesn't?
like image 983
mrkou47 Avatar asked Nov 25 '18 04:11

mrkou47

People also ask

What is full webpack?

Webpack is a free and open-source module bundler for JavaScript. It is made primarily for JavaScript, but it can transform front-end assets such as HTML, CSS, and images if the corresponding loaders are included. Webpack takes modules with dependencies and generates static assets representing those modules.

What is the webpack in react?

Webpack is a popular module bundling system built on top of Node. js. It can handle not only combination and minification of JavaScript and CSS files, but also other assets such as image files (spriting) through the use of plugins.

Is Vite better than webpack?

Compared to Webpack 5 with lazy compilation, Vite has a slightly slower dev startup time and somewhat longer production build time even with code-splitting enabled. But one of the big reasons developers love Vite is the near-instant feedback loop between saving a file and seeing your changes in the browser.

1 Answers

There's an error in chrome displaying source maps, which is the reason why it is suffixed like that.

https://github.com/webpack/webpack/blob/8a7597aa6eb2eef66a8f9db3a0c49bcb96022a94/lib/EvalSourceMapDevToolModuleTemplatePlugin.js#L88-L95

The chrome team seems to be neutral to solving this https://twitter.com/ChromeDevTools/status/960972070711476224

like image 53
Even Stensberg Avatar answered Nov 16 '22 05:11

Even Stensberg
Sign in to Comment

Related questions

Production URL for nextjs
How to properly render a 404 page in React with React-Router?
Do I need the IPFS daemon to upload files from a browser?
React JS range slider - using an array for the value?
In React/Redux reducer, how can I update a string in an nested array in an immutable way?
Most concise way to validate Google sign-in access token using Ruby
react-axios-middleware promise handling
Delay in keyboard dismiss react-native
Why do we need reactjs-bootstrap if there's easy way?
React Native Redux: Error Can't find variable mapStateToProps
React semantic UI: How to set focus for input field of dropdown element
How to render JSON data in reactjs?
how to pass props to children with React.cloneElement?
Get list of optional props of a component in reactjs
Disable warning message for eslint rule not being found
How to test a component containing OpenLayers map using createReactApp
React SSR ReferenceError: document is not defined
ReactJS/Jest: How to test/mock a function, which is passed to component
Storybook w/ react-router - You should not use <Link> outside <Router>
Function components cannot have refs. Did you mean to use React.forwardRef()?

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!