我在项目中使用webpack。当Javascript包变得很大时，我决定使用react-loadable动态导入来拆分代码，例如
...
import Loadable from 'react-loadable';
const LoadablePage = Loadable({
loader: () => import('./page'),
loading: Loading,
});
class Main extends Component {
render () {
return (<LoadablePage/>);
}
}
打开http://my_domain.com页面时，浏览器已成功从index.js加载http://localhost:8080/build/test/index.js。然后尝试从0.js加载http://my_domain.com/build/0.js块。
但是0.js在http://my_domain.com/build/0.js位置不存在，可以从http://localhost:8080/build/0.js成功加载。
如何在开发过程中正确指定加载块的域？
module.exports = {
entry: {
'test/index': [ 'babel-polyfill', './resources/assets/modules/test/index', ],
},
output: {
path: path.resolve(__dirname, './public/build/'),
publicPath: '/build/',
filename: '[name].js',
chunkFilename: '[name].js',
},
...
devServer: {
contentBase: './build/',
proxy: [{
path: '/',
target: 'http://localhost',
port: 8080,
}],
},
...
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no"/>
<link rel="stylesheet" href="http://localhost:8080/build/test/index.css"/>
</head>
<body>
<div id="root"></div>
<script src="http://localhost:8080/build/test/index.js"></script>
</body>
</html>