This is the third day of my participation in Gwen Challenge

What does webpackDevServe do?

Each time, after we have changed our code, we need to manually open the HTML file in the dist directory after the NPM run build to recompile and run the code if we want it to run properly in the browser. In this case, our development efficiency is actually very low. I’m hoping that if I change the code, the dist directory will automatically repackage, and if I can do that I don’t have to manually open the HTML every time I package it, so let’s see how that works.

// Install NPM i-d webapck-dev-server
module.exports = {
    devServer: {
        open: true.port: 3000.hot: true.hotOnly: true}},Copy the code

We started a local server with devServer

  • openWhat does that mean?
    • It means runningnpm run devWhen you start webpackDevServeopenIt automatically opens a browser for you and automatically accesses your local address, by defaultlocalhost:8080;
  • portWhat does that mean?
    • The default port number is 8080, which is used if you need to change itportFor example, the above code changes the port number to 3000 to run;
  • hotWhat does that mean?
    • Enable webPack’s hot module replacement feature. The default behavior of DevServe is to preview by automatically refreshing the entire page when it finds an update to the source code, and to preview in real time by replacing old modules with new ones without refreshing the entire page.
  • What’s the difference between Hot and hotOnly?
    • If you set hot to true, an error will be thrown if you change it to correct, which will trigger a recompile and refresh the entire browser!
    • If hotOnly is also set, if compilation error, you change to correct, recompile, browser will not refresh!

How do I configure source-map?

What is theSource Map?

In the front-end development process, we usually write the source code will go through multiple processing (compilation, encapsulation, compression, etc.), and finally form the production code. As a result, when debugging the code in the browser, we often find that the code has changed beyond recognition. We need a way to display the code back to the source code during debugging, and source Map is a tool for this purpose.

For the same source file, different source maps can be generated depending on the target. They differ in building speed, quality, access and file size. Our expectations for source Map functionality are also different in development and production environments:

  • In a development environment, we usually focus on building fast and high quality in order to improve development efficiency, rather than the size and access of the generated files.
  • In a production environment, quality and build speed are usually more important than the need to provide an online Soource map, and whether the generated file size and access affects page performance.
module.exports = {
    mode: 'development'.devtool: 'eval-cheap-modulesource-map',}Copy the code

There are many presets of Source Map for you to learn about, you can go to the official website. Different presets will affect the speed of construction, package size and generation method. If you do not need to check the number of error lines in the production environment, you can not set source Map to improve page performance.

The development environment default recommendation eval-cheap-Modulesource-map is suboptimal in both quality and first/re-build speed, and it is often worth sacrificing the ability to locate columns for a faster build.

conclusion

The above is some of the more commonly used actual combat configuration in Webpack, detailed configuration also refer to the document to learn;