current position:Home>Webpack basic application chapter - [6] building a development environment

Webpack basic application chapter - [6] building a development environment

2022-01-27 00:15:35 Fengxiang front end

1.4 Build development environment

So far , We can only copy dist/index.html The full physical path to the browser address bar to access the page . Now let's see how to set up a development environment , Make our development experience easier .

1.4.1 mode Options

Before the start , We will first mode Set to 'development'

module.exports = {
    
  //  Development mode 
  mode: 'development',
}

05-development/webpack.config.js

//...
module.exports = {
     
//...

//  Development mode 
mode: 'development',

//...
}

1.4.2 Use source map

When webpack When packaging source code , It can be hard to trace error( error ) and warning( Warning ) The original location in the source code . for example , If three source files (a.js, b.js and c.js) Pack it into a bundle(bundle.js) in , And one of the source files contains an error , Then the stack trace will point directly to bundle.js. You may need to know exactly which source file the error came from , So this tip usually doesn't help much .

To make it easier to track error and warning,JavaScript Provides source maps function , You can map the compiled code back to the original source code . If a mistake comes from b.js,source map Will clearly tell you .

In this paper , We will use inline-source-map Options :

module.exports = {
    
  //  Tracking code in development mode 
  devtool: 'inline-source-map',
}

05-development/webpack.config.js

//...
module.exports = {
     
//...

//  Tracking code in development mode 
devtool: 'inline-source-map',

//...
}

Now? , Let's do some debugging , stay src/hello-world.js An error was generated in the file :

05-development/src/hello-world.js

function helloWorld() {
     
// console  Misspelling of words 
cosnole.log('Hello world')
}

//  Export function module 
export default helloWorld

Compile again :

[felix] 05-development $ npx webpack

Now? , Open the generated index.html file , And check the errors displayed on the console . Error is as follows :
 Please add a picture description
Click... In the browser hellow-world.js:3, Check for specific errors : Please add a picture description
We can pinpoint the wrong number of lines .

1.4.3 Use watch mode( Observation mode )

Every time you compile code , Manual operation npx webpack It's going to be a lot of trouble .

We can do it in webpack Add... At startup “watch” Parameters . If one of the files is updated , The code will be recompiled , So you don't have to run the entire build manually .

[felix] 05-development $ npx webpack --watch

 Please add a picture description
Now on the command line , The cursor stays at the end , Monitor changes in documents . modify hello-world.js file :

05-development/src/hello-world.js

function helloWorld() {
     
	console.log('Hello world')
}

//  Export function module 
export default helloWorld

 Please add a picture description
Now? , Save the file and check terminal( terminal ) window . You should see that webpack Automatically recompile the modified module !

The only downside , In order to see the actual effect of the modification , You need to refresh your browser . It would be better if the browser could be refreshed automatically , So next we'll try to pass webpack-dev-server Realize this function .

1.4.4 Use webpack-dev-server

webpack-dev-server It provides you with a basic web server, And have live reloading( Reload in real time ) function . Install first :

npm install --save-dev webpack-dev-server

Modify the configuration file , inform dev server, Where to find the file :

module.exports = {
    
	// dev-server
  devServer: {
    
    static: './dist'
  }
}

05-development/webpack.config.js

//...
module.exports = {
     
	//...

	// dev-server
	devServer: {
     
    static: './dist'
	}
}

The above configuration informs webpack-dev-server, take dist The files in the directory are used as web Root directory of the service .

Tips :

webpack-dev-server No output file will be written after compilation . It's going to be bundle The file remains in memory , And then put them serve To server in , It's like they're attached to server The root path is the same as the real file .

Carry out orders :
 Please add a picture description You can directly access the page in the browser :
 Please add a picture description
Revise it hello-world.js file :

05-development/src/hello-world.js

function helloWorld() {
     
	console.log('Hello world~~~')
}

//  Export function module 
export default helloWorld

At this time, we don't have to refresh the browser page , You can see on the console Hello world~~~ Automatically updated .
 Please add a picture description

copyright notice
author[Fengxiang front end],Please bring the original link to reprint, thank you.
https://en.cdmana.com/2022/01/202201270015335729.html

Random recommended