概述webpack的使用中我们会遇到各种各样的插件、loader。webpack的功力主要体现在能理解各个插件、loader的数量上。理解的越多功力越深loader是什么呢？背景了解loader前，我们在来看个问题，有了前面的基础我们还是用个简单的样例来说明由于一切都是模块，我们想用jsimport的方式统一加载css资源//main.jsimport"./main.css";window.addEventListener("load",function(){});//main.cssbody{color:aquamarine;}WebpackAppHellowebpacksplitchunk
概述webpack的使用中我们会遇到各种各样的插件、loader。webpack的功力主要体现在能理解各个插件、loader的数量上。理解的越多功力越深loader是什么呢？背景了解loader前，我们在来看个问题，有了前面的基础我们还是用个简单的样例来说明由于一切都是模块，我们想用jsimport的方式统一加载css资源//main.jsimport"./main.css";window.addEventListener("load",function(){});//main.cssbody{color:aquamarine;}WebpackAppHellowebpacksplitchunk
背景webpack构建过程中的hooks都有什么呢？除了在网上看一些文章，还可以通过更直接的办法，结合官方文档快速让你进入webpack的hook世界写一个入口文件//index.jsconstwebpack=require("webpack");constpath=require("path");constPrintHooksPlugin=require("./PrintHooksPlugin");constconfig={context:path.resolve(__dirname),mode:"production",optimization:{minimize:false,},entr
背景webpack构建过程中的hooks都有什么呢？除了在网上看一些文章，还可以通过更直接的办法，结合官方文档快速让你进入webpack的hook世界写一个入口文件//index.jsconstwebpack=require("webpack");constpath=require("path");constPrintHooksPlugin=require("./PrintHooksPlugin");constconfig={context:path.resolve(__dirname),mode:"production",optimization:{minimize:false,},entr
背景什么是tapable、hook，平时做vue开发时的webpack配置一直都没弄懂，你也有这种情况吗？还是看源码，闲来无聊又看一下webpack的源码，看看能否找到一些宝藏tapable和webpack没有特定关系，可以先看下这篇文章，了解下这个小型库https://webpack.docschina.org/api/plugins/#tapablehttps://blog.csdn.net/mafan121/article/details/1131200814.下面记录下寻宝过程开始执行一次webpack经历了什么，先看一下代码我们分析一下4点引用了webpack我们使用的配置文件调用w
背景什么是tapable、hook，平时做vue开发时的webpack配置一直都没弄懂，你也有这种情况吗？还是看源码，闲来无聊又看一下webpack的源码，看看能否找到一些宝藏tapable和webpack没有特定关系，可以先看下这篇文章，了解下这个小型库https://webpack.docschina.org/api/plugins/#tapablehttps://blog.csdn.net/mafan121/article/details/1131200814.下面记录下寻宝过程开始执行一次webpack经历了什么，先看一下代码我们分析一下4点引用了webpack我们使用的配置文件调用w
简介Webpack是一个其那段资源加载/打包工具，它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源作用可以将多种静态资源js、css、less转换成一个静态文件，减少了页面的请求使用方式全局安装Webpack（尽量在项目目录中执行cmd命令）npminstall-gwebpackwebpack-cli在项目目录的js目录中创建几个js文件（之间的关联任意）。例如common.js、index.js、about.js、main.js(入口js文件)等等打包（只打包js文件）在项目根目录中创建配置文件webpack.config.js（文件名最好固定，内容结构固定
简介Webpack是一个其那段资源加载/打包工具，它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源作用可以将多种静态资源js、css、less转换成一个静态文件，减少了页面的请求使用方式全局安装Webpack（尽量在项目目录中执行cmd命令）npminstall-gwebpackwebpack-cli在项目目录的js目录中创建几个js文件（之间的关联任意）。例如common.js、index.js、about.js、main.js(入口js文件)等等打包（只打包js文件）在项目根目录中创建配置文件webpack.config.js（文件名最好固定，内容结构固定
经查，发现我们开发的程序是用webpack打包发布的，而该页面在微信小程序打开时，对方注入了几个微信相关的js脚本，而该脚本也是使用webpack打包生成的。双方的js代码导致window.webpackJsonp被重复定义。当两者的webpack版本不同时，生成的window.webpackJsonp，并不一致：3.x版，该对象为函数，4.x版（不确定），该对象为数组。所以调用该对象时就产生了上面的错误。搜索引擎搜索一通，发现在webpack配置文件中加入以下配置，即可绕过该对象重复定义问题output:{jsonpFunction:"webpackJsonpFunction3f"}从web
经查，发现我们开发的程序是用webpack打包发布的，而该页面在微信小程序打开时，对方注入了几个微信相关的js脚本，而该脚本也是使用webpack打包生成的。双方的js代码导致window.webpackJsonp被重复定义。当两者的webpack版本不同时，生成的window.webpackJsonp，并不一致：3.x版，该对象为函数，4.x版（不确定），该对象为数组。所以调用该对象时就产生了上面的错误。搜索引擎搜索一通，发现在webpack配置文件中加入以下配置，即可绕过该对象重复定义问题output:{jsonpFunction:"webpackJsonpFunction3f"}从web
