头图

SegmentFault 思否技术周刊 Vol.52 -- 这份 Webpack 有点料!

Beverly
北京
English

Webpack 是一个前端资源加载/打包工具,只需要相对简单的配置就可以提供前端工程化需要的各种功能。

文章推荐

《Webpack 拆包:关于 splitChunks 的几个重点属性解析》

从分析图中可以比较直观的看出,三个输出 bundle 文件中都包含了 m1.js 文件,这说明有重复的模块代码。splitChunks 的目的就是用来把重复的模块代码分离到单独的文件,以异步加载的方式来节省输出文件的体积。splitChunks 的配置项很多而且感觉官方文档的一些描述不是很清楚,下面通过一些重点配置属性和场景解释来帮助大家理解和弄懂如何配置 splitChunks。为方便理解和简单演示,Webpack 和 splitChunks 的初始设置如下

《用前端构建工具打包后端服务,我到底经历什么》

看到这个 标题,是的,我本是个后端,最近要写点 node.js, 之前写前端,知道 npm build 一下,那么用 javascript 写的后端程序也要 npm build 吧,好的,作为个 gopher , 带着对 javascript 的刻板印象就开干了。
我本 gopher,奈何没有一个会前端的老婆,就自己干前端了,如果干的不对,请及时纠正

《Webpack 基础配置与css相关loader》

本系列文章是我在学习 Webpack 时的总结与收获,希望我的一些学习内容可以帮助到一些正在学习 Webpack 的朋友。本片文章为系列文章的第二篇,包含 Webpack 基础配置与 css 相关 loader

《用 Webpack 从0到1打包一个按需加载的vue组件库》

在vue项目开发中,我们会将经常用到的逻辑或模块抽象成组件,对于那些多个项目都有用到的组件,可以考虑封装成组件库,发布到npm。每次要到只需要npm install xx一下,就不用来回拷贝了。下面我们就从0开始来打包一个vue组件库。

《 Webpack 打包时如何修改文件名》

在使用 Webpack 进行项目打包的时候,我们可通过以下方式对不同类型的资源,进行文件名或文件路径的修改

《在 Webpack 中这样分离环境和代码就好啦》

环境分离主要是区分本地和生产两种环境,本地调试需要能实时看到代码变化,而生产环境需要编译成指定的文件。
可以采用两种方式
开发环境和生产环境分别定义配置文件,在 package.json 中定义对应的指令
开发环境和生产环境共用配置文件,通过参数来区分环境

《其实 Webpack 编译"模块化"的源码没那么难》

浏览器不支持 CommonJS ,在特定场景下才支持 Es Module ,而 Webpack 可以将这些模块化的代码解析成浏览器可识别的语法。那么 Webpack 究竟是对模块化做了怎样的处理呢?一起来看看。

《深度解析 Webpack 5持久化缓存》

持久化缓存是 Webpack 5 所带来的非常强大的特性之一。一句话概括就是构建结果持久化缓存到本地的磁盘,二次构建(非 watch 模块)直接利用磁盘缓存的结果从而跳过构建过程当中的 resolve、build 等耗时的流程,从而大大提升编译构建的效率。

《「基础搭建」从零开始,基于 Webpack 5 搭建一个 Vue-Cli 》

大家平时在进行Vue开发的时候,大部分人都是使用 Vue-cli 这个现成的Vue脚手架来进行开发的,但是用它用了这么久,你难道不想自己搭一个属于自己的 Vue-cli 吗?
今天我就带大家来搭建一个基本的 Vue-cli ,也可以让大家对 Webpack 有更深入的了解!建议大家一定要跟着我一步一步来哦!
事先说明:本文只介绍vue-cli基本配置,关于优化、规范这两方面,我后面会再写两篇文章进行讲解

《 Webpack 打包js文件的分析》

在使用 Webpack 中的项目的时候,我们可以使用 esModule,也可以使用 commonJS,还可以使用 import(moduleName) 进行模块的懒加载,那么这一切 Webpack 是怎么做到的呢?

问答推荐


PS:大家想看哪些方面的技术内容,可以在评论区留言喔 ~
如有问题可以添加小姐姐微信~
image.png

阅读 2.6k

SegmentFault_社区周刊
主题技术周刊,每周分享新鲜有趣的技术干货。
avatar
Beverly
SegmentFault 思否社区打工人

怂人面前全是坑,努力填坑 。

723 声望
2.1k 粉丝
0 条评论
avatar
Beverly
SegmentFault 思否社区打工人

怂人面前全是坑,努力填坑 。

723 声望
2.1k 粉丝
宣传栏