思路：注册webpack插件 打包后执行 指定的函数webpack插件组成：一个具名 JavaScript 函数；在它的原型上定义 apply 方法；指定一个触及到 Webpack 本身的事件钩子；操作 Webpack 内部的实例特定数据；在实现功能后调用 Webpack 提供的 callback。插件由一个构造函数实例化出来。构造函数定义 apply 方法，在安装插件时，apply 方法会被 W
原创
2023-07-19 11:41:17
1071阅读
在webpack.config.js添加如下配置。const path = require('path')module.exports = { mode: 'development', entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'd...
原创
2022-11-23 00:08:55
587阅读
问题将打包好的项目部署到服务器，发现报错说图片找不到。静态资源如js访问不到分析并且解决问题明确一点的就是，看到报错404，找不到静态资源，很明显，路径错误了。静态资源找不到如js文件资源打包路径有误，打包后的资源使用了绝对根目录路径，因此将项目部署到特定目录下，其引入的资源路径无法被正确解析。解决：找到config下面的index.js文件，将划线处改为如下样子。 之前是根
转载
2024-05-20 23:29:59
117阅读
1.创建webpack.config.js配置文件 webpack.config.js配置文件的作用： 当运行webpack指令时，会加载其中的配置 所有的构建工具都是基于Nodejs，模块化默认使用commonjs 2.配置架构 const {resolve} = require('path') ...
转载
2021-10-28 20:11:00
136阅读
2评论
开发环境： webpack ./src/index.js -o ./build/built.js --mode=development
含义：webpack会以./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js
整体打包环境，就是开发环境。
生产环境： webpack ./src/index.js -o ./buil
原创
2021-04-22 09:19:48
401阅读
image.png 一. 概述 什么是webpack 模块打包机：它做的事情是
原创
2022-06-20 22:38:36
149阅读
一. 概述 什么是webpack 模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。 为什么使用webpack 现在是网络时代，在我们的生活中网络成为了必不
原创
2022-05-04 09:54:45
584阅读
Bundle Analysiswebpack 打包后的文件如下，省略中间部分逻辑代码，可以看到是一个自执行函数，传入了一个对象，该对象的键 ./src/index.js 和 ./src/title.js 都是文件路径，值为导出的模块。// webpackBootstrap(function (modules) { // ... // ... // ... // Load entry module and return exports return __webpack_re
原创
2021-07-14 17:39:30
899阅读
原因Webpack5已经废弃了url-loader、file-loader，使用后资源无法正常加载，图片无法正常显示参考文档：https://webpack.docschina.org/migrate/5/#clean-up-configuration解决方案1.在use后添加typerules: [{
test: /\.less$/,
转载
2021-10-31 15:39:00
119阅读
一、babel支持 Babel其实是几个模块化的包，其核心功能位于称为babel-core的npm包中，webpack可以把其不同的包整合在一起使用，对于每一个你需要的功能或拓展，你都需要安装单独的包（用得最多的是解析ES6的babel-preset-es2015包和解析JSX的babel-pres
转载
2018-03-26 21:07:00
267阅读
2评论
以下内容均以webpack配置中的output.library.type: 'umd'为基础 使用webpack将文件打包为library后，打包好的文件被script标签引用时，library的名字会被放在全局变量中等待使用，至于库名下的内容，则与webpack配置中的output.library.export属性值相关。
转载
2021-10-28 23:15:00
194阅读
一、webpack基本安装 1、创建webpack项目目录如webpackDemo，并进入webpackDemo; 2、 在node已经安装的前提下，打开命令行控制器，输入如下命令： npm init -y npm install webpack webpack-cli --save-dev //安 ...
转载
2020-10-25 13:45:00
321阅读
2评论
前言 记一次配置webpack jqeury中的案例。 正文 选取自己需要安装的jquery版本号 dependencies:{ //此处的jquery版本根据npm后的版本来看，会有安装版本的提示 "jquery":"^3.3.1" } webpack 中的配置 plugins: [ new we
转载
2020-06-21 10:42:00
572阅读
2评论
webpack只是一个打包模块的机制，只是把依赖的模块转化成可以
转载
2021-07-18 16:25:28
1505阅读
1、安装webpack（局部安装webpack）。npm i webpack webpack-cli -D2、安装成功之后，你会在package.json文件中看到这个3、新建webpack.config.js文件，里面写配置编译模式，入口出口等（这里演示的是单入口打包）// 导入node.js中专门操作路径的模块
const path = require('path');
module.expo
原创
2024-08-07 08:58:21
53阅读
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundlewebpack四个核心概念一 入口webpack.config.js里配置module.exports = {
转载
2021-02-03 20:05:21
824阅读
2评论
本文将从打包分析，速度优化，体积优化三个方面进行阐述打包分析初级分析: webpack内置的stats(构建
原创
2021-08-04 11:26:30
415阅读
