环境搭建初始化项目npm init -y安装依赖npm i webpack@5 webpack-cli@4 -D目录结构自定义 loader暴露 loader// loaders/loader1.js// loader 是一个函数，
原创
2021-07-09 11:01:06
192阅读
对于配置文件中不懂的地方都可以在上面的文章中找到最精确的文档来查看学习。第一部分 可能你已经注意到了几乎没有两个configuration是相同的，这是因为webpack的配置文件就是一个导出一个对象的js文件。这个对象将会基于自身的属性被处理。 因为这是nodejs中的Commonjs标准，所以我们可以这样做：
通过require()引入其他的文件。通过require()使用npm中的
转载
2017-05-17 00:27:00
72阅读
2评论
深入学习webpack（一） 模块化的相关库和工具已经很多了，包括require.js、sea.js和一些工程化工具webpack、gulp、grant。那么我们该如何选择呢？ 其实，我们只需要掌握了其中一种模块化的方案即可，因为这里最重要的是思想，而不是工具。在这些工具之中，webpack无疑是非
转载
2017-05-16 19:38:00
160阅读
2评论
Loader 就像是一个翻译员，能把源文件经过转化后输出新的
转载
2022-03-15 14:35:58
143阅读
Loader 就像是一个翻译员，能把源文件经过转化后输出新的结果，并且一个文件还可以链式的经过多个翻译员翻译。以处理 SCSS 文件为例：SCSS 源代码会先交给 sass-loader 把 SCSS 转换成 CSS； 把 sass-loader 输出的 CSS 交给 css-loader 处理，找出 CSS 中依赖的资源、压缩 CSS 等； 把 css-loader 输出的 CSS 交给 style-loader 处理，转换成通过脚本加载的 JavaScript 代码；可以看出以上的处理过程
转载
2021-06-30 09:51:16
109阅读
本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示... ...
转载
2021-09-27 23:02:00
403阅读
2评论
下载链接:https://pan.baidu.com/s/1oPHeh4Izc7ufuTT8FXnBNg密码:u4d7
原创
2018-05-17 09:15:58
1364阅读
Webpack 是一种现代 JavaScript 应用的打包工具，通过将代码及其依赖项打包成静态文件，方便在浏览器中加载和运行。此文章是基本使用与设计概述
原创
2024-10-27 06:18:34
28阅读
我们通常在做项目时可能会把第三方库打包到bundle中，比如下面这张图如果不想把第三方库打包到bundle中，这就有了externals。官方的使用externals比较
转载
2021-11-20 09:22:48
484阅读
我们在日常开发时，有一个需要在开发状态下的优化，就是浏览器能自动显示修改后的代码，而无需我们手动刷新。1. 自动刷新浏览器为了能实现浏览器自动刷新，需要做两件事情:监听文件变化自动刷新浏览器1.1 监听文件变化监听文件变化是在webpack模块进行。1.1.1 方式需要在webpack中开启监听模式，有两种方式（开启监听模式后，可以设置监听相关配置watchOptions）：在webpack配置文
Learn how to use the new Webpack Dashboard from Formidable Labs to display a pretty, useful output for monitoring the status of your webpack builds. T
转载
2016-08-17 02:49:00
229阅读
2评论
Great improvements and optimizations can be made to the output of bundled code. Prepack provides the ability to optimize code at build-time, producing
转载
2017-05-05 18:37:00
236阅读
2评论
CSS有Less、Scss、Stylus等预处理器，它们使CSS可以和编程语言一样有变量、控制语句等功能，这大大提高了CSS代码复用率、开发效率。 JavaScript有TypeScript、Flow等超集，TypeScript使得JavaScript更适合开发大型应用软件，减少多人协同开发带来的， ...
转载
2021-10-01 23:33:00
367阅读
2评论
1. 初识webpack 安装 Webpack 在安装 Webpack 前，你本地环境需要支持 node.js。 使用 npm 安装 webpack： npm install webpack webpack-cli -g //全局安装 npm install webpack webpack-cli ...
转载
2021-10-20 19:50:00
201阅读
2评论
什么叫webpack：webpack 是一个模块打包工具,起初它只能打包js文件，发展到现在可以打包任何
原创
2019-12-02 22:02:41
238阅读
目录1. 什么是webpack？1.1 JavaScript模块化1.2 CSS模块化1. 什么是webp
原创
2022-07-12 21:07:59
253阅读
引言在前端开发领域，构建工具的选择直接影响着开发体验和项目性能。近年来，Webpack作为老牌构建工具一直占据主导地位，而Vite作为后起之秀也迅速获得了广泛关注。本文将深入比较这两大构建工具的核心原理、优缺点及适用场景，帮助开发者做出更明智的技术选型。一、构建工具的核心职责现代前端构建工具主要承担以下职责：模块打包：将分散的模块文件打包成浏览器可运行的格式代码转换：处理JSX、TypeScrip
Webpack Bundle Analyzer是一个用于可视化的工具，它可以帮助你分析Webpack打包后的输出文件，查看哪些模块占用了最多的空间，从而进行优化。
首先，你需要安装Webpack Bundle Analyzer和Webpack本身：
npm install webpack webpack-cli --save-dev
npm install webpack-bundle-analy
原创
精选
2024-08-17 22:29:10
297阅读
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
mode: "development",//打包的两种模式
转载
2021-01-20 10:02:40
331阅读
2评论
