怎么在WebPack中配置vue多頁面

今天就跟大家聊聊有關(guān)怎么在WebPack中配置vue多頁面，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

項(xiàng)目結(jié)構(gòu)：

├── build
├── config
├── src
│   ├── api
│   ├── assets
│   ├── components
│   ├── pages
│   ├── router
│   ├── utils
│   ├── vuex
│   ├── App.vue
│   ├── main.js
│   ├── admin.js
│   └── Admin.vue
├── static
│   └── images
├── README.md
├── admin.html
├── index.html
├── package.json
└── yarn.lock

我相信這樣的結(jié)構(gòu)大家一定很熟悉，除了 admin.html 和src文件夾下面的 Admin.vue 、 admin.js ，還有一些api，pages，vuex等文件夾，就是最常見的一個(gè)vue-cli初始化的項(xiàng)目結(jié)構(gòu)。

我想要就是新增一個(gè)后臺(tái)管理界面的入口admin.html，其他能夠共用的還是共用，進(jìn)入正題：

修改webpack的配置文件

修改 webpack.base.conf.js

打開 ~\build\webpack.base.conf.js ，找到entry，添加多入口:

entry: {
 app: './src/main.js',
 admin: './src/admin.js' //新增
},

這樣運(yùn)行編譯的時(shí)候，每一個(gè)入口都會(huì)對(duì)應(yīng)一個(gè)chunk。

run dev配置的修改

打開 ·~\build\webpack.dev.conf.js· ，在plugins下找到 HtmlWebpackPlugin ，在其后面添加對(duì)應(yīng)的多頁，并為每個(gè)頁面添加Chunk配置如下:

new HtmlWebpackPlugin({
 filename: 'index.html', //生成的html
 template: 'index.html', //來源html
 inject: true, 
 chunks: ['app']//需要引入的Chunk，不配置就會(huì)引入所有頁面的資源
}),
new HtmlWebpackPlugin({
 filename: 'admin.html',
 template: 'admin.html',
 inject: true,
 chunks: ['admin']
}),

run build配置的修改

修改config/index.js

打開 ~\config\index.js ，找到build下的 index: path.resolve(__dirname, '../dist/index.html') ，在其后添加多頁:

admin: path.resolve(__dirname, '../dist/admin.html'),

修改 webpack.prod.conf.js

打開 ~\build\webpack.prod.conf.js ，在plugins下找到 HtmlWebpackPlugin ，在其后面添加對(duì)應(yīng)的多頁，并為每個(gè)頁面添加Chunk配置:

new HtmlWebpackPlugin({
 filename: config.build.index,
 template: 'index.html',
 inject: true,
 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: ['manifest', 'vendor', 'app']
}),
new HtmlWebpackPlugin({
 filename: config.build.admin,
 template: 'admin.html',
 inject: true,
 minify: {
 removeComments: true,
 collapseWhitespace: true,
 removeAttributeQuotes: true
 },
 chunksSortMode: 'dependency',
 chunks: ['manifest', 'vendor', 'admin']
}),

看完上述內(nèi)容，你們對(duì)怎么在WebPack中配置vue多頁面有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。