手把手教你webpack3(2)简单指令(npm脚本)

前注:

文档全文请查看 根目录的文档说明

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

有疑义请点击这里,发【Issues】。

2、简单指令(npm脚本)

示例目录

我们实际开发中,一般都是使用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的工作原理

时间: 2024-10-12 08:35:03

手把手教你webpack3(2)简单指令(npm脚本)的相关文章

手把手教你webpack3(1)最简单的webpack实例

0.前注 本文内容源于webpack中文文档,以及我自己实践中写的若干DEMO. 每个DEMO以文件夹为单位,从入门到进阶,根据文件夹编号为准,逐步递进. 成文时,webpack版本是[3.8.1] 0.1.安装webpack 首先你需要安装Node.js,点击打开Node.js下载页面.安装完Node.js后,会自带npm包管理器. npm install webpack -g 这个命令将安装最新版本的webpack(全局,学习教程中推荐,避免多次安装.但实践中还是有必要一个项目一个webpa

手把手教你webpack3(4)出口(详解)

前注: 文档全文请查看 根目录的文档说明. 如果可以,请给本项目加[Star]和[Fork]持续关注. 有疑义请点击这里,发[Issues]. 4.出口 示例目录 4.1.标准的出口写法 // 出口文件 output: { filename: './dist/dist.js' } 意思是,将打包好的文件,打包到dist文件夹下的dist.js. 注: 大家一般将打包好的文件会放在dist文件夹下,方便管理. 4.2.出口文件名根据入口文件名所决定: 上面讲了多入口,以及对应的多出口的配置写法,可

手把手教你webpack3(10)Less-Loader配置简述

LESS-LOADER配置简述 前注: 文档全文请查看 根目录的文档说明. 如果可以,请给本项目加[Star]和[Fork]持续关注. 有疑义请点击这里,发[Issues]. DEMO地址 1.概述 less-loader 用于处理编译 .less 文件,将其转为 css文件代码. 使用 less-loader 的话,必须安装 less,单独一个 less-loader 是没办法正常使用的. 安装 npm install --save less-loader less 2.配置 2.1.无任何配

手把手教你webpack3(11)PostCSS-Loader配置简述

POSTCSS-LOADER配置简述 前注: 文档全文请查看 根目录的文档说明. 如果可以,请给本项目加[Star]和[Fork]持续关注. 有疑义请点击这里,发[Issues]. DEMO地址 1.概述 postcss-loader 用于处理css代码,具有下列特点: 通常由 options 和 plugins 两部分组成,plugins 虽然嵌套在 options 里,但实际上是通过其他插件生效的: 配置是可以独立的(每个配置的插件也是独立的).详细介绍阅读[2.1]: 还有一些自定义配置,

手把手教你webpack3(5)babel-loader详细使用说明

前注: 文档全文请查看 根目录的文档说明. 如果可以,请给本项目加[Star]和[Fork]持续关注. 有疑义请点击这里,发[Issues]. 5.1.babel-loader 这个用于将使用ES6规范的js代码,转为ES5. 首先安装一大堆东西,参照下面的命令,一共是4个(包括webpack) npm install --save babel-loader babel-core babel-preset-env webpack 创建babel规则文件.babelrc,内容设置为: { "pre

手把手教你webpack3(6)css-loader详细使用说明

CSS-LOADER配置详解 前注: 文档全文请查看 根目录的文档说明. 如果可以,请给本项目加[Star]和[Fork]持续关注. 有疑义请点击这里,发[Issues]. 1.概述 对于一般的css文件,我们需要动用三个loader(是不是觉得好麻烦): 1.css-loader: 先附上官网文档(中文)的链接:css-loader文档. 不过说实话,这个官方文档讲的很糟糕,看的人一脸懵逼. css-loader主要用于处理图片路径(其实也包括例如导入css文件的路径),并且会将css样式打包

手把手教你webpack3(3)入口(多入口)entry

前注: 文档全文请查看 根目录的文档说明. 如果可以,请给本项目加[Star]和[Fork]持续关注. 有疑义请点击这里,发[Issues]. 3.入口(多入口) 示例目录 在上面的webpack.config.js中,有如下代码: // 入口文件,指向app.js entry: './app.js', 以上代码相当于: entry: { main: './app.js' } 如果是普通的项目(单入口),那么按照上面的方式写(entry: './app.js')就可以了. 至于下面的方式是什么呢

手把手教你webpack3(7)style-loader详细使用说明

STYLE-LOADER详细使用说明 前注: 文档全文请查看 根目录的文档说明. 如果可以,请给本项目加[Star]和[Fork]持续关注. 有疑义请点击这里,发[Issues]. DEMO地址 1.概述 简单来说,style-loader是将css-loader打包好的css代码以<style>标签的形式插入到html文件中. 对于简单项目,打包然后插入也就足够了,但是遇见复杂情况,例如: 需要使用webpack的服务器热加载服务进行特殊配置: 对css文件二次处理(更改类名,添加额外css

手把手教你webpack3(9)File-Loader配置简述

FILE-LOADER配置简述 前注: 文档全文请查看 根目录的文档说明. 如果可以,请给本项目加[Star]和[Fork]持续关注. 有疑义请点击这里,发[Issues]. DEMO地址 1.概述 简单来说,file-loader 就是将文件(由于一般是图片文件为主,所以下面通常使用图片两字作为替代,方便理解.其他的包括字体文件等),在进行一些处理后(主要是处理文件名和路径),移动打包后的目录中. 处理的内容包括: 文件名的处理,比如加 [hash] : 路径的处理,比如[把图片文件统一放到i