Tag:webpack

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

    Time:2021-5-4

    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

    Time:2021-4-27

    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

    Time:2021-3-24

    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

    Time:2020-10-11

    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

    Time:2020-10-10

    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

    Time:2020-10-5

    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)

    Time:2020-8-22

    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)

    Time:2020-3-25

    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

    Time:2020-3-24

    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

    Time:2020-3-23

    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

    Time:2020-3-22

    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

    Time:2020-3-21

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