手把手教你webpack3（2）简单指令（npm脚本）

￡神魔★判官ぃ 2022-06-03 23:45 180阅读 0赞

### 前注： ###

文档全文请查看 [根目录的文档说明][Link 1]。

如果可以，请给本项目加【Star】和【Fork】持续关注。

有疑义请[点击这里][Link 2]，发【Issues】。

### 2、简单指令（npm脚本） ###

[示例目录][Link 3]

我们实际开发中，一般都是使用`npm run build`或者`npm run dev`之类的指令，这是怎么实现的呢？

答案是利用`package.json`里面的`scripts`属性。

其他文件如【1】中的四个文件，新增一个`package.json`，内容如下：

// package.json 注：name只能是以下这种格式，不能有空格或者中文
    {
        "name": "simple-command",
        "version": "0.0.1",
        "scripts": {
            "test": "webpack --config webpack.config.js"
        }
    }

然后控制台执行命令`npm run test`即可。

**注：**

之所以我们能通过`npm run test`来执行`"webpack --config webpack.config.js"`这样一段命令。

原因是这段命令的开头，以`npm`为开头，所以执行的是全局变量（通常是全局变量，因为npm一般是全局安装）配置的npm包管理器。

然后后面的`run test`是npm负责去执行的，所以`npm run test`这段命令，是npm的特性，而不是webpack的，称作npm脚本。

而之后webpack的命令，是webpack做的事情。但webpack的执行，显然是通过Node.js执行的，所以可以用JavaScript语法。

[npm小结（程序猿小卡）][npm]

[npm的工作原理][npm 1]

[Link 1]: https://github.com/qq20004604/webpack-study
[Link 2]: https://github.com/qq20004604/webpack-study/issues
[Link 3]: https://github.com/qq20004604/webpack-study/tree/master/2%E3%80%81%E7%AE%80%E5%8D%95%E6%8C%87%E4%BB%A4%EF%BC%88npm%E8%84%9A%E6%9C%AC%EF%BC%89
[npm]: http://www.cnblogs.com/chyingp/p/npm.html
[npm 1]: http://blog.csdn.net/gentlycare/article/details/51332882

发表评论取消回复

表情：

评论列表（有 0 条评论，180人围观）

还没有评论，来说两句吧...

相关阅读

相关手把手教你如何用npm发布包

乎乎的**nodejs进阶教程**第二篇来了，如果第一篇没看过，建议大家先移步到第一篇[npm使用技巧和最佳实践][npm] 这篇讲述如何发布一个npm模块，大家平时都...

小灰灰/ 2024年04月17日 06:30/ 0 赞/ 93 阅读

相关手把手教你打造一个 Nexus 的私有npm服务器

下载 docker pull sonatype/nexus3 拉取镜像 mkdir -p /data/nexus/data 建立目录 chmo

傷城~/ 2023年02月26日 13:24/ 0 赞/ 227 阅读

相关【Webpack】999- 手把手教你写一个 loader / plugin

![88b8123b1a7b96601f3b062819890484.gif][] > 焦传锴，微医前端技术部平台支撑组。学习也要有呼有吸。一、Loader 1.

布满荆棘的人生/ 2022年10月09日 15:25/ 0 赞/ 306 阅读

相关手把手教你写一个迷你 Webpack

一、前言最近正好在学习 Webpack，觉得 Webpack 这种通过构建模块依赖图来打包项目文件的思想很有意思，于是参考了网上的一些文章实现了一个简陋版本的 m

╰半橙微兮°/ 2022年09月11日 09:13/ 0 赞/ 356 阅读

相关手把手教你使用Git（简单，实用）

一：Git是什么？ Git是目前世界上最先进的分布式版本控制系统。二：SVN与Git的最主要的区别？ SVN是集中式版本控制系统，版本库是集中

小灰灰/ 2022年08月21日 06:50/ 0 赞/ 251 阅读

相关手把手教你webpack3（4）出口（详解）

前注：文档全文请查看 [根目录的文档说明][Link 1]。如果可以，请给本项目加【Star】和【Fork】持续关注。有疑义请[点击这里][Link 2]，发【

向右看齐/ 2022年06月03日 23:47/ 0 赞/ 285 阅读

相关手把手教你webpack3（2）简单指令（npm脚本）

前注：文档全文请查看 [根目录的文档说明][Link 1]。如果可以，请给本项目加【Star】和【Fork】持续关注。有疑义请[点击这里][Link 2]，发【

￡神魔★判官ぃ/ 2022年06月03日 23:45/ 0 赞/ 181 阅读

相关手把手教你webpack3（1）最简单的webpack实例

0、前注本文内容源于[webpack中文文档][webpack]，以及我自己实践中写的若干DEMO。每个DEMO以文件夹为单位，从入门到进阶，根据文件夹编号为准，逐

小鱼儿/ 2022年06月03日 23:43/ 0 赞/ 260 阅读

相关手把手教你webpack3（13）开发环境

前注：文档全文请查看 [根目录的文档说明][Link 1]。如果可以，请给本项目加【Star】和【Fork】持续关注。有疑义请[点击这里][Link 2]，发【

﹏ヽ暗。殇╰゛Y/ 2022年05月31日 23:27/ 0 赞/ 301 阅读

相关手把手教你使用Webpack打包React项目

什么是Webpack？ webpack是一个前端资源加载/打包工具，前端的常用资源都可以作为一个模块导出，我们在代码中直接引用即可，最后按照我们的配置把代码

朴灿烈づ我的快乐病毒、/ 2022年05月25日 07:39/ 0 赞/ 1277 阅读