pack主题的文章列表，还有pack的技术要点_第13页

webpack3 升级 webpack4踩坑记录

一.安装安装webpack4最新版本npm install --save-devwebpack@4安装新增依赖webpack-cli这个在webpack3中，webpack本身和它的CLI是在同一个包中，webpack4中将两个分开管理。npm install --save-de...

代码星球 ·2020-12-24

Webpack require.context() 前端工程化之动态导入文件

随着项目越来越大，业务需要越来越多，我们项目的目录层级也是非常的多。如果还是通过import分别引入文件，那是非常的不科学的。比如vue项目vuex文件非常多：importVuefrom'vue';importVuexfrom'vuex';Vue.use(Vuex);importuserfrom'./stores/us...

代码星球 ·2020-12-24

webpack 从入门到放弃

随着前端项目复杂程度越来越高，依赖也越来越多，为了提高项目中代码的可复用性，前端开始提出模块化开发的思路，前端模块化会有以下几个痛点：命名冲突文件依赖代码复用模块化，会将相关的代码封装成一个package包的文件，当需要的时候，直接拿来用即可(import引入)。至于相关文件的直接依赖如何处理，webpack会帮我们解...

代码星球 ·2020-12-24

webpack是什么？

从前的代码书写方式在 html 文件里使用script标签引入各个 JavaScript 文件。<html><body><scriptsrc="./header.js"></script>...

代码星球 ·2020-12-24

package.json中你还不清楚的browser，module，main 字段优先级

前端开发中使用到 npm 包那可算是家常便饭，而使用到 npm 包总免不了接触到 package.json 包配置文件。那么这里就有一个问题，当我们在不同环境下 import 一个 npm 包时，到底加载的是 ...

代码星球 ·2020-12-24

移动端适配的两种方案及flexible和px2rem-loader在webpack下的配置

移动端适配，目前自己常用的两种方案，参考以下两篇好文方案一：使用lib-flexible包使用flexible包方式，安装 lib-flexible包和px2rem-loader包npminstall--save-devlib-flexiblepx2rem-loader在需要的js文件...

代码星球 ·2020-12-24

webpack 源码从零开始：apable模型

最近在看webpack的源码，发现有个比较头疼的点是：代码看起来非常跳跃，往往看不到几行就插入一段新内容，为了理解又不得不先学习相关的前置知识。层层嵌套之后，发现最基础的还是tapable模型，因此先对这部分的内容做一个介绍。 Webpack的流程可以分为以下三大阶段：初始化：启动构建，读取与合并配置参数，加...

代码星球 ·2020-12-24

webpack优化分享

webpack 就像一条生产线，要经过一系列处理流程后才能将源文件转换成输出结果。这条生产线上的每个处理流程的职责都是单一的，多个流程之间有存在依赖关系，只有完成当前处理后才能交给下一个流程去处理。插件就像是一个插入到生产线中的一个功能，在特定的时机对生产线上的资源做处理。Webpack通过Tapable来组...

代码星球 ·2020-12-24

webpack常用配置

看《深入浅出webpack》总结一下常用的webpack的属性的含义并加了一些自己的链接，写在一个文件下更能有全局感受，更能理解各个属性中间的关系，重点要关注entry,output,resolve,module, plugins几部分这并不是一个拿来可用的配置，主要是为了更好理解常用的一些web...

代码星球 ·2020-12-24

webpack常用构建优化总览

简介读了《深入浅出webpack》总结一下常用的webpack的构建优化策略，可通过以下手段来提升项目构建时的速度更精准的loader规则将loader规则写清楚仅让需要处理的文件，进入loader处理环节，如下rules:[{//正则尽量准确test:/.js$/,//使用缓存，缓存后在文件未改变时编译会...

代码星球 ·2020-12-24

webpack打包优化的四种方法（多进程打包，多进程压缩，资源 CDN，动态 polyfill）

一、打包分析1.1、速度分析我们的目的是优化打包速度，那肯定需要一个速度分析插件，此时 speed-measure-webpack-plugin 就派上用场了。它的作用如下：分析整个打包总耗时每个 plugin 和 loader 的耗时情况首先，安装插件npm...

代码星球 ·2020-12-24

使用react-app-rewired和customize-cra对默认webpack自定义配置

最近在学习react框架，之前一直都是用vue 开发，知道在vue 中知道如何配置一下相关的webpack 有助于开发，学react 过程中，我也在想这些该怎么配置啊，所以就有这篇文章。这篇文章主要是讲react-create-app生成的项目利用react-app-rewire...

代码星球 ·2020-12-24

扔掉 cli，webpack工程轻量化配置实战

之前有用 webpack4与babel7改造基于vue-cli2生成的工程模板，介绍文章在此。之后通过一些实践，除去了cli工具相对复杂的配置结构，提供轻量化版本的配置方案。之所以说是轻量化，是相对于vue、react等框架提供的官方cli工具而言的。并不是说这些cli工具不好，它们本身提供了开箱即用的良好特...

代码星球 ·2020-12-24

webpack 加载动态图片

所谓动态图片指的是接口返回的图片地址，这里的地址指的是本地的图片地址，而非网络图片的url。本地有一个image文件夹，存放需要用到的图片。按照接口返回的图片地址比对去加载。webpack加载图片首先想到的是file-loader或者url-loader 加载图片的配置首先安装file...

代码星球 ·2020-12-24

如何使用webpack打包一个库library？

日常我们开发了一个库之后，如何打包之后提供给别人使用呢？如果你不清楚，就继续看吧！！！ mkdirlibrarycdlibrarynpminit-y经过以上步骤后会生成一个library文件夹，里面包含一个package.json文件。然后简单修改为如下所示：{"name":"library","versio...

代码星球 ·2020-12-24