草庐IT

webpack-dev-middleware

全部标签

Webpack的使用

简介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版本不一至导致的 Uncaught TypeError:n is not a function at window.webpackJsonp 错误

经查,发现我们开发的程序是用webpack打包发布的,而该页面在微信小程序打开时,对方注入了几个微信相关的js脚本,而该脚本也是使用webpack打包生成的。双方的js代码导致window.webpackJsonp被重复定义。当两者的webpack版本不同时,生成的window.webpackJsonp,并不一致:3.x版,该对象为函数,4.x版(不确定),该对象为数组。所以调用该对象时就产生了上面的错误。搜索引擎搜索一通,发现在webpack配置文件中加入以下配置,即可绕过该对象重复定义问题output:{jsonpFunction:"webpackJsonpFunction3f"}从web

webpack版本不一至导致的 Uncaught TypeError:n is not a function at window.webpackJsonp 错误

经查,发现我们开发的程序是用webpack打包发布的,而该页面在微信小程序打开时,对方注入了几个微信相关的js脚本,而该脚本也是使用webpack打包生成的。双方的js代码导致window.webpackJsonp被重复定义。当两者的webpack版本不同时,生成的window.webpackJsonp,并不一致:3.x版,该对象为函数,4.x版(不确定),该对象为数组。所以调用该对象时就产生了上面的错误。搜索引擎搜索一通,发现在webpack配置文件中加入以下配置,即可绕过该对象重复定义问题output:{jsonpFunction:"webpackJsonpFunction3f"}从web

Serverless Devs 重大更新,基于 Serverless 架构的 CI/CD 框架:Serverless-cd

近日,Serverless开发者平台ServerlessDevs重磅发布基于Serverless架构的轻量级CI/CD框架——Serverless-cd。Serverless-cd是一款运行在Serverless架构上的功能强大而灵活,安全,低成本的CI/CD开源框架。该框架基于ServerlessDevs开发者工具打造,通过Serverless-cd开发者可以快速构建企业内部应用管理PaaS平台。开发者更想关注业务价值的创造ServerlessDevs是CNCF沙箱孵化项目,2020年由阿里云开源,它是一个开源开放的Serverless开发者平台,ServerlessDevs也是业内首个支持

Serverless Devs 重大更新,基于 Serverless 架构的 CI/CD 框架:Serverless-cd

近日,Serverless开发者平台ServerlessDevs重磅发布基于Serverless架构的轻量级CI/CD框架——Serverless-cd。Serverless-cd是一款运行在Serverless架构上的功能强大而灵活,安全,低成本的CI/CD开源框架。该框架基于ServerlessDevs开发者工具打造,通过Serverless-cd开发者可以快速构建企业内部应用管理PaaS平台。开发者更想关注业务价值的创造ServerlessDevs是CNCF沙箱孵化项目,2020年由阿里云开源,它是一个开源开放的Serverless开发者平台,ServerlessDevs也是业内首个支持

typescript+webpack+api-extractor构建一个js库

依赖说明入口文件tsconfig配置webpack配置文件webpack入口文件配置webpack为typescript和less文件配置各自的loaderwebpack的output配置运行webpack进行打包测试验证输出esm模块已经输出了umd格式的js了,为什么还要输出esm模块?----TreeShaking用tsc输出esm和类型声明文件完善package.json文件package.json中添加exports配置声明模块导出路径用api-extractor提取出干净的.d.ts配置使用APIextractor更新package.json用@internal标注只希望在内部使用

typescript+webpack+api-extractor构建一个js库

依赖说明入口文件tsconfig配置webpack配置文件webpack入口文件配置webpack为typescript和less文件配置各自的loaderwebpack的output配置运行webpack进行打包测试验证输出esm模块已经输出了umd格式的js了,为什么还要输出esm模块?----TreeShaking用tsc输出esm和类型声明文件完善package.json文件package.json中添加exports配置声明模块导出路径用api-extractor提取出干净的.d.ts配置使用APIextractor更新package.json用@internal标注只希望在内部使用

配置Webpack Dev Server 实战操作方法步骤

本文摘要:配置WebpackDevServer可以解决本地开发前端应用时,手动执行webpack命令或yarnbuild命令,再去浏览器中访问dist/index.html的麻烦耗时操作,可有效简化流程。本文实战演练配置WebpackDevServer的方法与步骤。在本地开发前端应用时,每次都手动执行webpack命令或yarnbuild命令,再去浏览器中访问dist/index.html是一件非常麻烦耗时的事情,可以通过配置WebpackDevServer来解决这个问题。实际上vue-cli中也配置了WebpackDevServer,每次启动Vue应用的命令yarnserve,本质上就是启动

配置Webpack Dev Server 实战操作方法步骤

本文摘要:配置WebpackDevServer可以解决本地开发前端应用时,手动执行webpack命令或yarnbuild命令,再去浏览器中访问dist/index.html的麻烦耗时操作,可有效简化流程。本文实战演练配置WebpackDevServer的方法与步骤。在本地开发前端应用时,每次都手动执行webpack命令或yarnbuild命令,再去浏览器中访问dist/index.html是一件非常麻烦耗时的事情,可以通过配置WebpackDevServer来解决这个问题。实际上vue-cli中也配置了WebpackDevServer,每次启动Vue应用的命令yarnserve,本质上就是启动

Serverless Devs 重大更新,基于 Serverless 架构的 CI/CD 框架:Serverless-cd

近日,Serverless开发者平台ServerlessDevs重磅发布基于Serverless架构的轻量级CI/CD框架——Serverless-cd。Serverless-cd是一款运行在Serverless架构上的功能强大而灵活,安全,低成本的CI/CD开源框架。该框架基于ServerlessDevs开发者工具打造,通过Serverless-cd开发者可以快速构建企业内部应用管理PaaS平台。开发者更想关注业务价值的创造ServerlessDevs是CNCF沙箱孵化项目,2020年由阿里云开源,它是一个开源开放的Serverless开发者平台,ServerlessDevs也是业内首个支持