VUE 多页面打包webpack配置

/** 修改entry配置项 */
entry: {
style: ‘./src/style/app.scss‘, // 不变
app: ‘./src/main.ts‘, //不变， 这个是index.html的组件
analysis: ‘./src/analysis.ts‘
// analysis是新增的模块名字(名字自定义，项目中因为是分析界面模块所以取名为为analysis)
// 如果还有多个其他页面，可以继续添加模块。。。
// P.S. 注意是模块不是组件，例如个analysis模块中实际包含ValueAnalysis，ValueAnalysisBar，ValueAnalysisType等组件，但是不必引入。
// P.S. 最后build打包的时候记得放出所有的模块
}

/** 和main.src同级,创建analysis.ts文件，注意文件名字是对应上面的./src/analysis.ts文件 */
// analysis.ts
import Vue from ‘vue‘

// register plugins hooks fo vue component
import ‘common/registerHooks‘

import * as svgicon from ‘vue-svgicon‘
// import all icons
import ‘components/icons‘

import App from ‘pages/App‘

Vue.use(svgicon, {
tagName: ‘icon‘
})

new Vue({
el: ‘#app‘,
render: h => h(App)
})

// 内容基本上和main.src一样， 但是注意router有所变化，这里router导入了一个新的路由文件routerAnalysis

// 配置build中的文件输出路径，当然也可以不配置然后在下一步中直接书写文件路径，但是统一比较方便维护
build: {
index: path.resolve(__dirname, `../../dist/${env}/index.html`), // 默认的
analysis: path.resolve(__dirname, `../../dist/${env}/analysis.html`), //新加的模块


...
...
// 其他配置项不变
}

/** 用HTMLWebpackPlugin生成多个文件 */


// 原本的htmlWebpackPlugin配置
new HtmlWebpackPlugin({
filename: config.build.index,
template: ‘build/tpl/index.html‘,
inject: true,
dllName,
assetsPublicPath: config.build.assetsPublicPath,
staticHost: ‘‘,
minify: {
removeComments: true,
collapseWhitespace: true
},
excludeChunks: [‘analysis‘], // index.html没有用到analysis模块的内容
chunksSortMode: ‘dependency‘
}),
// 想要生成多少不同的html就配置多少个new HtmlWebpackPlugin
new HtmlWebpackPlugin({
filename: config.build.analysis, // 生成的新的文件位置，步骤4中配置的路径
template: ‘build/tpl/index.html‘, // html依据模板，可以沿用index.html或者另外写一个，看具体需求
inject: true,
dllName,
assetsPublicPath: config.build.assetsPublicPath,
staticHost: ‘‘,
minify: {
removeComments: true,
collapseWhitespace: true
},
excludeChunks: [‘app‘], // 该模块没有用到app模块中的组件
chunksSortMode: ‘dependency‘
}),