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