Webpack实战:入门、进阶与调优
上QQ阅读APP看书,第一时间看更新

1.4.2 使用npm scripts

从上面的例子不难发现,我们每进行一次打包都要输入一段冗长的命令,这样做不仅耗时而且容易出错。为了使命令行指令更加简洁,我们可以在package.json中添加一个脚本命令。

编辑工程中的package.json文件:


……
  "scripts": {
    "build": "webpack --entry=./index.js --output-filename=bundle.js --mode=development"
  },
……

scripts是npm提供的脚本命令功能,在这里我们可以直接使用由模块所添加的指令(比如用“webpack”取代之前的“npx webpack”)。

为了验证打包结果,可以对add-content.js的内容稍加修改:


export default function() {
    document.write('I\'m using npm scripts!');
}

重新执行打包,这次输入npm命令即可:


npm run build

打开浏览器验证效果,如图1-2所示。

图1-2 index.html内容变为了“I’m using npm scripts!”