How to use WebPack to configure vue multi-page

This time I will show you how to use WebPack to configure vue multi-page, and what are the precautions for using WebPack to configure vue multi-page. The following is a practical case, let's take a look.

Let’s take a look at the structure of the project first:

├── 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

admin.html Admin.vue and admin.js under the src folder, as well as some api, pages, vuex and other folders, are the most common project structure for vue-cli initialization.

Add an entrance to the backend management interface admin.html. Others that can be shared are still shared. Let’s get to the point:

Modify the configuration file of webpack

##Modify webpack.base.conf.jsOpen ~\build\webpack.base.conf.js, find the entry, and add multiple entries:

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

When running the compilation, each entry will correspond to a chunk.

Modification of run dev configurationOpen ·~\build\webpack.dev.conf.js· and find HtmlWebpackPlugin under plugins. Add the corresponding multiple pages after it, and add the Chunk configuration for each page as follows:

new HtmlWebpackPlugin({
 filename: 'index.html', //生成的html
 template: 'index.html', //来源html
 inject: true, 
 chunks: ['app']//需要引入的Chunk，不配置就会引入所有页面的资源
}),
new HtmlWebpackPlugin({
 filename: 'admin.html',
 template: 'admin.html',
 inject: true,
 chunks: ['admin']
}),

Modification of run build configuration

Modify config/index.jsOpen ~\config\index.js and find the index under build: path.resolve(

, '../dist/index.html'), add multiple pages after it: admin: path.resolve(dirname, '../dist/admin.html'),

Modify webpack.prod.conf.jsOpen ~\build\webpack.prod.conf.js, find HtmlWebpackPlugin under plugins, and add it after it Corresponding multiple pages, and add Chunk configuration to each page:

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']
}),

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

The above is the detailed content of How to use WebPack to configure vue multi-page. For more information, please follow other related articles on the PHP Chinese website!