webpack入门学习笔记03 —— 自定义脚本，帮助项目管理

1. 写在前面

通过前两章博客的基础讲解，咱们知道若是想要打包编译项目，能够执行 npx webpack 命令，而后webpack就会根据配置文件 webpack.config.js 来对项目进行打包编译。可是如今咱们可能遇到如下需求：

• webpack的配置文件不要叫作webpack.config.js,而是叫作 webpack.config.allen.js
• 每次打包编译的时候，都要使用 npx webpack 命令。我不喜欢这个命令，给我改为 yarn build 命令
• ......

看似都是一些很无理的要求，可是确实是咱们在架构项目的时候须要考虑到的问题。既然如此，本篇博客就来介绍如何知足以上两个需求。

2. 指定webpack配置文件

首先咱们来说一下，若是指定webpack的配置文件。

前面提到，在打包编译项目的时候，咱们须要运行 npx webpack 命令，而后webpack就会根据webpack.config.js文件来进行打包编译。这里要说的是， npx webpack 命令是能够指定一些参数的，好比若是咱们想要指定webpack的配置文件为 webpack.config.allen.js ，那么能够执行如下命令：

npx webpack --config webpack.config.allen.js
复制代码

经过上面的指令，咱们即可以使用 webpack.config.allen.js 做为webpack的配置文件，对项目进行打包编译。

3. 自定义脚本命令

如今来解决第二个需求：如何使用 yarn build 命令来进行项目的打包编译。

在以前的博客中，我提到过 package.json 文件的做用，其中一个就是自定义一些脚本，而后使用 npm run 或者 yarn 来运行这些脚本，执行所定义的命令。这里咱们就能够使用这种方式，自定义脚原本进行打包编译。

新建脚本的步骤很是简单，在 package.json 文件中新建 scripts 属性，该属性为一个对象，给这个对象添加属性键值对便可新建脚本。若是要知足上述第二个需求，能够这样配置：

{
  "name": "webpack-learning",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "build": "webpack --config webpack.config.allen.js"
  },
  "devDependencies": {
    "webpack": "^4.32.2",
    "webpack-cli": "^3.3.2"
  }

复制代码

如今自定义脚本已经建立完成，咱们即可以经过 npm run build 或者 yarn build 来执行webpack的打包编译命令了。

4. 后记

这篇博客咱们主要讲解了如何自定义脚原本帮助咱们管理项目，这里只介绍了如何建立webpack打包编译的脚本，其余脚本也是很是相似的，在后面的博客中会陆续提到。

你们加油！

上一篇: webpack入门学习笔记02 —— 初始化一个webpack项目

下一篇: webpack入门学习笔记04 —— 安装和配置webpack开发服务器