Webpack配置檔案初步

在命令列中輸入：

npx webpack 需要打包的檔名

這樣便可以對檔案進行打包，似乎並不需要所謂的配置檔案。而實際上，並不是不需要配置檔案，而是因為webpack自身有乙個比較完善的預設配置。

webpack的預設配置檔名是webpack.config.js。

我們來看乙個比較基礎的配置寫法：

const path =
require
('path');
module.exports =
};

檔案採用commonjs的規範，匯出乙個物件，entry字段指定需要打包的入口檔案，而output則是打包後檔案的存放位置。

有了這個檔案，就可以直接使用npx webpack來進行打包了。

在這裡插入描述

在目錄下的package.json內新增乙個script字段，這個字段對應乙個物件，而這個物件內再設定乙個bundle字段（這個可以自定義），字段值設為webpack。

那麼之後我們只需要輸入npm run bundle便可以進行打包了。

可能大家會有乙個疑問，因為實際上npm run bundle就是webpack命令，那麼這樣豈不是會呼叫全域性環境中的webpack？大可不必擔心，寫在package.json中，npm就會自動先從當前目錄下的node_module內去尋找webpack。

現在還有乙個問題，就是那個warning該怎麼去掉？仔細看warning所寫之內容，實際上是在提醒我們沒有為打包設定環境。換句話說，webpack需要知道是為生產環境還是開發環境打包，這兩種環境下打出的包最大的不同就是生產環境下打的包經過了壓縮，而開發環境則沒有。

那麼我們僅需為webpack.config.js所匯出的物件再增加乙個mode字段即可，至於值是production還是development就要看自己的需要了。