Tag: webp

Webpack packaged pictures-js-vue

Article directory 1. Webpack packaged pictures 1. Preparation for loading image resources 2. Understand asset module type 3.Use of asset module type 4. The limit effect of url-loader 2. babel 1. Why babel is needed 2.Usage of babel command line 3.Use of babel plug-in 4.babel’s default preset 5.babel-loader 6.babel-preset 3. Load Vue files 1.Write App.vue […]

webpack + vite packaging optimization

Packaging optimization webpack optimization 1. Depend on conversion and compatible with lower version browsers 2. Close sourceMap in production environment 3. Modify the packaging output directory name and store static resources 4. Modify icon 5. Modify webpack configuration 5-1. The configuration written here can overwrite the default configuration of the scaffolding. 5-2. Everything written here […]

Create a personal business card webpage with background carousel and 3D card flip effect

Table of Contents Project display image display Preface Project Objectives Project Objectives Step 3: CSS Styles Step 4: JavaScript animation Project source code Introduction to knowledge points (big guys, please take a detour) Construction of HTML structure 2. CSS style design 3. Implementation of JavaScript animation 4. The logic of background image carousel 5. Use […]

Build webpack5+vue2.7+ts scaffolding from 0 to 1

Build webpack5 + vue2.7 + ts scaffolding from 0 to 1 Background At present, the company uses scaffolding developed based on vue-cli4. On the basis of vue-cli, it adds multi-language, multi-skin, interface request, permission and other solutions for business development, which can quickly build the basic structure of the project. But with the iteration of […]

vue3 project performance optimization (webpack version)

1. Turn on gzip optimization 1. Introduce it in vue.config.js const CompressionPlugin = require(“compression-webpack-plugin”); //Introduce gzip compression plug-in 2. Use it in configureWebpack configuration item configureWebpack: (config) => { return { plugins: [ new CompressionPlugin({ //This plug-in cannot use a version that is too high, otherwise an error will be reported: TypeError: Cannot read property […]

What are the operations for webpack front-end performance optimization?

1. Background As front-end projects gradually expand, one problem that will inevitably arise is performance. Especially in large and complex projects, the front-end business may freeze or even crash due to a small data dependency. After a general project is completed, it will be packaged through webpack. Using webpack to optimize the performance of front-end […]

What other tools are similar to webpack?

Article directory 1. Modular tools Rollup Parcel Snowpack Vite webpack references 1. Modular tools Modularization is a way of dealing with breaking down complex systems into better manageable modules Can be used to split, organize and package applications. Each module completes a specific sub-function, and all modules are assembled in a certain way to become […]

[Solved] Vite and Webpack code obfuscation in Vue project

Personal homepage: Don’t call Mr. Cat, public account: Front-end Helmsman ?♂? About the author: A high-quality author in the front-end field and an expert blogger at Alibaba Cloud. Let’s learn and make progress together. Come on, let’s work together! Data collection: You can get advanced front-end materials from me for free Fishing learning and exchange: […]

npm Babel es6 webpack

1. Introduction 1. What is NPM NPM, the full name of Node Package Manager, is a Node.js package management tool. It is the world’s largest module ecosystem. All modules in it are open source and free. It is also a Node.js package management tool, equivalent to Maven on the front end. 2. Installation location of […]