Home > Article > Web Front-end > 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
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.
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 componentvue:srcHow to handle file path errorsThe 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!