Webpack配置文件初步

在命令行中輸入:

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 startnpm 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就要看自己的需要了。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章