Webpack快速入门(三)

作为前两篇的补充,本文想再说明一下npx命令相关的另一种实现。

NPM Scripts

在前面的文章中,我们提到使用如下命令方式:

npx webpack ......

于是,位于“./node_modules/.bin/webpack”便会被执行。这得益于npx这个命令。

其实,还有另外一种方式,更为常用,即借助于npm run命令和package.json配置文件中的“scripts”键。

示例

请看下面的配置文件:

{
  "name": "ex1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.29.5",
    "webpack-cli": "^3.2.3"
  }
}

注意,其中的scripts这一组键/值对。现在,再在命令行下运行如下命令:

npm run build

来代替使用前面的npx命令,也能达到同样的效果。即webpack会自动被执行,而且会根据根目录下的webpack.config.js内容进行编译并打包。

这种思路更为典型!如果你分析他人的作品,是不是发现大多是使用这种组织方式?

补充

如果您使用的是npm 5,您可能还会在目录中看到一个名字为package-lock.json的文件。具体故事,还是请自行网搜Npm吧。

原文地址:http://blog.51cto.com/zhuxianzhong/2352173

时间: 2024-10-08 08:32:30

Webpack快速入门(三)的相关文章

Webpack快速入门(一)

本文可供Webpack新手与Webpack老手复习之参考.注:本文基于当前最新的webpack V4.29.5:本文示例操作步骤在Mac下实现. 前提 (1)具有一定JavaScript基础(2)了解npm基本使用 什么是Webpack? 有文(参考(2))说"WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用". 而官方

AS3多线程快速入门(三):NAPE物理引擎+Starling[译]

原文链接:http://esdot.ca/site/2012/intro-to-as3-workers-part-3-nape-physics-starling [更新]Adobe在11.4正式发布的最后一刻移除了ByteArray.shareable功能的支持,推迟到11.5版本再发布.为了解决这个问题,源码已经被我更新过了.但这里还是留下完整的示例代码,因为它能最终会正常运行的. 在<AS3多线程快速入门>系列教程的第一部分中,我们研究了AS3 Worker的基本原理,包括多种通信方式,还

webpack快速入门和实战

webpack是什么 Webpack 是一个模块打包器.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 这张图基本上解释了webpack是用来干嘛的,将一些相互依赖的模块(文件),打包成一个或多个js文件,减少http请求次数,提升性能.这些相互依赖的模块可以是图片.字体.coffee文件.样式文件.less文件等. 1. 安装 先安装 install node.js node.js包含一个包管理器:npm 基本命令 webpack // 最基本的启动web

mybatis快速入门(三)

上面2章写了mybatis的基本操作,今天就写写mybatis的动态代理吧. 动态代理有4个基本原则: 1.userMapper.xml里面的namespace="cn.my.dao.UserDaoMapper"一定要和接口的包名+接口名一致 2.userMapper.xml里面的statementid值要和接口中的方法名一致 3.userMapper.xml里面的入参类型要和接口中方法的参数类型一致 4.userMapper.xml里面的返回类型要和接口中方法的返回类型一致 好了不废

webpack快速入门——webpack3.X 快速上手一个Demo

1.进入根目录,建两个文件夹,分别为src和dist 1).src文件夹:用来存放我们编写的javascript代码,可以简单的理解为用JavaScript编写的模块. 2).dist文件夹:用来存放供浏览器读取的文件,这个是webpack打包成的文件. 2.在dist下建立一个index.html文件,写入以下代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-

webpack快速入门——配置JS压缩,打包

1 .首先在webpack.config.js中引入 const uglify = require('uglifyjs-webpack-plugin'); 2.然后在plugins配置里 plugins:[ new uglify() ] 3.在终端输入webpack,你会发现JS代码已经被压缩了,如果你用的是VSCode,可以按住Alt+Z代码自动换行,查看效果 4.上图

webpack快速入门——插件配置:HTML文件的发布

1.把dist中的index.html复制到src目录中,并去掉我们引入的js 2.在webpack.config.js中引入 const htmlPlugin = require('html-webpack-plugin'); 3.引入后进行安装   cnpm i html-webpack-plugin --save-dev 4.在webpack.config.js中进行插件配置 new htmlPlugin({ minify:{ removeAttributeQuotes:true }, h

MySQL简单快速入门 (三)高级查询——JEPLUS软件快速开发平台

03.SQL高级查询_分组: 1).需求:一条查询,查询出每种商品的最高价格 2).分组的命令:group by 分组字段 3).实现上例: select category_id,max(price)  from product group by category_id; 查询顺序:先分组,再聚合 4).注意事项: 分组查询的结果最多只能包含:分组列,聚合结果,不能包含其他字段. 5).练习1: 需求:查询每个生产日期的商品的数量是多少? select  proDate,count(*)  fr

Webpack快速入门(二)

在前文中,已经成功使用Webpack打包并生成了一个目标.js文件.但是,在终端中进行复杂的操作,显然是不太方便且容易出错的.接下来,让我们学习Webpack的另一种更常见的使用方法,即通过配置文件来使用Webpack.这也是webpack的重点使用方式. 首先,提醒注意的是,我们要学习的这个配置文件其实也是一个简单的JavaScript模块文件,我们可以把所有的与打包相关的信息放在里面.通过一个js文件来实现配置功能的一个重要好处是,你可以在其中加入灵活多样的注释--在.json配置文件中是非