关于vue的npm run dev和npm run build
├─build
│ ├─build.js
│ ├─check-versions.js
│ ├─dev-client.js
│ ├─dev-server.js
│ ├─utils.js
│ ├─vue-loader.conf.js
│ ├─webpack.base.conf.js
│ ├─webpack.dev.conf.js
│ ├─webpack.prod.conf.js
│ └─webpack.test.conf.js
├─config
│ ├─dev.env.js
│ ├─index.js
│ ├─prod.env.js
│ └─test.env.js
├─...
└─package.json
以上是关于bulid与run的所有文件
指令分析
package.json里面
"dev": "node build/dev-server.js",
"build": "node build/build.js",
意思:运行”npm run dev”的时候执行的是build/dev-server.js文件,
运行”npm run build”的时候执行的是build/build.js文件。
build文件夹分析
build/dev-server.js
npm run dev 执行的文件build/dev-server.js文件,执行了:
检查node和npm的版本
引入相关插件和配置
创建express服务器和webpack编译器
配置开发中间件(webpack-dev-middleware)和热重载中间件(webpack-hot-middleware)
挂载代理服务和中间件
配置静态资源
启动服务器监听特定端口(8080)
自动打开浏览器并打开特定网址(localhost:8080)
说明: express服务器提供静态文件服务,不过它还使用了http-proxy-middleware,一个http请求代理的中间件。前端开发过程中需要使用到后台的API的话,可以通过配置proxyTable来将相应的后台请求代理到专用的API服务器。
build/webpack.base.conf.js
dev-server依赖的webpack配置是webpack.dev.conf.js文件,
测试环境下使用的是webpack.prod.conf.js
webpack.dev.conf.js中又引用了webpack.base.conf.js
webpack.base.conf.js主要完成了下面这些事情:
- 配置webpack编译入口
- 配置webpack输出路径和命名规则
- 配置模块resolve规则
- 配置不同类型模块的处理规则
这个配置里面只配置了.js、.vue、图片、字体等几类文件的处理规则,如果需要处理其他文件可以在module.rules里面配置。
build/webpack.dev.conf.js
在webpack.base.conf的基础上增加完善了开发环境下面的配置,主要包括下面几件事情:
将hot-reload相关的代码添加到entry chunks
合并基础的webpack配置
使用styleLoaders
配置Source Maps
配置webpack插件
build/check-versions.js和build/dev-client.js
最后是build文件夹下面两个比较简单的文件,
dev-client.js似乎没有使用到,代码也比较简单,这里不多讲。
check-version.js完成对node和npm的版本检测
build/utils.js和build/vue-loader.conf.js
webpack配置文件中使用到了utils.js和vue-loader.conf.js这两个文件,utils主要完成下面3件事:
配置静态资源路径
生成cssLoaders用于加载.vue文件中的样式
生成styleLoaders用于加载不在.vue文件中的单独存在的样式文件
vue-loader.conf则只配置了css加载器以及编译css之后自动添加前缀。
build/build.js
构建环境下的配置,
build.js主要完成下面几件事:
loading动画
删除创建目标文件夹
webpack编译
输出信息
build/webpack.prod.conf.js
构建的时候用到的webpack配置来自webpack.prod.conf.js,该配置同样是在webpack.base.conf基础上的进一步完善。主要完成下面几件事情:
合并基础的webpack配置
使用styleLoaders
配置webpack的输出
配置webpack插件
gzip模式下的webpack插件配置
webpack-bundle分析
说明: webpack插件里面多了丑化压缩代码以及抽离css文件等插件。
config文件夹分析
config/index.js
config文件夹下最主要的文件就是index.js了,
在这里面描述了开发和构建两种环境下的配置,前面的build文件夹下也有不少文件引用了index.js里面的配置。
config/dev.env.js、config/prod.env.js和config/test.env.js
这三个文件就简单设置了环境变量而已,没什么特别的。
这是webpack的基本入门,webpack还有很多插件,还需要去探索
后面写这几个文件的源码解释。
关于vue的npm run dev和npm run build的更多相关文章
- npm run dev 和 npm run serve
1.ERR引发的思考 创建好的 vue 项目直接执行 vue run dev 报错?运行 vue run serve 就可以启动...如下 npm run dev npm ERR! missing s ...
- vue-cli 官方模板webpack-simple的npm run dev 与npm run bulid的一些问题
npm run dev命令后并不会在dist目录下生成build.js文件,开发环境下build.js是在运行内存中的. 在package.json的scripts属性的dev后面加上--port 8 ...
- npm run dev 报错 run `npm audit fix` to fix them, or `npm audit` for details
前几天写的直接运行npm run dev还是ok的,突然不行了,前面报错是css-loader没有,删除style标签上的lang='scss'就好了,先不需要这个依赖.这个先不管. 只是后面的 ru ...
- 关于npm run dev和npm run build的问题
之前build打包好在我本地运行是没问题的,但是发给后端部署,他说我的路径有问题,这个是由于vue-cli默认的打包路径 的“/”根目录,由于文件没有部署到根目录所以出现了这个问题. 修改webpac ...
- laravel npm run dev 错误 npm run dev error [npm ERR! code ELIFECYCLE]
出现此问题是node_modules出现错误,需要执行: 1 rm -rf node_modules 2 rm package-lock.json 3 npm cache clear --force ...
- vue项目初始化时npm run dev报错webpack-dev-server解决方法
vue项目初始化时npm run dev报错webpack-dev-server解决方法 原因:这是新版webpack存在的BUG,卸载现有的新版本webpack,装老版本就好webpack-dev- ...
- Vue 项目在其他电脑 npm run dev 运行报错的解决方法
一个 Vue 项目从一台电脑上传到 github 上之后,再另外一台电脑上 git clone .并使用 npm run dev 或 npm run start 发生以下报错的解决方法. 报错原因 ...
- Vue 项目: npm run dev b报错 “'webpack-dev-server' 不是内部或外部命令,也不是可运行的程序 或批处理文件。”
前提: 电脑已经安装了nodeJS和npm, 项目是直接下载的zip包. 报错步骤为1:cd /d 目录: 2. npm ren dev -------> 报错如下: > webpac ...
- vue项目 npm run dev在Linux 持久运行
touch run.dev.logchmod u+w run.dev.log 记录日志文件 nohup npm run dev > run.dev.log 2>run.dev.log &a ...
随机推荐
- Lazarus 中文汉字解决方案
使用Lazarus不得不面对编码问题,尤其中文.Lazarus使用的是UTF8编码,而很多windows程序使用的是ANSI编码,编码问题在此不多说大家可以google去. ANSI数据库与Lazar ...
- [Apache]网站页面静态化与Apache调优(图)
---------------------------------------------------------------------------------------------------- ...
- PR(Precision-Recall)曲线和mAP指标
来自: https://www.zhihu.com/question/41540197 https://www.douban.com/note/518998773/ 作者:水哥链接:https://w ...
- GPS卫星定位防盗系统机芯
GPS卫星定位防盗系统机芯,一般安装在驾驶室的操作台内,包括GPS模块,安装时需要先把车门打开,并把两边的车门拆卸下来,才能拆卸驾驶仪表台,再按说明书安装GPS定位防盗机芯,同时置于4A/12V免维护 ...
- shell脚本中比较两个小数的办法
具体情况#man bc 然而对小数进行比较的相关方法有几个: 1. 自己的解决方法,判断小数点后最多有几位数(N),然后对将要比较的两个数值进行 乘与10的N次方 也就是将小数点去掉来进行比较(小数点 ...
- Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.0.2:resources 在我的myeclipse中新建maven工程总出现这个问题
只需在下图中更改代码 更改后是这样的: <plugin> <groupId>org.apache.maven.plugins</groupId> <artif ...
- skinned mesh render
[skinned mesh render] 相比MeshRender组件 ,SkinnedMeshRender多了bones组件.所以很明显,MeshRender不支持骨骼动画,而SkinnnedMe ...
- 从源码安装Node
[从源码安装Node] Nodejs官网未并提供i686架构的bin,为了在i686架构cpu下使用Nodejs,需要从源码编译. 1../configure 2.make 3.make instal ...
- create-react-app之proxy
[create-react-app之proxy] create-react-app可以用于一键创建web_client环境,默认使用webpack-dev-server.但在开发过程中,往往需要cli ...
- reids 基本操作
redis 基本操作 1. 什么是Redis Redis是由意大利人Salvatore Sanfilippo(网名:antirez)开发的一款内存高速缓存数据库.Redis全称为:Remote Dic ...