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 the precautions for configuring vue multi-page with WebPack? The following is a practical case, let's take a look.

WebPack tortured me thousands of times, I took her like my first love. The front-end page of a project is almost written, and webpack has almost zero configuration, so it can be considered working. Now we need to write the backend management interface and start a separate project, which does not exist. So I searched a lot of articles on the Internet, and many of them modified the structure of the project. I hate it. The way vue-cli does it, why do I need to modify it again and again. For someone like me who is new to front-end, the front-end part cannot run if the configuration of webpack is changed. . .

So I have this note:

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

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

I believe everyone must be familiar with this structure, except

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.

What I want is

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(

dirname

, '../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:

Detailed explanation of the steps to build a react development environment with webpack

##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!