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

  • Webpack4 learning notes – optimization part (happypack and webpack’s own optimization)


    happypack Happypack can use multithreading to package files (the default CPU core number is – 1), which has a higher utilization rate of multi-core CPU.New happypack (options) can generate corresponding loaders, such as configuration: new Happypack({ id: ‘js’, use: [{ loader: ‘babel-loader’, options: { cacheDirectory: true } }] }), New happypack ({other loader configuration}) Configure […]

  • Webpack learning notes – optimization. Splitchunks


    optimization.splitChunks cacheGroups In my opinion, the configuration of splitchunks other than cachegroup is used for code segmentation, and cachegroup is used as the configuration item of module merging. The priority of the configuration in the cache group is higher than that of the external configuration. It can be understood that the segmentation is carried out […]

  • Webpack principle output file


    Explain In this paper, we will introduce the basic principle of realizing JS modularization with wepack and the introduction of synchronous and asynchronous modules. Mainly refer to the principle of self web back, part of the analysis of the source code add their own understanding, students interested in web back can read the reference article […]

  • Exploring the lazy loading principle of webpack5


    No bullshit. Let’s see what the officials say. 5. Webpack 5New characteristics 1. usePersistent cacheImprove build performance 2. Use better algorithm and default value to improveLong term cache(long-term caching) 3. clean upinternal structureWithout introducing any disruptive changes 4. Introduce somebreaking changesIn order to use the V5 version as long as possible Saying without practicing the […]

  • Web pack build Vue project


    Basic installation First, create a folder named webpack demo, then install webpack locally, and then install webpack cli npm init -y npm install webpack webpack-cli –save-dev Then create a new SRC and public subfolder and webpack.config.js configuration file under the main folder Create index.html in the subfolder public (this file is an entry file template, […]

  • Advanced configuration of webpack4


    description This article introduces how to clear the dist folder after the last packaging, the function of copywebpackplugin, reduce the size of the packaged bundle.js file, extract the CSS from the bundle, visually analyze the webpack plug-in of the packed file, as well as the code error before the positioning and compression of the webpack […]

  • Learning one of webacks: from the simplest webacks


    Read a lot of webback tutorials, mostly about a bunch of configuration, a bunch of plug-in use. This kind of article looks like an official document, or Xinhua dictionary. I want to go back to the original idea and introduce webback step by step based on practical use. Starting from the simplest example, this example […]

  • Explore the webpack runtime


    Preface This article suggests a hands-on attempt Recently, I have studied the source code of weback runtime. In this article, I record my exploration of the complex toy way of weback, and record the process of weback runtime in the form of graph What are we talking about This article mainly records the process of […]

  • Summary of problems encountered in upgrading webpack3 to webpack4


    Recently, due to the needs of the project, we need to upgrade the existing two Vue projects from webpack3 to webpack4. Here, we record several important steps of the whole upgrade process, as well as the problems encountered and solutions. 1. Update the webpack and associated plug-ins, and add a new plug-in webpack cli npm […]

  • Optimization of Web pack based on Vue cli


    In 2019, just three or four years, the webpack packaging tool has become a necessary tool in front-end development. The interview questions used to be asking, what are the ways of front-end page optimization? You can also easily say cache, compression file, CSS sprite map, deployment CDN and other methods, but today is not the […]