webpack的核心概念，放到2022年相信很多的小伙伴都已经非常清楚了。但是，对于webpack配置中的output.path、output.filename以及output.publicPath，还有很多小伙伴还不理解。本文讲围绕output.filename、output.path与output.publicPath，讲解它们的功能，并分析这些配置与webpack中常使用到的MiniCssExtractPlugin、HtmlWebpackPlugin等插件的关系。
市面上现在有很多bundler，最著名的就是webpack，此外常见的还有 browserify，rollup，parcel等。虽然现在的bundler进化出了各种各样的功能，但它们都有一个共同的初衷，就是能给前端引入模块化的开发方式，更好的管理依赖、更好的工程化。
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
相信很多人在学习前端过程中，都接触过webpack。但可能在创建前端项目时，都只是用脚手架vue-cli的初始化命令跑一下，将webpack当成一个黑盒使用，刚开始我也是这样，但是虽然一切配置都能通过脚手架自动完成，我们不用学会如何手动去配置，但是我们也至少应该知道，webpack每条配置的作用。
一直想学webpack的打包过程，找到了很多的教程，一直没有找到一个比较好的，今天找到一个比较差不多的，转载一下！
再一次，在网上找的不少文章都不合我的需求，很多文章都是只简单介绍了生产环境下配置，没有介绍开发环境下的配置，有的也没有将多入口结合 vue-router、 vuex、 ElementUI 等进行配置，因此在下通过不断探坑，然后将思路和配置过程记录下来，留给自己作为笔记，同时也分享给大家，希望可以帮助到有同样需求的同学们～
它是一个将一切资源（如scripts / images / styles/ assets）都当成模块的模块化打包工具。
再一次，在网上找的不少文章都不合我的需求，很多文章都是只简单介绍了生产环境下配置，没有介绍开发环境下的配置，有的也没有将多入口结合 vue-router、vuex、ElementUI 等进行配置，因此在下通过不断探坑，然后将思路和配置过程记录下来，留给自己作为笔记，同时也分享给大家，希望可以帮助到有同样需求的同学们～
node操作Excel的例子 # 安装依赖 npm install一下以下模块 node-xlsx(基于Node.js解析excel文件数据及生成excel文件，仅支持xlsx格式文件) excel-export(基于Node.js将数据生成导出excel文件，生成文件格式为xlsx) fs # 示例代码 demo.js const fs = require('fs') const xlsx = require('node-xlsx') const nodeExcel = require('excel-e
最近在做项目的时候遇到了一个场景：一个项目有多个入口，不同的入口，路由、组件、资源等有重叠部分，也有各自不同的部分。由于不同入口下的路由页面有一些是重复的，因此我考虑使用 Webpack 多入口配置来解决这个需求。
gulp 是一个前端构建工具，它能通过自动执行常见任务，比如编译预处理 CSS ，压缩 JavaScript 和刷新浏览器，来改进网站开发的过程，从而使开发更加快速高效。
原理：将 webpack中entry配置的相关入口chunk 和 extract-text-webpack-plugin抽取的css样式 插入到该插件提供的template或者templateContent配置项指定的内容基础上生成一个html文件，具体插入方式是将样式link插入到head元素中，script插入到head或者body中。
对于打包工具来说，最简单也是最复杂的操作莫过于路径的安排了，原本都在src下的资源，想要打包到dist目录下，但是打包出来的文件路径甚不如人意。明明想要分门别类地放置文件文件，然后却像大杂烩一样js,html，css甚至图片都混在了一起。虽然打包之后运行没什么问题，但是这是要逼死强迫症患者啊。
首先，确保你已经安装了Node.js和yarn或npm。然后，通过命令行创建一个新的Nuxt.js项目：
Emscripten是用于编译为使用LLVM构建的asm.js和WebAssembly的工具链，可让您以几乎本机的速度在Web上运行C和C ++，而无需插件。
webpack 的作用是根据入口文件将源代码编译（构建、打包）成最终代码。中间经过webpack打包，打包的过程就是编译
在Web项目的开发中,js,css文件会随着项目的开发变得越来越多,越来越大,这就给给性能方面带来一些问题,如,页面引入的的js,css越多的话,那么对就增加了http请求数,解决该问题的一个好的方法
前端工程化：在企业级的前端项目开发中，把前端开发所需的工具、技术、经验等进行规范化、标准化。
TypeScript中引入了字符串模板，通过字符串模板可以方便的实现字符串换行的连接、方便变量的使用等。 1.在WebStorm中新建一个文件，后缀名为ts。 在建立ts文件时，WebStorm会问你是否需要自动生成对应的js文件，并设置js文件保存的位置。如果采用Visual Studio 2017，会自动在ts文件相同的文件夹生成对应的js文件。 ts与自动生成的js文件的配置关系，IDE会自动生成一个tsconfig.json的文件进行描述，如下： { "compilerOptions": {
执行 npm run pack ，定义了两个入口文件，也相应生成两个dist文件
loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。简言之，我们利用 loader 来处理非 js 类型的模块，用 plugin 来简化我们的打包工作。
从开发文件到生产文件 有一天我突然意识到一个问题，在使用react框架搭建应用时，我使用到了sass/less，JSX模版以及ES6的语法在编辑器下进行开发，使用这些写法是可以提高开发的效率。可是浏览
有一天我突然意识到一个问题，在使用react框架搭建应用时，我使用到了sass/less，JSX模版以及ES6的语法在编辑器下进行开发，使用这些写法是可以提高开发的效率。可是浏览器它本身是并不能够“理解”这些语法的呀。就像下面这张图：
对于一份同逻辑的代码，当我们手写了一个个的文件，它们无论是 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 文件。
VFP里面运行JS，可以利用JS很多很多资源，做到以前不能做到的事情，那今天更高级的混合方式来了，混合quickjs来做一些很酷的工作。
一、前言 当使用CoffeeScript、ClojureScript编写前端脚本时，当使用Less、Sacc编写样式规则时，是否觉得调试时无法准确找到源码位置呢？当使用jquery.min.js等经压缩后的工具库时，是否觉得连调试的门都不不知道在哪呢？ 针对上述问题，google为我们提供了Source Maps这一解决方案，以下内容为对Source Maps的学习记录，以便日后查阅。 由于篇幅较长，特设目录一坨！ 二、示例 三、Sou
昨晚弄到三点就是为了 DIY 这 2 个页面，想给老婆一个浪漫的惊喜。 预览地址： 爱情纪念：http://zhangge.net/love 爱的故事：http://zhangge.net/love/forever 在线制作：http://zhangge.net/love/index.php 是别人的源码，没什么好说的，直接贴上作者说明： 一、超炫表白页面： 作者原话：为了预热情人节，麦葱二次开发了个表白程序。程序放在 BAE 上面，因为本地写这个原因，生成的页面过段时间就找不到了，导致链接页面 404，麦
最近研究了下工作流，先说一下我司的情况，我司现在是pc端用php直出，h5用vuejs构建，vuejs部分就不进行描述了，因为网上的构建方法都是很成熟的了。 以下是php直出，需要向后台同学提供html文件的构建方法。调试都是在本地调试的，调试完成后打包生成html交付给后台同学。
前端工程化指的是：在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、 标准化。最终落实到细节上，就是实现前端的“4 个现代化”： 模块化、组件化、规范化、自动化
gulpjs是一个前端构建工具，与gruntjs相比，gulpjs无需写一大堆繁杂的配置参数，API也非常简单，学习起来很容易，而且gulpjs使用的是nodejs中stream来读取和操作数据，其速度更快。如果你还没有使用过前端构建工具，或者觉得gruntjs太难用的话，那就尝试一下gulp吧。
这几天，都遇到过有人问过相似的问题，就是用vue和webpack搭建目录的时候，怎么把单页面应用的配置改成多文件应用，或者是怎么把多文件应用的配置改成单文件应用。这个情况，我之前有处理过，公司的同事教过我，我就针对这个情况写下此篇文章。各位如果觉得我哪里写得不够好，写错了，欢迎指出，大家一起进步。
有多个 Node.js 进程需要一起管理时，各自需要的参数也不同时，创建一个配置文件来管理是最好的方案。
目前做代码压缩合并的工具有很多，诸如gulp，webpack，grunt等等，可以说这些项目构建工具的功能非常之强大：图片压缩、图片转base64、css和js的压缩以及合并，文件的md5重命名 ……。本人之前也是在项目中没具体使用过，闲来无事，查查资料，自己写了一个用gulp工具的小demo，有很多不足之处，欢迎指点。 第一步：安装node和npm 不用说，要用gulp，得先安装node和npm（安装完node后，自带有npm） Node官网下载地址：https://nodejs.org/en/downl
Webpack是一个前端构建工具，本文将简要介绍它最常用的功能，并创建一个基于webpack的前端开发环境。
引言 本文从一个很小的前端工程说起，慢慢推导出我目前多个项目前端实践的工程结构。 为Web前端项目建工程 Web工程需要建工程吗？不是建个目录就可以开搞的吗？你一定会这么问。但事实上面对越来越复杂的前端页面逻辑，真的有必要好好组织一下前端的代码结构。同时前端代码的依赖管理、编译方式真的需要考量一下。 mkdir -p demo1 cd demo1 npm install # 回答一系列回答后，一个npm工程就建好了 创建前端源代码目录及编译后产物目录 从Java带来的习惯，我是不习惯将源代码与编译后的产物放
按照上述操作以后，才可以正常访问新添加的页面，之后才开始对新页面进行正常开发。但是这样的机械化步骤我们完全可以用代码帮我们执行，更进一步，对于一些简单的页面，我们甚至可以一键生成页面，包括从后端请求数据等操作。
在过去的几年中，Vue.js 已成为 Web 应用程序开发的流行选项。用户变多后，这个框架开始将触角伸向了静态站点生成，一个曾经由 React 统治的领域。
本篇开始学习webpack打包的构建配置，所用版本为webpack 4.16.1和webpack-cli 3.2.3。
上图并没有出现cli1-ui和cli1-permission目录 cli1-ui没有出现的原因是项目第一次创建没有对应的模型文件，虽然生成器为你提供了一个example_mode.js模型配置文件，但此文件仅仅用于示例作用。
Build. Build主要会做以下动作: 编译项目文件并输出到某个目录 Build targets决定了输出的结果 bundling 打包 生产环境的build还会进行uglify和tree-shaking(把没用的代码去掉) ng build. 可以先看帮助: ng build --help 针对开发环境, 就是用命令 ng build. 默认情况下, 它的输出目录在.angular-cli.json文件里ourDir属性配置的, 默认是/dist目录. build之后会看见dist里面有这些文件: i
由于业务需要，近期团队要搞一套自己的UI组件库，框架方面还是Vue。而业界已经有比较成熟的一些UI库了，比如ElementUI、AntDesign、Vant等。
我们的打包配置有一个基类文件，并根据不同的打包需求，有不同子类文件——完整组件库打包、单个组件打包、打包示例工程。
问题在于，由于打包动作会将我们的原始代码进行编译、压缩，最后在产物中早已没有我们的原始代码，打开产物，我们可以见到的只有这样的代码：
Chunk 不同于 entry、 output、module 这样的概念，它们对应着 Webpack 配置对象中的一个字段，Chunk 没有单独的配置字段，但却出现在 CommonsChunkPlugin（Webpack3 以前）、optimization.splitChunks（Webpack4 以后）这样的名称之中。
以前使用 JQuery 开发前端页面的时候，页面中引用的资源文件如js、css等，一般尾部加一个 t=[时间戳] 参数，用于防止修改不生效。现在工程化开发，使用 Webpack 编译，打包的资源文件路径里自动带有一串随机字符串，称为 hash：
相信很多前端的朋友都知道webpack是什么，webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
实时音视频
