Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Should webpack have `webpack://` urls in production builds with source maps?

I know you shouldn't really have them in production anyway, and in the past I've only noticed webpack:// being seen in my dev builds using webpack-dev-server and didn't know what's expected in prod builds.

Should webpack have webpack:// urls if you have a production build with sourcemaps?

For instance if i look at my development builds sourcemap at something like build/bundle.js.map I see webpack:// to map to my file location with webpack-dev-server to do quicker reloads (and I'm sure more) in dev mode and just wondering what's expected for production builds?

EDIT: I'm and idiot and was saying sitemap when I meant sourcemap

like image 857
garrettmac Avatar asked Dec 13 '17 18:12

garrettmac


People also ask

Why do we need separate Webpack configurations for each environment?

In production, our goals shift to a focus on minified bundles, lighter weight source maps, and optimized assets to improve load time. With this logical separation at hand, we typically recommend writing separate webpack configurations for each environment.

What is the name of the map file in Webpack?

Here, webpack stores the source map in a different file. That is why it suits production build. If the bundle name is main.js, then the map file name will be main.js.map. Modern browsers will consider the associate map file by seeing this comment. There are several other valid values for devtool property.

What is inline source map in Webpack?

After build, webpack will generate the source map and include it in the generated bundle file itself. That is why this configuration is called inline source map. This option is best for development.

What's new in Webpack for production mode?

Also, we've added the recommended devtool for that environment (strong source mapping), as well as our devServer configuration. Finally, in webpack.prod.js, mode is set to production which loads TerserPlugin, which was first introduced by the tree shaking guide.


1 Answers

The original question jumps around a bit, so I'll try to answer the question as I see it:

Will source maps for "production" builds using webpack still have webpack://-style paths for source paths?

First and foremost, there really isn't such thing as a "production" build when it comes to the internals of webpack. In fact, there are 0 references to NODE_ENV in the actual source code of webpack.

This is important to point out because it paves the way to understanding that webpack doesn't know about the environment it's building for—you do. Thus, webpack's bundling output doesn't change unless you make it change, i.e. by changing the configuration webpack uses.

Moving on to source maps, all devtools (types source maps) use approximately the same (configurable) devtool filename template. All filenames used by devtools (source maps) follow that template, which defaults to starting with webpack://. Thus, all paths generated for source maps will start with webpack:// given the default value.

So, to answer the above question: yes, source maps of "production" builds will have paths using the webpack:// protocol unless the output.devtoolModuleFilenameTemplate option is changed.

like image 141
Clavin Avatar answered Oct 29 '22 00:10

Clavin