UI組件按需引入；
-
登錄頁與其它部分分離——>webpack的多入口功能杖小；
什么是HtmlWebpackPlugin：
- 為html文件中引入的外部資源如script、link動(dòng)態(tài)添加每次compile后的hash，防止引用緩存的外部文件問題
- 可以生成創(chuàng)建html入口文件贞盯，比如單頁面可以生成一個(gè)html文件入口，配置N個(gè)html-webpack-plugin可以生成N個(gè)頁面入口
場(chǎng)景：vue項(xiàng)目打開登錄首頁時(shí)等待時(shí)間太久沪饺。
vue中普通入口是app躏敢，可以再加一個(gè)入口login，指向另外一個(gè)js文件整葡；
1.修改webpack配置：
// html-webpack-plugin 使用
// 安裝 npm install html-webpack-plugin --save
// 默認(rèn)配置
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: 'index.js',
output: {
path: __dirname + '/dist',
filename: 'index_bundle.js'
},
plugins: [
new HtmlWebpackPlugin()
]
}
// 當(dāng)配置多個(gè)入口文件 entry 時(shí)件余， 生成的將都會(huì)使用 script 引入
module.exports = {
new HtmlWebpackPlugin({
filename: 'index1.html', // 配置輸出文件名和路徑
template: './src/index1.html', // 配置文件模板
chunks : ['index1']
}), // Generates default index.html
new HtmlWebpackPlugin({
filename: 'index.html', // 配置輸出文件名和路徑
template: './src/index.html', // 配置文件模板
chunks : ['index']
})
}
路由的懶加載
使用cdn
打包時(shí)，把vue遭居、vuex啼器、vue-router、axios等俱萍，換用國內(nèi)的bootcdn直接引入到根目錄的index.html端壳。
在webpack build 下 base.conf.js 設(shè)置中添加externals，忽略不需要打包的庫鼠次。
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
externals:{
'vue':'Vue',
'vue-router':'VueRouter',
'vuex':'Vuex'
},
// 格式為'aaa':'bbb'更哄，其中芋齿，aaa表示要引入的資源的名字，bbb表示該模塊提供給外部引用的名字成翩，由對(duì)應(yīng)的庫自定觅捆。例如，vue為Vue麻敌，vue-router為VueRouter
