Webpack 程式碼拆分
阿新 • • 發佈：2018-12-28
路由檔案main.jsx
<Route path='/detail/:mid'
getComponent={(location, cb) => {require.ensure([], require => {
cb(null, require('./routes/DetailPage').default)
}, 'DetailPage');
}}
/>
webpack.config.js
output: {
path: __dirname + '/build',
publicPath: '/',
filename: './bundle.js',
chunkFilename: './js/routes/[name].chunk.js?[chunkhash:10]', // 按需載入輸出的檔名
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new OpenBrowserPlugin({ url: 'http://192.168.3.3:8080' }),
new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"vendor.bundle.js")
],// 指定一個希望作為公共包的入口
index.html
<script type="text/javascript" src="/vendor.bundle.js"></script>
<script type="text/javascript" src="/bundle.js"></script>