Detailed explanation of steps to configure Vue multi-page with WebPack

This time I will bring you a detailed explanation of the steps for configuring vue multi-page with WebPack. What are theprecautions for configuring vue multi-page with WebPack? 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.htmlAdmin.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.

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

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

End

Well, without it, there is no need to modify the project structure. The more complex the process, the easier it is to make mistakes. The above webpack configuration is simple and understandable.

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 command processing method cannot be found after Nodejs installs the module globally

The above is the detailed content of Detailed explanation of steps to configure Vue multi-page with WebPack. For more information, please follow other related articles on the PHP Chinese website!