webpack如何配置打包多個文件


 

  前言

  一般webpack默認打包后生成的js文件名叫main.js

  若設置filename屬性,可更改默認打包出的文件名,比如下面打包出來的文件名是bundle.js

  

   下面2種寫法等價

  

  

 

  場景

  如果現在有這樣一個需求,把index.js文件打包2次,第一個文件叫main.js,第二個文件叫bundle.jsentry應該怎么配置呢?

  

   如上配置會報錯,提示你打包后的2js文件都叫bundle.js

  

 

  配置

  如下配置即可,name指代entry里的鍵名mainbundle,打包的時候就分別把文件放入對應鍵名中

  

   打包后的生成的2個文件都會被引入html(這是因為我們使用了HtmlWebpackPlugin插件)

  

  之前寫過一篇關於HtmlWebpackPlugin插件的博文:https://www.cnblogs.com/tu-0718/p/12145122.html 

 

  補充

  還有一個場景,把打包后生成的index.html文件給后端,作為一個后端的入口文件,所有的js文件上傳到CDN服務器上,

    同時,讓打包后生成的main.jsbundle.js文件前面也把CDN域名帶上,比如  https://cdnjs.com

    在output中配置publicPath屬性

  

   

 


免責聲明!

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



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