上一節已經成功使用Webpack打包了一個文件了。在終端進行復雜的命令行操作,其實是不太方便且容易出錯的,接下來看看Webpack的另一種更常見的使用方法。
通過配置文件來使用Webpack
Webpack擁有很多其它的比較高級的功能(比如loaders和plugins),這些功能都可以通過命令行模式實現,但是這樣不太方便且容易出錯,更好的辦法是定義一個配置文件,這個配置文件其實也是一個簡單的javaScript模塊,我們可以把所有的與打包相關的信息放在裏面。
如何寫配置文件?
1.在當前項目的根目錄下新建一個名爲webpack.config.js的文件。
module.exports={
entry:__dirname+"/app/main.js",//已多次提及的唯一入口文件
output: {
path:__dirname+'/public',//打包後文件存放的地方
filename: "bundle.js"//打包後輸出文件的文件名
}
}
其文件內容如圖所示,目前的配置主要涉及到的內容是入口文件路徑和打包後文件存放的路徑。
注:“__dirname”是node.js中的全局變量,它指向當前執行腳本所在的目錄。
有了這個配置之後,再打包文件,只需在終端運行webpack(非全局安裝需使用node_modules\.bin\webpack)命令就可以了,這條命令會自動引用webpack.config.js文件中的配置選項。
又學會了一種使用Webpack
的方法,這種方法不用管那煩人的命令行參數,有沒有感覺很爽。如果我們可以連webpack(非全局安裝需使用node_modules\.bin\webpack)
這條命令都可以不用,那種感覺會不會更爽~,繼續看下文。