一. 项目多入口
1. 创建第二个入口的文件
与第一个入口的一样
-- index_mobile.html
src
-- App_mobile.vue
-- main_mobile.vue (代码里面修改引用的文件名)
router
-- index_mobile.js
2. 修改配置文件
(1) 修改 build/webpack.base.conf.js
module.exports = {
entry: {
...,
mobile: ["babel-polyfill", "./src/main_mobile.js"] //新增
},
(2) 修改 build/webpack.dev.conf.js
const devWebpackConfig = merge(baseWebpackConfig, {
...
plugins: [
...
new HtmlWebpackPlugin({
...
chunks: ['app'] //修改
}),
new HtmlWebpackPlugin({ //新增
filename: 'index_mobile.html',
template: 'index_mobile.html',
inject: true,
chunks: ['mobile']
})
(3) 修改 build/webpack.prod.conf.js
const webpackConfig = merge(baseWebpackConfig, {
...
plugins: [
...
new HtmlWebpackPlugin({
...
chunks: ['manifest', 'vendor', 'app'] //修改
}),
new HtmlWebpackPlugin({ //新增
filename: process.env.NODE_ENV === 'testing'
? 'index_mobile.html'
: config.build.mobile,
template: 'index_mobile.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency',
chunks: ['manifest', 'vendor', 'mobile']
})
(4) 修改 config/index.js
module.exports = {
...
build: {
...
mobile: path.resolve(__dirname, '../dist/index_mobile.html'), //新增