[英]Webpack chunking. No content appearing - chunks not loaded
這是我試圖解決這個煩人的一天，但我確定，這是一個簡單的問題。 我試圖將我的bundle.js分成塊來優化網站加載時間。
這是我的webpack.config文件：
module.exports = {
devServer: {
historyApiFallback: true
},
entry: {
index: ["./src/index.js"],
vendor: [
"react",
"react-dom",
"react-redux",
"react-router",
"react-router-dom",
"redux"
]
},
output: {
path: __dirname + '/public/views',
filename: "[name].js",
publicPath: "/views/"
},
module: {
loaders: [
{
test: /\.js$/,
loader: "babel-loader",
exclude: [/node_modules/, /pdfmake.js$/]
},
{
test: /\.json$/,
loader: "json-loader"
}
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: "vendor",
filename: "vendor.js",
minChunks: Infinity
}),
new webpack.optimize.CommonsChunkPlugin({
name: "meta",
chunks: ["vendor"],
filename: "meta.js"
}),
new webpack.NamedModulesPlugin(),
new HtmlWebpackPlugin({
title: "Deals",
filename: __dirname + "/views/index.ejs",
template: __dirname + "/views/template.ejs",
inject: false
}),
new PreloadWebpackPlugin({
rel: "preload",
as: "script",
include: "all"
}),
new webpack.optimize.OccurrenceOrderPlugin(),
]
};
這是我的簡化index.ejs ，通過運行webpack代碼創建的文件，來自template.ejs的結果：
<!DOCTYPE html>
<html lang="en">
<head>
<link href="/pace.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
<meta charset="utf-8">
<link rel="stylesheet" href="/style.css">
<link rel="canonical" href="http://verygoodprof.fr/" />
<link rel="preload" as="script" href="/views/index.js">
<link rel="preload" as="script" href="/views/vendor.js">
<link rel="preload" as="script" href="/views/meta.js">
</head>
<body>
<noscript>
<a href="http://enable-javascript.com/">Javascript must me enabled to use this site.</a>
</noscript>
<div class="text-center root" id="root">
</div>
</body>
</html>
在這里，我看到我已經預先加載了動態編寫的塊，並且這些塊在運行webpack代碼后創建的正確文件夾中。
這是我的index.js文件（React），聲明是webpack.config文件中的索引條目
ReactDOM.render(
<Provider store={createStoreWithMiddleware(reducers)}>
<AppInit>
<BrowserRouter>
<div style={{ height: "100%" }}>
<ProfRegisteringModal />
<Switch>
{/* <Route path="/inscription/:user" component={Registering} />
<Route path="/inscription" component={Registering} />
<Route path="/connexion" component={SigningIn} />
<Route path="/equipe" component={TeamPres} />
<Route path="/" component={AppContainer} /> */}
<Route
path="/inscription/:user"
getComponent={(location, callback) => {
require.ensure(
[],
function(require) {
callback(
null,
require("./components/registering/registering_landing_page.js")
);
},
"registerChunk"
);
}}
/>
<Route
path="/inscription"
getComponent={(location, callback) => {
require.ensure(
[],
function(require) {
callback(
null,
require("./components/registering/registering_landing_page.js")
);
},
"registerChunk"
);
}}
/>
<Route
path="/connexion"
getComponent={(location, callback) => {
require.ensure(
[],
function(require) {
callback(
null,
require("./containers/registering/signing_in.js")
);
},
"signinChunk"
);
}}
/>
<Route
path="/equipe"
getComponent={(location, callback) => {
require.ensure(
[],
function(require) {
callback(null, require("./components/team_pres.js"));
},
"teampresChunk"
);
}}
/>
<Route
path="/"
getComponent={(location, callback) => {
require.ensure(
[],
function(require) {
callback(null, require("./containers/app_container.js"));
},
"appContainerChunk"
);
}}
/>
</Switch>
</div>
</BrowserRouter>
</AppInit>
</Provider>,
document.querySelector(".root")
);
我注意到的第一件事是，這應該是構建大塊正確專為供應商和元但不是我內心的反應的組分。 但這不是主要問題，事實是，當在本地運行服務器時， 我根本看不到我的反應應用程序 。 當我在控制台中簽入時，index.ejs文件已正確加載。
當使用一個包含所有內容的簡單bundle.js文件（沒有塊）時，一切都工作得很好 。 使用index.ejs指向它
<script src="/views/bundle.js"></script>
這個webpack.config文件使它工作（歸功於@margaretkru）：
module.exports = {
devServer: {
historyApiFallback: true
},
entry: {
app:"./src/index.js",
vendor: [
"axios",
"jquery",
"react",
"react-dom",
"react-redux",
"react-router",
"react-router-dom",
"redux"
]
},
output: {
path: __dirname + '/public/views',
filename: "[name].js",
publicPath: "/views/"
},
module: {
loaders: [
{
test: /\.js$/,
loader: "babel-loader",
exclude: [/node_modules/, /pdfmake.js$/]
},
{
test: /\.json$/,
loader: "json-loader"
}
]
},
plugins: [
new webpack.NamedModulesPlugin(),
new HtmlWebpackPlugin({
filename: __dirname + "/views/index.ejs",
template: __dirname + "/views/template.ejs",
inject: 'body',
chunks: ['vendor', 'app'],
chunksSortMode: 'manual'
}),
new PreloadWebpackPlugin({
rel: "preload",
include: ["vendor", "app"]
}),
new webpack.optimize.OccurrenceOrderPlugin(),
]
};new webpack.optimize.CommonsChunkPlugin({
name: "vendor",
minChunks: Infinity
}),
new webpack.NamedModulesPlugin(),
new HtmlWebpackPlugin({
filename: __dirname + "/views/index.ejs",
template: __dirname + "/views/template.ejs",
inject: 'body',
chunks: ['vendor', 'app'],
chunksSortMode: 'manual'
}),
new PreloadWebpackPlugin({
rel: "preload",
include: ["vendor", "app"]
}),
new webpack.optimize.OccurrenceOrderPlugin(),
]
};
真正的問題不是加載的腳本排序，而是在“預加載”它們之后我實際上沒有加載腳本：HTMLWebpackPlugin的“inject”行有幫助，因為它注入了這兩行：
<script src="/views/vendor.js"/>
<script src="/views/app.js"/>
在我的index.ejs正文中
index.ejs中加載的腳本的順序不正確。 現在它是：
<link rel="preload" as="script" href="/views/index.js">
<link rel="preload" as="script" href="/views/vendor.js">
這意味着您的index.js將在vendor.js之前加載，導致您的應用根本不顯示。 首先應該加載所有應用程序的依賴項（ vendor.js ），然后才能加載index.js因為在執行自定義代碼時需要存在依賴項。 所以它應該是：
<link rel="preload" as="script" href="/views/vendor.js">
<link rel="preload" as="script" href="/views/index.js">
編輯：
正如我們最終想出的那樣，問題不在於腳本的順序，而是由於腳本實際上沒有在html加載。 為此，他們需要在HtmlWebpackPlugin添加為塊並注入index.html ：
new HtmlWebpackPlugin({
title: "Deals",
filename: __dirname + "/views/index.ejs",
template: __dirname + "/views/template.ejs",
inject: 'body',
chunks: ['vendor', 'index']
})
此外，完全刪除了塊meta的配置。 所有其余的配置（包括PreloadWebpackPlugin ）都很好。
Webpack，優化分塊給出“沖突：多個塊將資產發送到相同的文件名”錯誤
[英]Webpack, optimization chunking gives “Conflict: Multiple chunks emit assets to the same filename” error
webpack：帶有webworker和多個塊的commonchunksplugin
[英]webpack: commonchunksplugin with webworker and multiple chunks
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.