À propos de la configuration du projet Webpack

Cet article présente principalement l'explication détaillée des problèmes de configuration de la compilation webpack de projets de vue multipages. L'éditeur pense que c'est plutôt bon. Maintenant, je vais le partager avec vous et le donner comme référence. Suivons l'éditeur et jetons un coup d'œil.

Cet article présente principalement les problèmes de configuration du webpack compilant des projets de vue multi-pages et les partage avec vous :

Généralement, comment créer un projet vue Les étapes sont :

1, installer l'environnement nodejs

2, installer vue-cli

cnpm install vue-cli -g

3, créer le projet vue

vue init webpack-simple vue-cli-multipage-demo

4 , installez le package de dépendances du projet

cnpm install

5, exécutez le projet dans l'environnement de développement :

npm run dev

Grâce aux étapes ci-dessus, un simple projet vue L'environnement de développement est essentiellement configuré, la tâche suivante consiste à remplir le code.

Récemment, j'ai découvert un problème lors de la refactorisation d'un code front-end. Le projet construit à l'aide de cet échafaudage ne pouvait pas répondre à mes besoins. En fait, cette exigence est un peu contraire à l'intention initiale de notre Vue. Vue développe une seule page (SPA), ici j'en ai besoin pour obtenir des effets multipages. Qu'est-ce que ça veut dire? Par exemple : lorsque nous développons des pages Web, parfois lorsque nous cliquons sur un lien, le navigateur ouvre une nouvelle page à onglet pour afficher notre contenu. À ce moment-là, il y a en fait plusieurs pages. La page nouvellement ouverte est en fait déjà la page qui. ne nous appartient pas auparavant (SPA) utilise effectivement le routage pour afficher plusieurs pages sur la page principale. Mais pour le moment, la page nouvellement ouverte a été séparée de la page principale.

Le fichier de configuration webpack du projet construit via l'échafaudage vue-cli prend en charge le développement d'applications d'une seule page. Il n'a qu'un seul fichier d'entrée. Et une seule page sera finalement produite. Comment puis-je répondre à mes besoins et rendre Webpack pratique pour plusieurs pages en même temps ? En fait, c'est relativement simple, il me suffit de modifier légèrement Webpack et tout ira bien.

Tout d'abord, nous devons ajouter une méthode pour obtenir le chemin du fichier dans le dossier du fichier utils.js sous le fichier de construction. Cette méthode analyse le fichier cible sous la forme d'un objet.
utils.js

var glob = require("glob");//分析文件夹中文件路径的第三方模块
exports.getEntry = function(globPath) {
 var entries = {},
 basename, tmp, pathname;
 if (typeof (globPath) != "object") {
 globPath = [globPath]
 }
 globPath.forEach((itemPath) => {
 glob.sync(itemPath).forEach(function (entry) {
  basename = path.basename(entry, path.extname(entry));
  if (entry.split('/').length > 4) {
  tmp = entry.split('/').splice(-3);
  pathname = tmp.splice(0, 1) + '/' + basename; // 正确输出js和html的路径
  entries[pathname] = entry;
  } else {
  entries[basename] = entry;
  }
 });
 });
 return entries;
}

Modifiez ensuite le fichier wenpack.base.conf.js et modifiez le fichier d'entrée. Le fichier d'origine est un fichier unique. Vous devez maintenant modifier l'entrée de fichier unique en. une entrée multi-fichiers.

webpack.dev.conf.js

var path = require('path')
var config = require('../config')
var utils = require('./utils')
var projectRoot = path.resolve(__dirname, '../')
var glob = require('glob');
var entries = utils.getEntry(['./src/module/**/*.js']); // 获得多页面的入口js文件
var env = process.env.NODE_ENV
// various preprocessor loaders added to vue-loader at the end of this file
var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap)
var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap)
var useCssSourceMap = cssSourceMapDev || cssSourceMapProd
module.exports = {
 entry: entries,//这是通过前面新增的方法获取的文件路径对象
 output: {
 path: config.build.assetsRoot,
 publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
 filename: '[name].js'
 }
 ...
}

Les fichiers webpack.dev et conf.js doivent être modifiés ci-dessous. Le but principal ici est de modifier la page d'accueil configurée d'origine. les pages doivent être configurées ici.

webpack.dev.conf.js

var path = require('path');
var config = require('../config')
var webpack = require('webpack')
var merge = require('webpack-merge')
var utils = require('./utils')
var baseWebpackConfig = require('./webpack.base.conf')
var HtmlWebpackPlugin = require('html-webpack-plugin')
Object.keys(baseWebpackConfig.entry).forEach(function (name) {
 baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
})
module.exports = merge(baseWebpackConfig, {
 ...
});
//新增
var pages =utils.getEntry(['./src/module/*.html','./src/module/**/*.html']);
for (var pathname in pages) {
 // 配置生成的html文件，定义路径等
 var conf = {
 filename: pathname + '.html',
 template: pages[pathname], // 模板路径
 inject: true,    // js插入位置
 chunksSortMode: 'dependency'
 };
 if (pathname in module.exports.entry) {
 conf.chunks = ['manifest', 'vendor', pathname];
 conf.hash = true;
 }
 module.exports.plugins.push(new HtmlWebpackPlugin(conf));
}

Ici, si l'objet conf du nouveau HtmlWebpackPlugin est modifié, la configuration d'origine est un seul code HTML, et désormais, plusieurs objets de pages sont générés en bouclant un objet de configuration HTML.

Grâce à la configuration ci-dessus, lorsque nous exécutons npm run dev, webpack peut faciliter plusieurs pages en même temps, puis insérer le fichier js configuré dans wenpack.base.conf.js dans la page html correspondante.

En ce moment, nous exécutons le projet npm run dev et nous pouvons ensuite accéder à différentes pages. Il convient de noter ici que puisque nous devons gérer plusieurs pages, nous devons créer un répertoire sous src spécifiquement pour accéder à différentes pages. . De cette façon, la structure du projet semble plus claire et est plus facile à maintenir.

C'est une adresse de démonstration que j'ai écrite. Si vous êtes intéressé, vous pouvez la dérouler et jeter un œil à vue-cli-multi-page

Après l'avoir exécutée, visitez http:/ /localhost:8080/module/ index.html, puis cliquez sur le bouton pour ouvrir une nouvelle page.

La configuration ci-dessus est uniquement destinée à l'environnement de développement. Enfin, le fichier de configuration webpack.prod.conf.js de l'environnement de production doit également être modifié, afin que plusieurs fichiers html puissent être générés dans la dist. en même temps lors de l'emballage de la production.

webpack.prod.conf :

var path = require('path')
var config = require('../config')
var utils = require('./utils')
var webpack = require('webpack')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var CleanPlugin = require('clean-webpack-plugin')//webpack插件，用于清除目录文件
var env = config.build.env
var webpackConfig = merge(baseWebpackConfig, {
...
}
//这里是修改的部分，和webpack.dev.conf.js的修改是一样的
module.exports = webpackConfig
var pages =utils.getEntry(['./src/module/**/*.html']);
for (var pathname in pages) {
 // 配置生成的html文件，定义路径等
 var conf = {
 filename: pathname + '.html',//生成 html 文件的文件名
 template: pages[pathname], // 根据自己的指定的模板文件来生成特定的 html 文件。这里的模板类型可以是任意你喜欢的模板，可以是 html, jade, ejs, hbs, 等等，但是要注意的是，使用自定义的模板文件时，需要提前安装对应的 loader，
 inject: true,    // 注入选项。有四个选项值 true, body, head, false.true:默认值，script标签位于html文件的 body 底部,body:同 true,head:script 标签位于 head 标签内,false:不插入生成的 js 文件，只是单纯的生成一个 html 文件
 // necessary to consistently work with multiple chunks via CommonsChunkPlugin
 chunksSortMode: 'dependency'
 };
 if (pathname in module.exports.entry) {
 conf.chunks = ['manifest', 'vendor', pathname];
 conf.hash = true;
 }
 module.exports.plugins.push(new HtmlWebpackPlugin(conf));
}

Ce qui précède est ce que j'ai compilé pour vous. J'espère qu'il vous sera utile à l'avenir.

Articles associés :

Développer de manière modulaire dans vuejs

Comment implémenter la fonction de mise à jour de tableau dans VUE

À quoi devons-nous faire attention lors de l'optimisation des projets Vue ?

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!