对于一份同逻辑的代码，当我们手写了一个个的文件，它们无论是 ESM 还是 commonJS 或是 AMD，他们都是 module； 当我们写的 module 源文件传到 webpack 进行打包时，webpack 会根据文件引用关系生成 chunk 文件，webpack 会对这个 chunk 文件进行一些操作； webpack 处理好 chunk 文件后，最后会输出 bundle 文件，这个 bundle 文件包含了经过加载和编译的最终源文件，所以它可以直接在浏览器中运行。 一般来说一个 chunk 对应一个 bundle，比如上图中的 utils.js -> chunks 1 -> utils.bundle.js；但也有例外，比如说上图中，我就用 MiniCssExtractPlugin 从 chunks 0 中抽离出了 index.bundle.css 文件。
进行重新加载编译。实际就是将浏览器不认识的语法编译成浏览器认识的语法。比如less编译成css，ES6 语法 转成 ES5等等。
原文：https://codewithhugo.com/microbundle-typescript-npm-module/
Webpack用于编译JavaScript模块。安装以后，可以通过CLI或API使用它。如果你对webpack还有点陌生，可以先看看它的核心概念以及一些比较，了解为什么要使用它。
我们知道，Node.js是基于CommonJS规范进行模块化管理的，模块化是面对复杂的业务场景不可或缺的工具，或许你经常使用它，但却从没有系统的了解过，所以今天我们来聊一聊Node.js模块化你所需要知道的一些事儿，一探Node.js模块化的面貌。
前两天为了优化公司的代码打包项目，恶补了很多 webpack4 的知识。要是放在几年前让我学习 webpack 我肯定是拒绝的，之前看过 webpack 的旧文档，比我们内部项目的文档还要简陋。
动态与静态CommonJS与ES6 Module最本质的区别在于前者对模块依赖的解决是“动态的”，而后者是“静态的”。在这里“动态”的含义是，模块依赖关系的建立发生在代码运行阶段；而“静态”则是模块依赖关系的建立发生在代码编译阶段。
所谓打包多页面，就是同时打包出多个 html 页面，打包多页面也是使用 html-webpack-plugin，只不过，在引入插件的时候是创建多个插件对象，因为一个html-webpack-plugin 插件对象只能打包出一个 html 页面。如:
前两篇的博客中提及，webpack主要作用是对 解决模块之间的依赖，把各个模块按照特定的规则和顺序组织在一起，那么我们就要对资源处理的流程有一个了解。各个流程如下：
比如说，在index.html中引用到了外部的js和css文件，这两个文件都通过相对路径引用了某一张图片；这些文件所在的目录如下：
快来免费体验ChatGpt plus版本的，我们出的钱 体验地址:https://chat.waixingyun.cn可以加入网站底部技术群，一起找bug，...
微信小程序作为一个轻量级的应用平台，为用户提供了便捷的信息获取和服务体验。本文将以一个新闻阅读类的微信小程序为例，详细介绍如何实现新闻列表展示、图片加载、Tab滑动切换、获取数据、处理图片加载失败、数据缓存、分页加载、错误处理、下拉刷新、列表项点击跳转、用户授权、搜索功能、图片预览和小程序分享等功能。跟随本文的步骤，你将轻松掌握微信小程序的开发技巧，为用户打造一款实用且美观的新闻阅读应用。
对古老的网站进行维护, 短时间内用react或vue组件化重写全部页面不太现实,但用webpack做个打包, 还是可行性的, 配置好webpack多入口多出口,只需对网站进行少量的改动, 就可以愉快的用scss, es6, 等语法写网站了
随着Meteor1.3 正式版的临近，我们再来回顾一下Mantra，并讲一下使用它的原因。Mantra是Meteor 1.3+React的一种应用架构规范，它包含了一系列的规范和约定，如果你遵循Mantra规范，那么你的应用将更加容易构建和扩展。 当我们最初看到Mantra的时候，会觉得它给Meteor应用增加了不少复杂度。为什么我们需要这么多额外的目录和文件呢？随着你认识的深入，你会逐渐意识到这些模块化组织结构的优势所在，它能让我们方便地了解应用的内部机制。同时，它也将让我们更方便地修改应用或者添加新的功
项目搭建以及webpack打包配置流程 创建文件夹EC（文件夹和文件名根据需求自定义） 在EC文件夹下新建文件夹APP 在APP文件夹下新建入口文件index.js 和运行该入口文件的index.html文件 在APP文件夹下新建两个js文件：a,js b.js （当项目级别如react项目，可以根据需求创建components文件夹等等，用于更好地管理模块化项目） APP/index.html <!DOCTYPE html> <html> <head> <meta charse
这系列文章就是手把手教你如何从零构建一个webpack项目。目的就是为了了解webpack打包怎么玩的，平常项目开发中所用如ES6语法、less、vue是如何被打包的，是一个比较基础的内容，我也是为了总结一下这方面的知识点，梳理一下个人的知识体系而写下这些文字。 工具及版本：vscode、webpack(v4.41.5)、node(v10.16.0) git仓库：webpack-demo 1、什么是webpack？ “webpack is a module bundler.”—webpack官网
1：页面的生命周期 在初始页面：index.js中增加如图所示代码 点击“编译”后，运行这个小程序：日志如下图所示：初始页面index.js启动会从app,js中的生命周期方法调用开始：onLaunc
“ 关注 前端开发社区 ，回复 '领取资源'，免费领取Vue，小程序，Node Js，前端开发用的插件以及面试视频等学习资料，让我们一起学习，一起进步
在这篇文章中，我们将研究什么是 CommonJS，以及为什么它会使你的 JavaScript 包变得那么大。
小程序中每一个页面对应一个Page()方法,我们需要把变量和组件的各种事件都写在一个对象里,然后把对象作为这个参数传递给Page方法
webpack的核心概念，放到2022年相信很多的小伙伴都已经非常清楚了。但是，对于webpack配置中的output.path、output.filename以及output.publicPath，还有很多小伙伴还不理解。本文讲围绕output.filename、output.path与output.publicPath，讲解它们的功能，并分析这些配置与webpack中常使用到的MiniCssExtractPlugin、HtmlWebpackPlugin等插件的关系。
本教程总共9篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React多页面应用1(webpack4 开发环境搭建,包括热更新,api转发等)---2018.04.04 2、React多页面应用2(webpack4 处理CSS及图片,引入postCSS,及图片处理等)---2018.04.08 3、React多页面应用3(webpack4 多页面实现)---2018.04.09 4、React多页面应用4(webpack4 提取第三方包及公共组件)---2018
import命令是编译阶段执行的，在代码运行之前。因此这意味着被导入的模块会先运行，而导入模块的文件会后执行。
部署后通过浏览器网络功能抓包发现请求jquery.js与js.js资源失败，代码为404。其原因是index.html中设置的js请求地址为：jquery.min.js与js.min.js,所以解决办法也很简单。修改js目录下的名字，改为jquery.min.js与js.min.js即可，或者在index.html中修改js的正确名。
1、首先新建一个js文件，如：localstorage.js 通过setItem 和getItem设置和获取数据
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换 JSON 数据 客户端支持防御 XSRF
原理：将 webpack中entry配置的相关入口chunk 和 extract-text-webpack-plugin抽取的css样式 插入到该插件提供的template或者templateContent配置项指定的内容基础上生成一个html文件，具体插入方式是将样式link插入到head元素中，script插入到head或者body中。
本文基于“基于create-react-app构建多页面应用框架”项目框架，将其中的 index 页面改成单页面应用框架。
类似于页面，一个自定义组件由json、wxml、wxss、js四个文件组成
本小节介绍下 rollup 和 esbuild 的基础用法，我们都知道 vite 本身使用的 rollup 打包，vite 的插件也和 rollup 的插件机制相吻合； esbuild 是用于在开发环境中对文件进行处理，也有自己的声明周期钩子函数，由于对文件的分割和 css 支持还不太友好，暂未应用到打包环节。
从开发文件到生产文件 有一天我突然意识到一个问题，在使用react框架搭建应用时，我使用到了sass/less，JSX模版以及ES6的语法在编辑器下进行开发，使用这些写法是可以提高开发的效率。可是浏览
有一天我突然意识到一个问题，在使用react框架搭建应用时，我使用到了sass/less，JSX模版以及ES6的语法在编辑器下进行开发，使用这些写法是可以提高开发的效率。可是浏览器它本身是并不能够“理解”这些语法的呀。就像下面这张图：
Vuex 作为中大型 Vue 应用中的“御用”集中数据管理工具，在实习时的公司很早就得到了广泛使用。本文旨在以尽可能简洁的文字向读者展示：如何在一个颇具规模的 Vue 应用中组织和管理 Vuex 的代码。
正如我们想的那样，nodejs每次只能运行一个js脚本，所以如果想运行多个js脚本可以采用引用（require）的方式
前言：以前刚接触 webpack 的时候还是 1，当时大概过了下文档操作了一下当时写的一些注释。后来开发的时候基本写 react 都是用的 create-react-app 或者找别人的搭好的脚手架用。 webpack4 刚出也不算久，重新学习加复习下 webpack 的一些知识。
这是webpack实战系列的第二篇：模块和模块打包。上一篇：webpack实战——打包第一个应用 记录了webpack的一些基础内容与一个简单的小例子，开启了webpack的实战之路，这一篇记录一下关于模块和模块打包。
将素材目录下的index.html页面，拆分成三个文件，分别是：index.css，index.js，index.html
在执行npm run dev的时候，会在当前目录中寻找 package.json 文件, 有点类似 Maven 的 pom.xml 文件，包含项目的名称版本、项目依赖等相关信息。
下载并打开微信开发者工具 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html ，然后导入 my-app 项目：
webpack 的作用是根据入口文件将源代码编译（构建、打包）成最终代码。中间经过webpack打包，打包的过程就是编译
export可以让我们把变量，函数，对象进行模块化，提供外部调用接口，让外部进行引用。先来看个最简单的例子，把一个变量模块化。我们新建一个demo.js文件，然后在文件中输出一个模块变量。
上一节3-9为单页应用生成HTML中只生成了一个 HTML 文件，但在实际应用中一个完整的系统不会把所有的功能都做到一个网页中，因为这会导致这个网页性能不佳。 实际的做法是按照功能模块划分成多个单页应用，每个单页应用生成一个 HTML 文件。并且随着业务的发展更多的单页应用可能会逐渐被加入到项目中去。
运行这些命令会在当前目录中创建一个名为 multiple-page 的目录。在该目录中，它将生成初始项目结构并安装依赖项，目录结构如下所示(tree -I "node_modules")：
entry与output，顾名思义，就是打包的入口与输出，其实之前我们已经接触了这两个参数，下面详细介绍一下这两个参数的配置。
Vue 是很好用，但是以往的都是单页面应用，这就导致了一些传统的项目移植困难，一些用了 JQ 的插件的等等写法都要改变。也还用专门找到相对于的 Vue 的插件才行，这次的 Cli 3.0 可以在原来项目的基础上直接移植，非常方便。
为另一个项目提供可嵌入的功能单页，大部分页面使用时都是独立功能页，个别页面带有左侧边栏（相当于3-4个页面的整合形态），由于资源定位地址的限定，每个页面打包为单页后，入口html文件需要定制命名，且脚本和样式文件需要放在指定的路径下，公共资源地址也必须替换成特殊字符以适配母系统的调用逻辑（比如下面结构中应用jquery.min.js的路径可能是{{publicRoot}}/{{publicLib}}/jquery.minjs）。假设原工程中拥有AB这2个旧页面，现在需要开发CDE这3个页面，目录结构要求如下：
以前使用 JQuery 开发前端页面的时候，页面中引用的资源文件如js、css等，一般尾部加一个 t=[时间戳] 参数，用于防止修改不生效。现在工程化开发，使用 Webpack 编译，打包的资源文件路径里自动带有一串随机字符串，称为 hash：
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
