51
Dev开发社区
首页
文章
问答
工具
搜索
登录
注册
#WebPack
使用react-app-rewired和customize-cra对默认webpack自定义配置
最近在学习react框架,之前一直都是用vue 开发,知道在vue 中知道如何配置一下相关的webpack 有助于开发,学react 过程中,我也在想这些该怎么配置啊,所以就有这篇文章。这篇文章主要是讲react-create-app生成的项目利用react-app-rewire...
代码星球
·
2020-12-24
使用
react-app-rewired
customize-cra
默认
webpack
扔掉 cli,webpack工程轻量化配置实战
之前有用 webpack4与babel7改造基于vue-cli2生成的工程模板,介绍文章在此。之后通过一些实践,除去了cli工具相对复杂的配置结构,提供轻量化版本的配置方案。之所以说是轻量化,是相对于vue、react等框架提供的官方cli工具而言的。并不是说这些cli工具不好,它们本身提供了开箱即用的良好特...
代码星球
·
2020-12-24
扔掉
cli
webpack
工程
量化
webpack 加载动态图片
所谓动态图片指的是接口返回的图片地址,这里的地址指的是本地的图片地址,而非网络图片的url。本地有一个image文件夹,存放需要用到的图片。按照接口返回的图片地址比对去加载。webpack加载图片首先想到的是file-loader或者url-loader 加载图片的配置首先安装file...
代码星球
·
2020-12-24
webpack
加载
动态
图片
如何使用webpack打包一个库library?
日常我们开发了一个库之后,如何打包之后提供给别人使用呢?如果你不清楚,就继续看吧!!! mkdirlibrarycdlibrarynpminit-y经过以上步骤后会生成一个library文件夹,里面包含一个package.json文件。然后简单修改为如下所示:{"name":"library","versio...
代码星球
·
2020-12-24
如何
使用
webpack
打包
一个
揭秘webpack plugin
Plugin(插件)是 webpack 生态的的一个关键部分。它为社区提供了一种强大的方法来扩展 webpack 和开发webpack的编译过程。这篇文章将尝试探索webpackplugin,揭秘它的工作原理,以及如何开发一个plugin。 关于Plugin的作用,引用...
代码星球
·
2020-12-24
揭秘
webpack
plugin
升级webpack4错误处理
1.升级到4.0之后未能正常使用处理:npm i webpack webpack-cliwebpack-dev-serverwebpack-merge-D 2. Error:Plugincouldnotberegisteredat'html-webpack-plugin...
代码星球
·
2020-12-24
升级
webpack4
错误
处理
不能不知道的webpack基本配置
前言在很久很久以前,在我们前端还只是页面切图仔的年代,我们开发一个html页面,通常会遇到这些情况:需要引入十几个css和js文件,而且因为他们彼此间有着依赖关系,所以引入的顺序还不能乱。传统的html+css+js开发方式不能不能很好地运用less/scss等css预处理器以及ES6+的高级语法。代码复用性差,可维护...
代码星球
·
2020-12-24
不能
不知道
webpack
基本配置
webpack-dev-server
webpack和webpack-dev-server的区别第一,webpack是构建webpack-dev-server除了构建,还提供web服务 第二,webpack.config.js的路径参数区别entry都一样。ouput不太一样。path和webpack一起,构建后输出文件的位置,这是真实的物理地址...
代码星球
·
2020-12-17
webpack-dev-server
gulp 不是内部或者外部命令 或者 webpack 不是内部或者外部命令
gulp安装也正常,但是就是查看gulp-v的时候报错,原因:缺少系统变量PATH或者PATH变量错误提示:这个系统变量PATH,直接追加就好(多个变量值用分号;隔开),不要删除已经有的系统变量PATH这个变量怎么找?有三种方法可以找到,或许还有其它方法可以找到,自己选择一种喜欢的方式就好(前提一定是全局安装过gulp...
代码星球
·
2020-12-17
或者
不是
内部
外部
命令
webpack编译es6
1安装已安装npm前提下,先全局后在使用的文件夹下安装局部,npminit初始化package.jsonnpminstallwebpack--save-dev2测试 运行后生成b.js运行除了直接webpack命令,还可以修改package.json里面,在sc...
代码星球
·
2020-11-27
webpack
编译
es6
webpack的使用1
1、安装(windows)安了npm后,npminstallwebpack-g,全局位置在 C:UserslihaihongAppDataRoamingnpmode_modules 然后项目文件夹=>npminit#会自动生成一个package.json文件//自己写package.json就...
代码星球
·
2020-11-27
webpack
使用
Webpack打包工具
Webpack是一个打包模块化javascript的工具,在webpack里一切文件皆模块,通过loader转换文件,通过plugin注入钩子,最后输出由多个模块组合成的文件,webpack专注于构建模块化项目。本质上,webpack是javascript应用程序的静态模块打包器。当webpack处理应用程序时,它会递...
代码星球
·
2020-11-21
Webpack
打包
工具
配置webpack中externals来减少打包后vendor.js的体积
在日常的项目开发中,我们会用到各种第三方库来提高效率,但随之带来的问题就是打包后的vendor.js体积过大,导致加载时空白页时间过长,给用户的体验太差。为此我们需要减少vendor.js的体积,从本质上来解决这种问题。 webpack的外部扩展(externals)可以有效的解决。一、作用? 使用vue-cl...
代码星球
·
2020-11-21
配置
webpack
externals
减少
打包
使用webpack配置react并添加到flask应用
学习react,配置是很痛苦的一关,虽然现在有了create-react-app这样方便的工具,但是必须要自己配置一遍,才能更好地进行项目开发。 首先要明确一个概念:react的文件必须经过编译才能被浏览器识别,因此我们需要webpack这个打包工具来把react的组件打包成一个js文件,然后将这个js文件放到f...
代码星球
·
2020-10-14
使用
webpack
配置
react
加到
vue项目webpack编译缓存cache-loader
问题:随着业务代码不断增加,项目深度不断延伸,我们的构建时长也会因此不断增加。渐渐的vue项目编译时间变长##优化方法一些性能开销较大的loader前面添加cache-loader,将结果缓存在磁盘中减少编译时间安装:一、npminstall--save-devcache-loader##vue2.0项目/*webpa...
代码星球
·
2020-10-04
vue
项目
webpack
编译
缓存
首页
上一页
...
3
4
5
6
7
...
下一页
尾页
按字母分类:
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
其他