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

webpack command not found 的意外的坑

写给自己做个记录：弄了半天执行了下面操作npminstallwebpack-g因为小白不懂原理，所以执行了好遍，结果还是如题， webpackcommandnotfound 网上搜了半天，试了各种办法，明明是显示安装成功了，突然醒悟安装node的时候，是用编译后的文件，然后用...

代码星球 ·2021-01-09

webpack 中比较难懂的几个变量名称

webpack中有几个比较难懂的变量名称，可能对刚开始学习的人不是很友好，所以今天小邹就整理了一下，主要是做一个总结性的概括。首先我们来看一张图：看这个图就很明白了：对于一份同逻辑的代码，当我们手写了一个个的文件，它们无论是ESM还是commonJS或是AMD，他们都是 module；...

代码星球 ·2021-01-08

webpack 单独打包指定JS文件

最近接到一个需求，因为不确定打出的前端包所访问的后端IP，需要对项目中IP配置文件单独拿出来，方便运维部署的时候对IP做修改。因此，需要用webpack单独打包指定文件。module.exports={entry:{app:APP_FILE//入口文件},output:{publicPath:'./dist/',//输...

代码星球 ·2020-12-30

webpack+vue解决前端跨域问题

webpack跨域，在这里整理了一下逻辑首先不是为了axios库来进行跨域的，而是直接通过node的webpack设置代理来完成跨域的。先贴一条自己请求的连接1、设置自定义域：在config目录下，找到dev.env.js文件：2、设置index在config目录下找到index.js文件：设置dev下的proxyTa...

代码星球 ·2020-12-30

局部安装webpack时,使用webpack命令时提示webpack不是内部命令解决方法

现在js发展太快了，根本看不懂啊。于是乎想做做功课，于是乎看到了这些“奇怪”的写法，原来好多都是遵循了ECMASCRIPT6，好吧，在本地看看怎么用的吧。写在本地的环境下，发现各种报错，根本不能用。还在纳闷呢，这个例子是怎么能写成这个样，还在那教人的呢？误人子弟？怎么跑呢？各种搜索才发现，原来我...

代码星球 ·2020-12-30

webpack安装与配置（window）

最近几天也是刚刚学习webpack工具，所以就要从安装开始我的学习的第一步。在网上搜索了找到webpack官网，在下载webpack就要先安装nodejs，在nodejs里用集成的npm下载webpack,在全局安装后，在终端输入webpack命令终端报错说是webpack不是内部命令之类的错误。接下来就是我的安装之旅...

代码星球 ·2020-12-30

如何扩展 Create React App 的 Webpack 配置

Create react App（以下简称CRA）是创建 react 应用的一个脚手架，它与其他脚手架不同的一个地方就是将一些复杂工具（比如 webpack）的配置封装了起来，让使用者不用关心这些工具的具体配置，从而降低了工具的使用难度。但是对于一些熟悉 we...

代码星球 ·2020-12-25

webpack Code Splitting浅析

CodeSplitting是webpack的一个重要特性，他允许你将代码打包生成多个bundle。对多页应用来说，它是必须的，因为必须要配置多个入口生成多个bundle；对于单页应用来说，如果只打包成一个bundle可能体积很大，导致无法利用浏览器并行下载的能力，且白屏时间长，也会导致下载很多可能用不到的代码，每次上线...

代码星球 ·2020-12-25

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

移动端适配的两种方案及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