Explication détaillée des étapes pour configurer Vue multipage avec WebPack

Cette fois, je vais vous apporter une explication détaillée des étapes pour configurer Vue multi-page avec WebPack Quelles sont les précautions pour configurer Vue multi-page avec WebPack. Voici un cas pratique, allons-y. jetez un oeil.

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 s'exécuter 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']
}),

Fin

Eh bien, sans cela, il n'est pas nécessaire de modifier la structure du projet. Plus le processus est complexe, plus il est facile de commettre des erreurs. La configuration du webpack ci-dessus est simple et compréhensible.

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 :

Explication détaillée des étapes pour créer un environnement de développement React avec webpack

La méthode de traitement des commandes est introuvable après que Nodejs ait installé le module globalement

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!