分类：Webpack

2020
09-27

详解微信小程序工程化探索之webpack实战

前言微信小程序因为其便捷的使用方式，以极快的速度传播开来吸引了大量的使用者。市场需求急剧增加的情况下，每家互联网企业都想一尝甜头，因此掌握小程序开发这一技术无疑是一名前端开发者不可或缺的技能。但小程序开发当中总有一些不便一直让开发者诟病不已，主要表现在：初期缺乏方便的npm包管理机制（现阶段确实可以使用npm包，但是操作确实不便）不能使用预编译语言处理样式无法通过脚本命令切换不同的开发环境，需手动... 继续阅读 >

2020
09-24

详解Webpack抽离第三方类库以及common解决方案

前端构建场景有两种，一种是单页面构建，另一种是多入口构建多页面应用程序（我视野比较小，目前就知道这两种），下面我们针对这两种场景总结了几种抽离第三方类库以及公共文件的解决方案。如果有哪些地方优化不周到，请指点一二，另外求关注求星星，么么哒单页面构建：常规配置constpath=require('path');constMiniCssExtractPlugin=require('mini-css-extract-plugin');constHtmlWebpackPlugin=require('html-webpack-p... 继续阅读 >

2020
09-24

Webpack中SplitChunksPlugin 配置参数详解

代码分割本身和webpack没有什么关系，但是由于使用webpack可以非常轻松地实现代码分割，所以提到代码分割首先就会想到使用webopack实现。在webpack中是使用SplitChunksPlugin来实现的，由于SplitChunksPlugin配置参数众多，接下来就来梳理一下这些配置参数。官网上的默认配置参数如下：module.exports={//...optimization:{splitChunks:{chunks:'async',//代码分割时对异步代码生效，all：所有代码有效... 继续阅读 >

2020
09-24

webpack 动态批量加载文件的实现方法

背景最近笔者在工作中遇到了一个小需求：要实现一个组件来播放帧图片这个需求本身不复杂，但是需要在组件中一次性引入十张图片，就像下面这样：//就是这么任性，下标从0开始~importframe0from'./assets/frame_0.png'importframe1from'./assets/frame_1.png'importframe2from'./assets/frame_2.png'//..省略n张importframe7from'./assets/frame_8.png'importframe8from'./assets/frame_9.png'importframe9from'... 继续阅读 >

2018
06-20

Webpack 4 配置最佳实践

Webpack4发布已经有一段时间了。Webpack的版本号已经来到了4.12.x。但因为Webpack官方还没有完成迁移指南，在文档层面上还有所欠缺，大部分人对升级Webpack还是一头雾水。不过Webpack的开发团队已经写了一些零散的文章，官网上也有了新版配置的文档。社区中一些开发者也已经成功试水，升级到了Webpack4，并且总结成了博客。所以我也终于去了解了Webpack4的具体情况。以下就是我对迁移到Webpack4的一些经... 继续阅读 >