随笔分类 - Webpack
HtmlWebpackPlugin@3
摘要:HtmlWebpackPlugin 版本号:"webpack-dev-server": "^3.10.1" html-webpack-plugin@3 是较旧的版本(最新主版本已到5.x),主要适配 Webpack 4 及更早版本。 npm install html-webpack-plugin@3
webpack.BannerPlugin
摘要:webpack.BannerPlugin 是一个用于在生成的打包文件顶部添加自定义注释或横幅的插件。它通常用于添加版权信息、版本号、作者信息等。 基本配置 BannerPlugin 的配置对象可以是一个字符串或一个对象。以下是两种常见的配置方式: 1. 字符串配置 const webpack = r
代码压缩
摘要:webpack+Terser 代码压缩 // webpack.config.js const TerserPlugin = require('terser-webpack-plugin'); const OptimizeCSSAssetsPlugin = require('optimize-css-
webpack内置插件
摘要:所有的webpack内置插件都作为webpack的静态属性存在的,使用下面的方式即可创建一个插件对象 const webpack = require("webpack") new webpack.插件名(options) DefinePlugin 全局常量定义插件,使用该插件通常定义一些常量值,例如
webpack的安装和使用
摘要:Webpack简介 Webpack是基于模块化的打包(构建)工具,它把一切视为模块; 它通过一个开发时态的入口模块为起点,分析出所有的依赖关系,然后经过一系列过程(压缩,合并),最终生成运行时态的文件。 webpack的特点: 为前端工程化而生:webpack致力于解决前端工程化,特别是浏览器端工程
Webpack的plugin
摘要:plugin loader的功能定位是转换代码,而一些其他的操作难以使用loader完成,比如: 当webpack生成文件时,顺便多生成一个说明描述文件 当webpack编译启动时,控制台输出一句话表示webpack启动了 当xxxx时,xxxx 这种类似的功能需要把功能嵌入到webpack的编译流
Webpack编译结果分析
摘要:### 编译结果分析 #### 观察编译结果后,模拟打包模块 ``` // 改对象中保存了所有的模块,以及模块对应的代码 var modules = ((modules)=> { var moduleExports = {}; // 用于缓存模块的导出结果 // require函数相当于是运行一个模