• Notes on how to learn webpack (5)


    My official account for WeChat:Front end cultivation Road, welcome to follow. A few days ago, my friend suddenly thought of a dinner party. In less than half a year, the first batch will be born after 20. This feeling is like, the post-90s now look at the post-90s 60 ~ accidentally we these post-90s in […]

  • Using SVG symbols to build a complete guide to icon system


    From the initial use of img pictures to the later use of CSS sprite to reduce server requests, to the popular graphic Font Icon iconcont. Now, a new way of using icons has become popular – SVG symbols. Working principle How SVG symbols work: the symbol element is used to define a graphic template object, […]

  • How to make an online compiler


    Before the article starts, I’ll show you my own online compilerJS-Encoder: Click here for a preview. About three or four months ago, I began to have the idea of making online compilers. Before that, I had contact with many online compilers, such as codepen, jsbin, jsfiddle, etc., which are very excellent and have a huge […]

  • Build react development environment


    Use yarn package management tools, build tools based on webpack, build react development environment Because some software installation is related to the system environment, you need to select the corresponding system version according to your system environment. Running environment of this paper system:macosreact:16.8.6react-dom:16.8.6webpack:4.36.1 Yarn Yarn is a fast, reliable and secure dependency management tool, which […]

  • Elements, components, events, props passing of react


    By configuring webpack dev server to start a web server, automatically compile and refresh the browser, we can start the react basic fast pass Next: building the react development environment Using webpack dev server After building the react development environment according to the previous article, we found that every time we write the code, we […]

  • Vue cli project development / production environment agent realizes cross domain request


    Cross domain in development environment The development address of the project created with Vue cli is localhost: 8080. You need to access the non local interface Access between different domain names requires cross domain to request correctly. There are many cross domain methods, which usually need background configuration. However, projects created by Vue cli […]

  • Service worker usage details


    Background In order to control the interface displayed to users in the state of no network, the H5 of the taro framework can achieve the goal by using the client offline cache, and can cache the static resources, so as to reduce the white screen time and speed up the corresponding page speed. 2、 Service […]

  • [webback series] analysis of the principle of webback


    I. Preface Now with the complexity and scale of front-end development increasing, eagle can’t develop independently without engineering. For example, the JSX code of react must be compiled before it can be used in the browser. For example, sass and less code browsers are not supported. If these development frameworks are abandoned, the development efficiency […]

  • In depth understanding of the requirement.context of webpack


    Preface Require.context is actually a very practical API. But after 3-4 years, there are still many people who don’t know how to use it. And what does this API do for us?It can help us dynamically load the files we want, which is very flexible and powerful (recursive directory).You can do things that import can’t. […]

  • Pit encountered by introducing. Vue file in webpack


    Run program results after NPM install Vue Vue loader is executedI asked for a Vue template compile according to the error prompt, so I installed itimplementnpm install vue-template-compiler -DResult Where < span > Vue loader was used without the corresponding plugin. Make sure to include vueloaderplugin in your webpack config. < span >The error indicates […]

  • Shorthand of webpack knowledge points


    Webpack involves many knowledge points from basic concepts to project configuration. Now it records the content encountered in the process of learning and using, which is convenient for quick reference in the future. 1. What is webpack? WebpackIt is aModule packaging toolInWebpackAll documents in are modules. adoptloaderConverting files throughpluginInject the hook, and finally output the […]

  • Webpack4 learning notes – dllplugin


    dlPlugin In the process of development, developers often do not modify the source code of the third-party module, but repackage the referenced third-party module every time when packaging, so dllplugin is used to generate dynamic link library. Basic process: A new webpack.dll.conf.js file that packages third party modules (entry is a third party module that […]