• 80 lines of code to write a webpack plug-in and publish it to NPM


    1. Preface I’ve been studying recentlyWebpackIn the past, I only knew the configuration method of webpack, but I didn’t know its internal process. After a round of learning, I feel that I have benefited a lot. In order to consolidate the learning content, I decided to try to write a plug-in myself. The function of […]

  • An example of how to build a typescript project using webpack / gulp


    Generally speaking, typescript project construction is mainly divided into two steps Transform TS project into JS project as a whole According to the routine, the   JS project During the construction process, the   TS file conversion no longer uses the command line mode, so   The configuration parameters of TSC need to be set […]

  • Some misunderstandings of setting environment variables in webpack


    1、 Preface Daily front-end development work, there will be at least two sets of build environment A set of development time use, build results for local development debugging, no code compression, print debug information, including sourcemap file A set is used when publishing, and the construction results are used online, that is, the code is […]

  • The SRC is “[object module]” after webpack packages img in HTML


    Introducing img image into HTML <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <meta http-equiv=”X-UA-Compatible” content=”ie=edge”> <title>Document1</title> </head> <body> <div > <img src=”./logo.jpg” alt=””> </div> </html> Package with URL loader / file loader and HTML loader { test: /\.(png|jpg|gif|jpeg)$/, use: [{ loader: ‘url-loader’, loader: ‘file-loader’, options: { name: ‘[name].[ext]’, limit: 10240 } […]

  • The best configuration of webpack


    preface For beginners, there are many webpack configuration items. How to quickly configure a webpack that can be used in online environment is a matter worth thinking about. In fact, after you are familiar with webpack, you will find that it is very simple. The basic configuration can be divided into the following aspects:entry 、 […]

  • Loading CSS file by webpack and its configuration method


    Loading CSS file by webpack and its configuration After we have written several CSS files, if we want to reference them into HTML, the first way we can do this is to import the CSS files through the link tag. However, if there are many CSS files, it is not recommended to import them one […]

  • Analysis of the use of HTML webpack plugin


    useHTML webpack pluginTo launch the pagePut HTML pages in memoryTo improve the loading speed of the pageAnd it canAutomatic setting index.html The path of JS file import in the page Premise: webpack is installed in the project. Steps: Step 1, enter in the root directory of the projectcnpm i html-webpack-plugin -DInstall the HTML webpack plugin […]

  • Webpack proxy usage (proxy usage)


    Why write an article During the development of these two days, we have encountered some problems that need agent to solve Why use a proxy Cross domain In the development process, our development environment is generally http: / / localhost. However, if the data to be requested is not local, we need to face a […]

  • 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 […]