导航:首页 > 程序命令 > webpack命令找不到

webpack命令找不到

发布时间:2023-02-25 21:52:51

① node.js里的webpack不是内部或外部命令问题

环境变量没有配置正确,你仔细检测一下你的环境变量。、
你的采纳是我前进的动力,还有不懂的地方,请继续“追问”。
如你还有别的问题,可另外向我求助;答题不易,互相理解,互相帮助。

② webpack基本使用

step1: 创建一个项目录
注意:项目名一般 不要带中文
step2: 创建 package.json

或者:

step4: 处理第三方文件
html文件中需要引入多个js文件或者第三方模块(例如:jquery.js),只引入项目js入口文件( main.js ),其他js文件均在入口文件中导入。导致可能JS文件中使用了浏览器不识别的高级语法:

总结:webpack可以做两件事情况:

step5: 配置入口文件和出口文件
每次修改js文件,手动输入命令: webpack 入口文件路径 -o 出口文件路径 重新打包, 每次都要输入入口文件和出口文件,麻烦。可以在项目目录下建立配置文件 webpack.config.js ,指定入口文件和出口文件:

重新打包:

step6: 实现自动打包编译
每次修改js文件,都要手动重新打包,还是麻烦?使用 webpack-dev-server 这个工具,来实现自动打包编译的功能。

webpack-dev-server 这个工具,如果想要正常运行,要求在本地项目中必须安装 webpack

在 package.json 文件中配置命令:

在终端中执行命令:

注:在终端执行 npm run dev ,就等于执行 webpack-dev-server 命令。这将在node中开启一个服务器,并且立即打包。每次修改文件,ctrl + s 保存文件,webpack-dev-server工具自动监听文件改变,并且自动打包。

改变文件引用路径:
执行上述命令后终端会有类似信息输出:
【 Project is running at http://localhost:8080/ 】——webpack-dev-server工具将项目托管到localhost:8080/端口上

【webpack output is served from /】——打包好的文件通过localhost:8080/bundle.js访问

【Content not from webpack is served from C:UsersyfbDesktop前端学习案例4.27wabpackDemo_1src】——不是通过webpack打包的文件,则是以src为根目录访问。

该项目根目录下并不存在bundel.js文件,我们可以认为webpack-dev-server把打包好的文件,以一种虚拟的形式托管到了咱们项目的根目录中,虽然我们看不到它,但是可以认为和 dist、src、node_moles平级,有一个看不见的文件,叫做 bundle.js。其实是为了频繁打包,提高效率,直接把打包的文件放在内存中。

因为项目托管到新服务器,现在应该访问的是 该服务器 下的项目,文件引用路径也要改变:

step7: 自动打开浏览器进行访问、配置端口号、指定托管的根目录、热重载(只是修改补丁,不重新生成整个bundle.js文件)
在 package.json 中配置命令,并重启服务器:

step8: 使用 html-webpack-plugin 插件
使用 --contentBase 指令的过程比较繁琐,需要指定启动的目录,同时还需要修改index.html中script标签的src属性。

安装 html-webpack-plugin 插件:

在 webpack.config.js 配置文件中配置插件:

html-webpack-plugin 插件的两个作用:

step9: 处理样式文件
html文件中需要引入css、less、sass样式文件。默认情况下,webpack处理不了这些样式文件。

处理css文件:

处理less样式文件

③ 为什么安装webpack后提示不是内部命令

因为安装步骤出现了问题。

1.首先你需要安装一个全局的webpack;

npm install webpack -g;

这样你才可以正确的使用webpack这个命令;

2.然后, 你还可以在当前项目里面也安装一个webpack, 这也是官方推荐的做法;

npm install webpack --save-dev;

这样就可以在你的webpack.config.js里面方便的引用webpack;

// webpack.config.js;

var path = require('path');

var webpack = require('webpack');

3.然后在使用一些plugin的时候就比较方便了;

new webpack.optimize.CommonsChunkPlugin('common.js')。

阅读全文

与webpack命令找不到相关的资料

热点内容
微信小程序源码转成抖音 浏览:654
优省油app怎么没法下载 浏览:72
pdf格式转换excel 浏览:625
高尔夫6压缩机响 浏览:310
优盘文件夹自动恢复 浏览:76
有服务器怎么制作小程序 浏览:132
程序员怎么避开外包公司 浏览:604
刺激战场国际服体验服务器满了怎么办 浏览:487
python的number是什么意思 浏览:539
剪映app怎么把视频镜像 浏览:464
python长连接消息提醒 浏览:767
山西省美术算法 浏览:95
华为手机怎么不给别人删app 浏览:814
c51单片机程序实例 浏览:112
腾讯幻核加密猫 浏览:782
雅思听力真经pdf 浏览:442
甘肃戴尔服务器虚拟化设计云主机 浏览:236
怎么购买盖世童书APP 浏览:248
军校的程序员 浏览:447
程序员被女警察追 浏览:455