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開發服務器