webpack前端構建工具學習總結(三)之webpack.config.js配置文件


Webpack 在執行的時候,除了在命令行傳入參數,還可以通過指定的配置文件來執行。默認情況下,會搜索當前目錄的 webpack.config.js 文件,這個文件是一個 node.js 模塊,返回一個 json 格式的配置信息對象,或者通過 --config 選項來指定配置文件。

webpack文檔:https://webpack.github.io/docs/

1.新建一個文件夾src存放打包前的源文件,dist文件夾存放打包后的文件,新建一個webpack.config.js為webpack的配置文件

打包前的文件夾中的內容

2.新建一個index1.html引用dist下打包后的js

3.輸入命令:webpack,即可按照webpack.config.js中的配置項進行編譯

4.編譯完的文件目錄和內容如下

5.如果將webpack.config.js重命名為webpack.dev.config.js,則直接執行默認的webpack命令則會找不到相應的配置文件,需要借助於webpack的--config選項來指定配置文件

命令:webpack --config webpack.dev.config.js

6.如果要查看編譯的進度,打包的模塊之類的,可以在package.json中的scripts標簽內通過webpack的屬性值來指定

 

7.輸入命令:npm run webpack,來編譯打包

 webpack.config.js中entry值的詳細介紹:

https://webpack.github.io/docs/configuration.html#entry

entry的值可以是一個string類型的字符串,也可以是一個數組,還可以是一個json對象

數組:這種情況會將entry定義的數組中的文件內容打包到output中定義的這一個文件

 

json對象:這種情況適應於多頁面時的編譯

output屬性值介紹:https://webpack.github.io/docs/configuration.html#output

使用命令:npm run webpack,編譯打包將會看到在dist/js下生成兩個文件

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM