需求:项目中需要在一个vue项目中实现多个入口
一般的vue项目入口文件是html.html,但是若是想要实现多入口文件,就需要通过webpack进行配置。实现过程如下:(以添加newEntry为例)
1.在项目根路径下添加newEntry.html文件,id=newEntry
2.在src文件下添加newEntry.js和NewEntry,vue文件,在newEntry.js引入NewEntry,vue文件。
new Vue({
el: '#newEntry',
router,
store,
render: h => h(NewEntry)
}
)
3.配置开发环境webpack
打开build - webpack.base.conf.js文件,在entry中添加一条新的入口
oneConnect: ["babel-polyfill", "./src/newEntry.js"],
打开build - webpack.dev.conf.js文件,在plugins中添加一条
new HtmlWebpackPlugin({
filename: 'newEntry.html',
template: 'newEntry.html',
inject: true,
favicon: resolve('favicon.ico'),
chunks:['newEntry'],
}),
4.配置生产环境webpack
打开config - index.js文件,在build中添加
newEntry: path.resolve(__dirname, '../dist/newEntry.html'),
注意:dist为build中assetsRoot的文件名
打开build - webpack.prod.conf.js文件,在plugins中添加一条
new HtmlWebpackPlugin({
filename: config.build.newEntry,
template: 'newEntry.html',
inject: true,
favicon: resolve('favicon.ico'),
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency',
chunks:['newEntry']
}),