webpack
文章平均质量分 55
微笑边缘的金元宝
观察入微的眼睛,波澜不惊的内心,希望我能拥有。
展开
-
webpack运行原理;构建工具的定义;webpack的定义;编写webpack loader; 编写webpack plugin;
构建工具的定义构建就是做这件事情,把源代码转换成发布到线上的可执行 JavaScrip、CSS、HTML 代码,包括如下内容。代码转换:TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。文件优化:压缩 JavaScript、CSS、HTML 代码,压缩合并图片等。代码分割:提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。模块合并:在采用模块化的项目里会有很多个模块和文件,需要构建功能把模块分类合并成一个文件。自动刷新:监听本地源代码的变化,自动重原创 2022-04-07 18:43:08 · 427 阅读 · 0 评论 -
vue2 + vant + typescript(TS)使用 postcss-to-px-viewport
module.exports = { ...... // css 相关配置 css: { // 为预处理器的 loader 传递自定义的选项。 loaderOptions: { postcss: { // 传递给 postcss-loader的自定义选项 plugins: [ require('postcss-px-to-viewport')({ unitToConvert: 'px', //需原创 2021-04-28 16:24:22 · 908 阅读 · 0 评论 -
VUE3+Vant3,IOS10以下:cannot declare a const variable twice: ‘e‘
问题:代码编译后,苹果手机 IOS 10 以下的系统报错,cannot declare a const variable twice: 'e’报错内容意思就是:变量e不能被声明两次;例如编译后:let e = 'xx';if(true){ let e = 'yy';}注意:这段代码在浏览器里可以正常执行,因为let的作用于是块级作用于,但是在ios10系统中则会报错;由此确定这是ios10的一个bug;前提:首先当前使用的vue-cli 内置了 uglifyjs-webpack-pl原创 2021-03-11 20:45:18 · 830 阅读 · 0 评论 -
webpack打包之后的文件过大的解决方法
1、AggressiveSplittingPlugin : 可以将 bundle 拆分成更小的 chunk,直到各个 chunk 的大小达到 option 设置的 maxSize。它通过目录结构将模块组织在一起。2、CommonsChunkPlugin插件: 是一个可选的用于建立一个独立文件(又称作区块)的功能,这个文件包括多个入口chunk的公共模块.3、DLLPlugin 和 DLLRe...原创 2019-10-12 19:21:37 · 1230 阅读 · 0 评论 -
webpack(import路径配置)(自动打开浏览器)(自定义运行命令)
原创 2019-03-20 13:39:37 · 1894 阅读 · 0 评论 -
webpack在vue项目中根据不同环境配置通用路径
let apiOne = { production: '/apiOne', development: '/api', testing: 'api', presentation: 'api'}let apiTwo = { production: '/apiTwo', development: '/api', testing: 'api', presentation...原创 2019-05-08 20:23:54 · 711 阅读 · 0 评论 -
vue cli 2.x、 3.x前端项目不再服务器根目录,显示空白页面的问题
出现的问题:打包到服务器后,出现资源引用路径的问题打包到服务器后,出现空白页的问题打包到服务器后,出现引入的css的type被拦截转换为"text/plain"问题打包到服务器后,出现路由刷新404的问题vue cli 2.x①、router配置–指定路由起始(在开发模式中,Vue项目被放在了webpack配合nodeJs生成的本地服务器的根目录,但是在真实服务器中,项目肯定不会放...原创 2019-08-11 20:26:41 · 1164 阅读 · 0 评论 -
webpack包分析图
vue cli2.xnpm run build --reportVUE Cli3.xnpm run build – --report原创 2019-09-02 20:48:36 · 574 阅读 · 0 评论