Ich liebe die Fähigkeit, einen Chunk mit dem Befehl import in Webpack 3 dynamisch zu importieren. Leider scheint es, als ob es nur verwendet werden kann, wenn die Ressourcen in einer eher statischen Verzeichniskonfiguration sind auf dem Server.Dynamischer Webpack-Import wegen statischem publicPath nicht möglich
In meiner Umgebung die HTML-Seiten dynamisch im Backend generiert (sagen wir http:/localhost/app). Alle anderen Ressourcen (js, css, images usw.) befinden sich in einem anderen Verzeichnis (zB http:/localhost/res), aber zusätzlich ist res nicht statisch, sondern kann sich dynamisch im Backend ändern.
Solange ich keine dynamische Importe alles wie erwartet funktioniert verwenden Sie aber, wenn dynamisch versuchen, alle Stücke zu laden dies fehlschlägt, weil webpack standardmäßig die Brocken in http:/localhost/app werden erwartet, und ich kann publicPath nicht, weil die URL verwenden, wo die Ressourcen sind dynamisch.
Gibt es eine Möglichkeit (webwatch) zu konfigurieren, dass webpack die Ressourcen relativ zu dem Pfad lädt, in dem sich die aktuelle Ressource befindet. Wenn zum Beispiel der Chunk page1.js in http:/localhost/resA dynamisch lädt den Chunk sub1.js sollte er in http:/localhost/resA statt http:/localhost/app suchen.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="http:/localhost/resA/page1.bundle.js"></script>
</body>
</html>
Datei src/page1.js verfügbar sein wird als http:/localhost/resA/page1.bundle.js:
import(/* webpackChunkName: "sub1" */ './sub1').then(({MyClass}) => {/*...*/});
Datei src/sub1 verfügbar sein wird als http:/localhost/resA/sub1.bundle.js:
generierten HTML wird bei http:/localhost/app/page1 verfügbar sein
export class MyClass {};
Datei `webpack.config.js':
const path = require('path');
const webpack = require('webpack');
function config(env) {
return {
entry: {
index: ['./src/page1.js']
},
output: {
filename: '[name].bundle.js',
chunkFilename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: './'
},
module: {
rules: [
{
test: /\.js$/i,
include: /src/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
},
devtool: 'source-map'
};
}
module.exports = config;