How to use webpack to optimize the development / production environment

HMR hot module replacement / module hot replacement Function: when a module changes, it will only update the module (not package all) to improve the speed Style file: you can use the HRM function because the style loader is implemented internally js file: no HRM by default html file: there is no HRM by defau lt, and the html file cannot be ...

Posted by PugJr on Tue, 07 Dec 2021 00:22:02 -0800

I personally experienced a vite and felt that it was not as good as I said. There were many pits

1. I have something to sayOriginally, webpack was used in the project. I thought that building the project into vite could improve work efficiency, but who knows. All kinds of pits, so I think it's easy to write them down2,requireAs we all know, require is the syntax in webpack.If you want to dynamically request a static resource path, you can ...

Posted by MachineHead933 on Thu, 02 Dec 2021 19:30:31 -0800

Webpack: Loader development sharing

Webpack: Loader development sharing text 1. Concept concept The concept of Webpack tells us that everything is a Module. However, a complete front-end web page is not only JavaScript, but also other types of files (CSS, HTML, static resources) Therefore, as a Module Bundler, Webpack divides the whole packaging process into different mod ...

Posted by OttoBufonto on Thu, 25 Nov 2021 14:27:53 -0800

10 configuration in webpack - DevServer

DevServer DevServer is widely used in Webpack. It can enhance debugging during project development by setting up an Express service locally and deploying and running the project. To enable DevServer, you need to install the Webpack dev server dependency module. DevServer has many rich configurations that can meet most scenarios. You can use De ...

Posted by ziv on Thu, 25 Nov 2021 10:08:47 -0800

Detailed explanation of the path problem of static resources in vue (in-depth good article)

Foreword: require parsing in webpack First, make it clear that the requirements used in the project configuration files such as webpack.config.js belong to the category of nodejs, and after entering index.js, the requirements in the loaded components belong to the category of webpack parsing. Usage of require in webpack: let url = "@/assets/im ...

Posted by D_tunisia on Wed, 24 Nov 2021 05:33:58 -0800

Automated Deployment (gitlab, jenkins)

The server CentOS 7.5 64 bit Install FinalShell software Connect server gitlab deployment Reference website: https://www.cnblogs.com/LUA123/p/9675191.html First check the dependency: sshd [root@localhost soft]# rpm -qa|grep openssh-server openssh-server-7.4p1-11.el7.x86_64 [root@localhost soft]# ps -e|grep sshd 1107 ? 00:00:00 s ...

Posted by hasanpor on Mon, 22 Nov 2021 23:15:29 -0800

Go deep into webpack and learn devserver Babel loader asset

Development server //Configure development server devServer: { static: { //True meaning: configure the directory of additional static files, which is equivalent to the open static resource directory of express, which can be accessed from the browser http://localhost:8080/xx.jpg //I came to find it in the static file. ...

Posted by sofasurfer on Mon, 22 Nov 2021 07:14:13 -0800

Keyboard event, BOM and DOM, window, location, navigator, history object, this pointing problem, JS execution mechanism (event loop)

1.1. Common keyboard events 1.1.1 keyboard events The execution sequence of the three events is keydown – keypress – keyup 1.1.2 keyboard event object use keyCode Property to determine which key the user presses Note: to trigger the focus event, you can use the element object. focus() to directly call the button click eve ...

Posted by buckboru on Mon, 22 Nov 2021 01:56:08 -0800

Front end engineering and webpack

1, Front end development mode before 2016: 1. Can write HTML + CSS + JavaScript, can develop front-end 2. If you need to beautify the page style, drag a bootstrap 3. You need to operate the DOM or initiate an Ajax request, and then drag a jQuery 4. To quickly realize the effect of web page layout, drag a Layui Current fron ...

Posted by msaz87 on Sun, 21 Nov 2021 02:43:29 -0800

[webpack] record hmr failure solutions

preface Recently, I encountered a problem. Because the login system uses single sign on and the application uses micro front-end, the xswitch plug-in is used to intercept the agent during development, which leads to the need to manually refresh the browser and update each time the code is modified. A solution has been found. It was found that ...

Posted by ieda on Thu, 11 Nov 2021 16:38:45 -0800