在命令行中輸入:
npx webpack 需要打包的文件名
這樣便可以對文件進行打包,似乎並不需要所謂的配置文件。而實際上,並不是不需要配置文件,而是因爲Webpack自身有一個比較完善的默認配置。
Webpack的默認配置文件名是webpack.config.js
。
我們來看一個比較基礎的配置寫法:
const path = require('path');
module.exports = {
entry: '需要打包的文件路徑',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
文件採用CommonJS的規範,導出一個對象,entry
字段指定需要打包的入口文件,而output
則是打包後文件的存放位置。
有了這個文件,就可以直接使用npx webpack
來進行打包了。
在這裏插入圖片描述
使用過create-react-app等腳手架工具的人都知道,我們是可以通過類似npm start
、npm run dev
這些命令來啓動應用的,那麼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
就要看自己的需要了。