تحليل شامل لاستخدام webpack لبناء تطبيق متعدد الصفحات

عن إعدادات webpack والاستخدام، هناك العديد من المقالات على الإنترنت، معظمها يتحدث عن تطبيقات صفحة واحدة، عندما نحتاج إلى البكج html متعددة، يصبح الأمر معقدًا. كيفية استخدام مسار في webpack-dev-server؟ كيفية البكج html و js chunk متعددة وتحديث md5 تلقائيًا؟ هذا المقال يشرح كيفية حل هذه المشاكل.

هنا افترض أنك تعرف أساسيات webpack

الاحتياجات

لنلقي نظرة على احتياجاتنا:

1. استخدام webpack-dev-server كخادم أثناء التطوير
2. استخدام مسار في webpack-dev-server، عند زيارة /a سيتم عرض a.html، وعند زيارة /b سيتم عرض b.html
3. البكج الم打包 إلى html متعددة، وإضافة md5 إلى الموارد المشار إليها

هيكل الدليل الرئيسي

├── src            
│  └── views         # كل مجلد تتطابق مع صفحة
│    └── a         
│      └── index.js
│    └── b         
│      └── index.js
├── output          # مجلد الإخراج الم打包
|  └── ...
└── template.html       # وفقًا لهذا النموذج، سيتم إنشاء html لكل صفحة
└── webpack.config.js
└── dev-server.js       # webpack-dev-server + express    

only listed the main directories, here we generate multiple page html based on a template.html, and they only differ in the path of the referenced resources. Of course, you can also use a separate html template for each page.

Webpack Configuration

here mainly solve two small problems.

1. package js files for multiple pages

read the directory under src/views, each directory is treated as a page, and package it into a js chunk.

2. package multiple html

loop to generate multiple HtmlWebpackPlugin plugins, and each plugin's chunks point to the above packed js chunk.

// webpack.config.js
var glob = require('glob');
var webpackConfig = {
  /* some webpack basic configuration */  
};
// get entry files under specified path
function getEntries(globPath) {
   var files = glob.sync(globPath),
    entries = {};
   files.forEach(function(filepath) {
     // take the second last layer (folders under view) as package name
     var split = filepath.split('/');
     var name = split[split.length - 2];
     entries[name] = './' + filepath;
   });
   return entries;
}
var entries = getEntries('src/view/**/index.js');
Object.keys(entries).forEach(function(name) {
  // generate an entry for each page, if HotUpdate is needed, modify entry here
  webpackConfig.entry[name] = entries[name];
  // generate an html for each page
  var plugin = new HtmlWebpackPlugin({
    // generated html filename
    filename: name + '.html',
    // each html template, here multiple pages use the same template
    template: './template.html',
    // auto insert reference into html
    inject: true,
    // يمكن إضافة ملفات js المشار إليها في كل html هنا أيضًا، مثل الملفات العامة مثل vendor
    chunks: [name]
  });
  webpackConfig.plugins.push(plugin);
}

ضبط الروابط

في تطبيقات متعددة الصفحات، نأمل في الوصول إلى localhost:8080/a وليس localhost:8080/a.html.

بما أن webpack-dev-server يقوم بتعبئة الملفات فقط في ذاكرة الواقع، لا يمكنك استخدام sendfile('output/views/a.html') في express مباشرة، لأن هذا الملف لا يزال غير موجود. ولكن webpack يقدم outputFileStream، مما يتيح لك إخراج الملفات من ذاكرة الواقع، ويمكننا استخدام ذلك كرابط.

للاشارة، من أجل تخصيص الروابط، قد تحتاج إلى استيراد مكتبة express أو koa، ثم معالجة webpack-dev-server كمتوسط.

// dev-server.js
var express = require('express')
var webpack = require('webpack')
var webpackConfig = require('./webpack.config')
var app = express();
// compiler webpack
var compiler = webpack(webpackConfig);
// middleware webpack-dev-server
var devMiddleware = require('webpack-dev-middleware')(compiler, {
  publicPath: webpackConfig.output.publicPath,
  stats: {
    colors: true,
    chunks: false
  }
});
app.use(devMiddleware)
// رابط
app.get('/:viewname?', function(req, res, next) {
  var viewname = req.params.viewname 
    ? req.params.viewname + '.html' 
    : 'index.html';
  var filepath = path.join(compiler.outputPath, viewname);
  // استخدام outputFileSystem المقدم من webpack
  compiler.outputFileSystem.readFile(filepath, function(err, result) {
    if (err) {
      // something error
      return next(err);
    }
    res.set('content-type', 'text/html');
    res.send(result);
    res.end();
  });
});
module.exports = app.listen(8080, function(err) {
  if (err) {
    // do something
    return;
  }
  console.log('Listening at http://localhost:' + port + '\n')
}

في النهاية، قم بتعريف الأمر التشغيلي في package.json:

// package.json
{
  scripts: {
    "dev": "node ./dev-server.js"  
  }
}

أحاول npm run dev، ثم زيارة localhost:8080/ على جميع الصفحات في المتصفح، يجب أن تتمكن من رؤية النتيجة التي تريدها.

هذا هو نهاية محتوى هذا المقال، نأمل أن يكون قد ساعدكم في التعلم، ونأمل أيضًا أن تدعموا تعليمات النهضة.

بيان: محتوى هذا المقال تم جمعه من الإنترنت، ويحق للمالك الأصلي الحصول عليه، تم جمع المحتوى من قبل المستخدمين على الإنترنت وتم تحميله بشكل تلقائي، ويحق لهذا الموقع أن لا يمتلك الحقوق، وأن لا يتم تعديل المحتوى بشكل يدوي، ولا يتحمل الموقع أي مسؤولية قانونية. إذا كنت قد وجدت محتوى يشتبه في حقوق النسخ، فلا تتردد في إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال # بـ @) لإبلاغنا، وقدم الدليل على ذلك، إذا تم التحقق من ذلك، سيتم حذف المحتوى المشبوه فورًا.