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.

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 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:

How to use the vux uploader image upload component

vue:srcHow to handle file path errors

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!