1. 程式人生 > >Webpack入門第二節

Webpack入門第二節

上一節已經成功使用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)這條命令都可以不用,那種感覺會不會更爽~,繼續看下文。