Informationen zur Webpack-Projektkonfiguration

In diesem Artikel werden hauptsächlich die Konfigurationsprobleme bei der Webpack-Kompilierung mehrseitiger Vue-Projekte vorgestellt. Der Herausgeber findet ihn recht gut. Jetzt werde ich ihn als Referenz weitergeben. Folgen wir dem Editor und werfen wir einen Blick darauf.

Dieser Artikel stellt hauptsächlich die Konfigurationsprobleme beim Kompilieren mehrseitiger Vue-Projekte vor und teilt sie mit Ihnen. Die Details sind wie folgt:

Im Allgemeinen: So erstellen Sie ein Vue-Projekt. Die Schritte sind:

1, NodeJS-Umgebung installieren

2, Vue-CLI installieren

cnpm install vue-cli -g

3, Vue-Projekt erstellen

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

4, installieren Sie das Projektabhängigkeitspaket

cnpm install

5, führen Sie das Projekt in der Entwicklungsumgebung aus:

npm run dev

Durch die obigen Schritte wird im Grunde eine einfache Vue-Projektentwicklungsumgebung eingerichtet und die Die nächste Arbeit besteht darin, den Code einzugeben.

Kürzlich habe ich ein Problem beim Refactoring eines Front-End-Codes entdeckt. Das mit diesem Gerüst erstellte Projekt konnte meine Anforderungen nicht erfüllen. Tatsächlich widerspricht diese Anforderung etwas der ursprünglichen Absicht unseres Vue Vue entwickelt eine Single-Page-Anwendung (SPA), hier benötige ich sie, um mehrseitige Effekte zu erzielen. Was bedeutet es? Wenn wir beispielsweise eine Webseite entwickeln, öffnet der Browser manchmal eine neue Registerkarte, um unseren Inhalt anzuzeigen. Die neu geöffnete Seite ist tatsächlich bereits vorhanden gehört uns nicht, bevor (SPA) tatsächlich Routing verwendet, um mehrere Seiten auf der Hauptseite anzuzeigen. Zu diesem Zeitpunkt wurde die neu geöffnete Seite jedoch von der Hauptseite getrennt.

Die Webpack-Konfigurationsdatei des über das vue-cli-Gerüst erstellten Projekts unterstützt die Entwicklung von Einzelseitenanwendungen. Sie verfügt über nur eine Eintragsdatei. Und am Ende wird nur eine Seite produziert. Wie kann ich meine Anforderungen erfüllen und das Webpack für mehrere Seiten gleichzeitig praktisch gestalten? Tatsächlich ist es relativ einfach, das Webpack nur geringfügig zu ändern, und es wird in Ordnung sein.

Zuerst müssen wir eine Methode hinzufügen, um den Dateipfad im Ordner in der Datei utils.js unter der Build-Datei abzurufen. Diese Methode analysiert die Zieldatei in die Form eines Objekts.
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;
}

Ändern Sie dann die Datei wenpack.base.conf.js und ändern Sie die Eintragsdatei. Jetzt müssen Sie den Einzeldateieintrag in einen Mehrfachdateieintrag ändern -Dateieintrag.

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'
 }
 ...
}

Die Dateien webpack.dev und conf.js müssen geändert werden. Der Hauptzweck besteht darin, die ursprünglich konfigurierte Homepage zu ändern hier konfiguriert werden

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));
}

Wenn das Conf-Objekt des neuen HtmlWebpackPlugin hier geändert wird, ist die ursprüngliche Konfiguration ein einzelnes HTML, und jetzt werden mehrere HTML-Konfigurationsobjekte generiert durch Schleifen des Seitenobjekts.

Durch die obige Konfiguration kann Webpack beim Ausführen von npm run dev mehrere Seiten gleichzeitig ermöglichen und dann die in wenpack.base.conf.js konfigurierte js-Datei in die entsprechende HTML-Seite einfügen.

Zu diesem Zeitpunkt führen wir das Projekt npm run dev aus und können dann auf verschiedene Seiten zugreifen. Da wir mehrere Seiten verwalten müssen, sollten wir hier ein Verzeichnis speziell für den Zugriff auf verschiedene Seiten erstellen . Seite. Dadurch wirkt die Projektstruktur übersichtlicher und ist leichter zu pflegen.

Dies ist eine Demo-Adresse, die ich geschrieben habe. Wenn Sie interessiert sind, können Sie sie herunterziehen und einen Blick auf vue-cli-multi-page werfen.

Besuchen Sie nach dem Ausführen http:/. /localhost:8080/module/ index.html und klicken Sie dann auf die Schaltfläche, um eine neue Seite zu öffnen.

Die obige Konfiguration gilt nur für die Entwicklungsumgebung. Schließlich muss auch die Konfigurationsdatei webpack.prod.conf.js der Produktionsumgebung geändert werden, damit im dist at mehrere HTML-Dateien generiert werden können gleichzeitig während der Produktionsverpackung.

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));
}

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Modulare Entwicklung in Vuejs

So implementieren Sie die Array-Update-Funktion in VUE

Worauf sollten wir bei der Optimierung von Vue-Projekten achten?

Das obige ist der detaillierte Inhalt vonInformationen zur Webpack-Projektkonfiguration. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!