51
Dev开发社区
首页
文章
问答
工具
搜索
登录
注册
#WebPack
webpack、node、npm之间的关系
webpack能够把.vue后缀名的文件打包成浏览器能够识别的js而这个.vue文件装换需要打包器vue-loader这个vue-loader打包器是可以从npm上面下载(npm上面有很多资源包)npm下载文件之后,webpack打包文件的时需要node环境去运行 ....
代码星球
·
2020-04-08
webpack
node
npm
间的
关系
vue+webpack静态资源路径引用
你可能已经注意到,在项目结构中我们有两个静态资产目录:src/assets和static/。他们之间有什么区别? 要回答这个问题,我们首先需要了解Webpack如何处理静态资产。在*.vue组件中,您的所有模板和CSS都会被解析vue-html-loader并c...
代码星球
·
2020-04-08
vue+webpack
静态
资源
路径
引用
webpack遇见的坑:Please install 'webpack-cli' in addition to webpack itself to use the CLI.
webpack-cli没被找到:在webpack4.0之后,需要全局安装webpack-cli,在全局安装webpack之后,cnpmi webpack-cli-g在局部使用webpack时无需再安装了 ...
代码星球
·
2020-04-08
webpack
to
遇见
Please
install
webpack-dev-server' 不是内部或外部命令,也不是可运行的程序
问题:解决:命令:npminstallwebpack-dev-server--save-dev以上就可以解决了。运行命令: ....
代码星球
·
2020-04-08
不是
webpack-dev-server
内部
外部
命令
webpack基础配置
(1)安装webpack 首先创建一个目录,比如demo,然后使用npm初始化配置npminit 接下来填好选项后,完成后会在demo目录下生成一个package.json的文件。输入这个命令后,终端会问你一系列诸如项目名称,项目描述,作者等信息,不过不用担心,如果你不准备在...
代码星球
·
2020-04-08
webpack
基础
配置
前端工程化与webpack
(1)前端工程化 近几年来,前端领域飞速发展,前端的工作早已不再是切几张图,写几个页面那么简单,项目比较大时,很可能会多人协同开发,模块化,组件化,CSS预编译等技术也被广泛的使用。前端自动化(半自动化)工程已经成为现在的主流。前端工程化主要解决一下问题Javascript、CSS代码的合并和压缩CSS预处理...
代码星球
·
2020-04-08
前端
工程化
webpack
webpack之url-loader
一.用file-loader编译不同后缀的图片1.配置webpeck.config.js文件constpath=require('path');consthtmlWebpackPlugin=require('html-webpack-plugin');module.exports={//node.js语法导出一个对象e...
代码星球
·
2020-04-08
webpack
url-loader
webpack之proxyTable设置跨域
为什么要使用proxyTable很简单,两个字,跨域。在平时项目的开发环境中,经常会遇到跨域的问题,尤其是使用vue-cli这种脚手架工具开发时,由于项目本身启动本地服务是需要占用一个端口的,所以必然会产生跨域的问题。当然跨域有多种解决方式,这里就不一一例举,下次弄篇文章单独讲,在使用webpack做构建工具的项目中使...
代码星球
·
2020-04-07
webpack
proxyTable
设置
跨域
webpack的配置文件
1、路径__dirname是一个全局变量,在项目html和js中没有单独定义,直接写就可以得到项目的根目录的路径module.exports={//__dirname是nodejs里的一个全局变量,它指向的是我们项目的根目录entry:__dirname+'/src/script/main.js',//入口文件outp...
代码星球
·
2020-04-06
webpack
配置文件
webpack打包css
1、安装css-loader和style-loader$cnpminstallcss-loaderstyle-loader--save-dev2、引用的时候使用css-loader,让webpack可以打包css文件 require('css-loader!./style.css');3、打包4、引入styl...
代码星球
·
2020-04-06
webpack
打包
css
webpack的使用
$cnpminstall-gwebpack$npminit最后再Ctrl+C跳出$cnpminstallwebpack--save-devfunctionhello(str){alert(str);}$webpackhello.jshello.bundle.js ...
代码星球
·
2020-04-06
webpack
使用
实现一个简易版webpack
现实webpack的打包产物大概长这样(只把核心代码留下来): 实现一个简版的webpack依葫芦画瓢,实现思路分2步:1.分析入口文件,把所有的依赖找出来(包括所有后代的依赖)2.拼接出类似上面的立即执行函数找依赖constfs=require('fs');constpath=require('...
代码星球
·
2020-04-06
实现
一个
简易
webpack
webpack 优化
一般我们谈的webpack优化,无非就是分为打包时间和打包体积的优化。打包时间 优化打包时间,我们能想到的策略:减少需要读取和解析的文件 和 提高打包性能。 减少需要读取和解析的文件 1.优化loader 以babel-loader为例,如果可以,我们尽量规定includeexc...
代码星球
·
2020-04-06
webpack
优化
express起一个代理服务器,webpack-dev-server同时起多个
由于系统业务比较复杂,微前端(多页应用)实现期望用一个app一个webpack的形式,这样可以更好隔离,而且每个app的webpackconfig可以定制。Nginx在前端项目中安装比较麻烦,所以考虑用nodejs来代理,社区比较成熟的node代理显然就是express的http-proxy-middleware了:v...
代码星球
·
2020-04-06
express
一个
代理
服务器
webpack-dev-server
webpack打包内存溢出的解决方法
由于项目文件越来越多,最终导致在打包时报javaScriptheapoutofmemory错误解决方案:1.增加v8内存使用increase-memory-limit1)安装npmi-gincrease-memory-limit2)在项目目录运行increase-memory-limit它会默认吧v8引擎的内存上限提高...
代码星球
·
2020-04-06
webpack
打包
内存
溢出
解决
首页
上一页
...
14
15
16
17
18
...
下一页
尾页
按字母分类:
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
其他