npm run dev 和 npm run build 解析（转载）

caozhijian 发布于2019-08-26 18:28 / 1747人阅读

摘要：关于的和以上是关于与的所有文件指令分析里面意思运行的时候执行的是文件，运行的时候执行的是文件。前端开发过程中需要使用到后台的的话，可以通过配置来将相应的后台请求代理到专用的服务器。和这三个文件就简单设置了环境变量而已，没什么特别的。

关于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还有很多插件，还需要去探索

后面写这几个文件的源码解释。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110243.html

vue多环境配置方案

摘要：前言一般服务器分为本地环境，测试环境，正式环境如果每次都要修改配置就很麻烦，总结一下我使用的方法修改执行命令修改文件的，在打包的时候执行不同的命令，测试执行那正式执行这里用到了能跨平台地设置及使用环境变量，使用前言一般服务器分为本地环境，测试环境，正式环境如果每次都要修改配置就很麻烦，总结一下我使用的方法 vue-demo/ |-build/ |-config/ |-d...

刘德刚 2019-08-26 18:27 评论0 收藏0
从 1 到完美，用 node 写一个命令行工具

摘要：从到完美，用写一个命令行工具中的字段现在，不管是前端项目还是项目，一般都会用做包管理工具，而是其相关的配置信息。又一个让命令行与用户进行交互的工具与功能差不多。比较常用的命令行命令行相关的应用就很多啦，比如等，但这些不仅仅是命令行工具。从 1 到完美，用 node 写一个命令行工具 1. package.json 中的 bin 字段现在，不管是前端项目还是 node 项目，一般都会...

YorkChen 2019-08-23 12:11 评论0 收藏0
通过create-react-app从零搭建react环境

摘要：通过文件可以对图标名称等信息进行配置。注意，注册的只在生产环境中生效，并且该功能只有在下才能有效果该文件是过滤文件配置该文件是描述文件定义了项目所需要的各种模块，以及项目的配置信息比如名称版本许可证等元数据。一、快速开始：全局安装脚手架： $ npm install -g create-react-app 通过脚手架搭建项目： $ create-react-app 开始项目： ...

Cympros 2019-08-02 16:02 评论0 收藏0
通过create-react-app从零搭建react环境

摘要：通过文件可以对图标名称等信息进行配置。注意，注册的只在生产环境中生效，并且该功能只有在下才能有效果该文件是过滤文件配置该文件是描述文件定义了项目所需要的各种模块，以及项目的配置信息比如名称版本许可证等元数据。一、快速开始：全局安装脚手架： $ npm install -g create-react-app 通过脚手架搭建项目： $ create-react-app 开始项目： ...

CoyPan 2019-08-22 18:05 评论0 收藏0
从零开始的Webpack4教程

摘要：插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。插件的使用一般是在的配置信息选项中指定。到这里基本配置已经告一段落了，所有配置我已经放在仓库中第二期优化教程已出欢迎关注和提问 1、了解Webpack相关什么是webpack Webpack是一个模块打包器(bundler)。在Webpack看来, 前端的所有资源文件(js/js...

ShevaKuilin 2019-08-23 15:59 评论0 收藏0