• [webpack] Introduction to webpack


    1、 What is webpack Webpack is a front-end resource building tool, a static module bundler In wbpack’s view, all resource files of the front end (JS / JSON / CSS / img / less /…) Will be treated as a module. He will conduct static analysis according to the dependency of the module and package […]

  • [Vue introduction to project environment construction]


    I Vue introduction and Vue development environment construction 1.1 Vue official website What is Vue: Vue JS is a corresponding system developed by Chinese Americans (you Yuxi) and a front-end development library. In February 2014, youyuxi opened the front-end development library Vue js。 On September 3, 2016, you Yuxi joined Alibaba weex team as a […]

  • Vue notes [shangpinhui project]


    Shangpinhui project notes directory 1. Vue file directory analysis 2. Other configurations of the project 2.1 When the project runs, let the browser automatically open — package json 2.2 turn off the eslint verification function (create Vue. Config. JS in the root directory) 2.3 SRC folder abbreviation method, configuration alias 3. Component page style 4. […]

  • Summary of webpack error reports


    Summary of error reporting using webpack 1. Error: cannot find module ‘webpack CIL / bin / config yargs’ (multiple error reports) It may be that the dependency package just downloaded is incompatible with webpack, so you need to download a dependency package matching its version again resolvent: Uninstall instruction: NPM uninstall webpack – g or […]

  • Detailed explanation of the concept of tree shaking in webpack_ fifteen


    premise The code content is as follows. The webpack configuration adopts the configuration accumulated in the previous article math. JS fileaddas well asminusTwo methods, in index JS fileES ModuleTo importaddmethod.implementnpx webpackCommand to package View the generated after packagingdistUnder foldermain.jsWe can see the file, although we don’t use itminusMethod, but when packing, the wholemath.jsThe contents of […]

  • Basic introduction to webpack


    catalogue Why learn webpack What is webpack Webpack packaging core process Core process – extremely simplified version Get Start Dependencies Lookup Transform Combine Assets Modularization + consistency Using webpack Using webpack — Handling CSS Use webpack — access Babel (handle JS) Use webpack — generate HTML Using webpack — tool line Use webpack — HMR […]

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