webpack實戰 多頁面打包配置 八

在src目錄下新建list.js

src/index.js

import react,

from
'react'
import reactdom from
'react-dom'
class
extends
component
}reactdom.
render
(>
, document.
getelementbyid
('root'
))

import react,

from
'react'
import reactdom from
'react-dom'
class
extends
component
}reactdom.
render
(>
, document.
getelementbyid
('root'
))

module.exports =

,    output:
,}

我們希望乙個index.html對對應乙個js檔案,不要在乙個index.html檔案裡引入兩個js檔案,需要繼續修改webpack.config.js:

執行npm run bundle,此時生成的dist目錄:

還可以配置chunk配置項

webpack.config.js

//...

const plugins =
[new
htmlwebpackplugin()
,new
htmlwebpackplugin()
,new
cleanwebpackplugin()
,new
webpack.hotmodulereplacementplugin()
,]//...

webpack多頁面打包

在src下新建多個js檔案和html模板 在entry裡配置多個入口檔案 entry htmlwebpackplugin裡配置不同的html頁面引用不同的js檔案 const plugins new htmlwebpackplugin new htmlwebpackplugin 但是每次在 entr...

webpack多頁面打包配置

有幾個頁面其實就可以new幾個htmlwebpackplugin物件放到記憶體中去 webpack.common.js const plugins htmlwebpackplugin會在打包結束後，自動生成乙個html檔案，並把打包生成的js自動引入到這個html檔案中 newhtmlwebpack...

webpack多頁面方案

參考文章比較多 react loadable import 這個方案需要 babel plugin syntax dynamic import的支援，記得修改babelrc。一般用這個方案的話是要用react router來寫乙個單頁應用，模板載入乙個入口js，入口js裡把頁面路由寫好，每個頁面作為...