Cara menggunakan PHP dan webpack untuk pembangunan modular

Dengan pembangunan berterusan teknologi pembangunan web, pemisahan bahagian hadapan dan belakang serta pembangunan modular telah menjadi trend yang meluas. PHP ialah bahasa back-end yang biasa digunakan Apabila melakukan pembangunan modular, kita perlu menggunakan beberapa alat untuk mengurus dan membungkus modul adalah alat pembungkusan modular yang sangat mudah digunakan. Artikel ini akan memperkenalkan cara menggunakan PHP dan webpack untuk pembangunan modular.

1. Apakah pembangunan modular

Pembangunan modular merujuk kepada penguraian program kepada modul bebas yang berbeza Setiap modul mempunyai skop dan kebergantungan sendiri , dan kemudian bergabung menjadi program yang lengkap. Pemisahan ini bukan sahaja meningkatkan kebolehgunaan semula kod dan kebolehbacaan, tetapi juga menjadikan projek lebih mudah untuk diselenggara dan ditingkatkan.

2. Pemasangan dan konfigurasi webpack

Webpack ialah alat pembungkusan modul Node.js, yang boleh membungkus pelbagai jenis fail ke dalam satu atau lebih fail. Kami boleh memasang webpack melalui npm:

npm install webpack webpack-cli --save-dev

Selepas pemasangan selesai, kami perlu melakukan beberapa konfigurasi asas. Fail konfigurasi webpack dinamakan webpack.config.js, dan ia harus diletakkan dalam direktori akar projek. Berikut ialah fail konfigurasi webpack.config.js yang mudah:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

Fail konfigurasi di atas menentukan bahawa fail entri utama ialah src/index.js, dan fail output ialah dist/bundle.js, di mana kaedah laluan.resolve Digunakan untuk menyelesaikan laluan. Fail konfigurasi ini juga perlu menentukan cara mengendalikan pelbagai jenis fail, seperti fail CSS, fail imej, fail HTML, dsb. Fail ini perlu diproses oleh pemuat yang sepadan Anda boleh menentukan peraturan penggunaan pemuat melalui module.rules, sebagai contoh:

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /.(png|svg|jpg|gif)$/,
        use: ['file-loader']
      },
      {
        test: /.html$/,
        use: ['html-loader']
      }
    ]
  }
};

Kod di atas bermakna apabila webpack menemui fail yang berakhir dengan .css, ia akan menggunakan css dahulu -loader untuk menghuraikan fail CSS, dan kemudian menggunakan style-loader untuk menggunakan gaya CSS pada HTML. Apabila fail imej ditemui, gunakan pemuat fail untuk menukar fail imej kepada nama fail dan mengeluarkannya ke direktori dist. Apabila menemui fail yang berakhir dengan .html, gunakan html-loader untuk menghuraikan fail HTML.

3. Cara menggunakan webpack dalam PHP

Untuk menggunakan webpack dalam PHP, terdapat dua kaedah untuk dipilih. Yang pertama ialah membungkus semua kandungan Webpack dan memautkannya ke dalam fail PHP. Yang kedua ialah untuk mengintegrasikan aliran kerja Webpack ke dalam PHP untuk merealisasikan pembinaan automatik Webpack.

1. Pakej Webapck dan masukkan ke dalam fail PHP

Kaedah ini adalah yang paling mudah. Rujuk fail JavaScript dan CSS yang dibungkus dalam HTML, dan kemudian rujuk fail HTML melalui sertakan atau perlukan dalam PHP. Contohnya:

include 'dist/index.html';

Kelemahan kaedah ini ialah setiap kali anda mengubah suai fail JS atau CSS, anda perlu melaksanakan semula pembungkusan webpack dan menyalin fail dalam direktori dist ke direktori web PHP untuk melihat kesan kemas kini.

2. Sepadukan aliran kerja Webpack ke dalam PHP

Kaedah ini adalah untuk menyepadukan aliran kerja Webpack ke dalam PHP, supaya selepas mengubah suai fail JS atau CSS, ia akan secara automatik Pembungkusan dan output. Ini memerlukan bantuan beberapa pemalam atau perpustakaan, seperti webpack-dev-server, webpack-merge, dsb.

webpack-dev-server ialah pelayan pembangunan webpack yang menyediakan muat semula masa nyata. Ia melaksanakan pelayan pemultipleksan dan pelayan WebSocket berdasarkan Node.js dan Express, yang boleh memantau perubahan fail dan menyegarkan penyemak imbas dalam masa nyata.

webpack-merge ialah perpustakaan alat mudah untuk menggabungkan dan memilih konfigurasi. Apabila kita perlu berurusan dengan persekitaran yang berbeza (seperti persekitaran pembangunan dan persekitaran pengeluaran), menggunakan webpack-merge boleh menggabungkan konfigurasi yang berbeza dengan mudah.

Berikut ialah contoh fail webpack.config.js menggunakan webpack-dev-server dan webpack-merge, yang boleh mencapai pembungkusan dan output masa nyata:

const path = require('path');
const webpackMerge = require('webpack-merge');
const commonConfig = require('./webpack.common');

module.exports = webpackMerge(commonConfig, {
  mode: 'development',
  output: {
    filename: '[name].js'
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000
  }
});

Memulakan Webpack pelayan dalam PHP biasanya Laksanakan perintah permulaan webpack-dev-server melalui kaedah shell_exec atau exec. Contohnya:

shell_exec('webpack-dev-server --mode development --port 9000');

Pelayan Socket.io dengan port 9000 dan mod pembangunan dimulakan di sini.

4. Ringkasan

Artikel ini memperkenalkan cara menggunakan PHP dan webpack untuk pembangunan modular. Dengan menggunakan webpack, kami boleh mengurus modul kami dengan lebih mudah dan meningkatkan kebolehgunaan semula dan kebolehselenggaraan kod. Pada masa yang sama, kami juga boleh menyepadukan PHP dan webpack untuk merealisasikan pembungkusan dan output automatik, dengan itu memudahkan lagi proses pembangunan kami.

Atas ialah kandungan terperinci Cara menggunakan PHP dan webpack untuk pembangunan modular. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!