Comment utiliser WebPack pour configurer vue multipage

Cette fois, je vais vous montrer comment utiliser WebPack pour configurer Vue multi-page. Quelles sont les précautions pour utiliser WebPack pour configurer Vue multi-page. Ce qui suit est un cas pratique, prenons un. regarder.

WebPack m'a torturé des milliers de fois, je l'ai prise comme mon premier amour. La page frontale d'un projet est presque écrite et le webpack n'a presque aucune configuration, il peut donc être considéré comme fonctionnel. Nous devons maintenant écrire l'interface de gestion backend et démarrer un projet séparé, qui n'existe pas. J'ai donc cherché beaucoup d'articles sur Internet, et beaucoup d'entre eux ont modifié la structure du projet. Je déteste la façon dont vue-cli le fait, pourquoi dois-je le modifier encore et encore. Pour quelqu'un comme moi qui est nouveau dans le front-end, la partie front-end ne peut pas fonctionner si la configuration du webpack est modifiée. . .

J'ai donc cette note :

Premier regard sur la structure du projet :

├── build
├── config
├── src
│ ├── api
│ ├── actifs
│ ├── composants
│ ├── pages
│ ├ ─ ─ routeur
│ ├── utils
│ ├── vuex
│ ├── App.vue
│ ├── main.js
│ ├── admin.js
│ └── Admin.vue
├── statique
│ └── images
├── README.md
├── admin.html
├── index.html
├── package.json
└── Yarn.lock

Je pense que tout le monde doit être familier avec cette structure, à l'exception de admin.html et de ceux sous le dossier src Admin.vue, admin.js et certains dossiers API, pages, vuex et autres sont la structure de projet la plus courante initialisée par vue-cli.

Ce que je souhaite, c'est ajouter une entrée à l'interface de gestion backend admin.html Les autres qui peuvent être partagés doivent être partagés :

. Modifier le fichier de configuration de webpack

Modifier webpack.base.conf.js

Ouvrez ~buildwebpack.base.conf.js, recherchez l'entrée et ajoutez plusieurs entrées :

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

Lors de l'exécution de la compilation, chaque entrée correspondra à un morceau.

Modification de la configuration de développement d'exécution

Ouvrez·~buildwebpack.dev.conf.js·, recherchez HtmlWebpackPlugin sous les plugins, derrière lui ajoutez correspondant plusieurs pages et ajoutez la configuration Chunk pour chaque page comme suit :

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 de la configuration de build d'exécution

Modifiez config/index.js

Ouvrez ~configindex.js et recherchez l'index sous build : path.resolve(dirname, '../ dist/index. html'), ajoutez plusieurs pages après :

admin: path.resolve(dirname, '../dist/admin.html'),

Modifier le webpack .prod.conf.js

Ouvrez ~buildwebpack.prod.conf.js, recherchez HtmlWebpackPlugin sous les plugins, ajoutez les plusieurs pages correspondantes après et ajoutez la configuration Chunk à chaque 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']
}),

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

Comment utiliser le composant de téléchargement d'images vux uploader

vue:src Comment gérer les fichiers erreurs de chemin

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!