Menggunakan webpack dengan yang ada PHP dan JS proyek

Pertama, untuk menjawab pertanyaan-pertanyaan kecil:

• Tidak, kau're tidak seharusnya untuk menjalankan aplikasi PHP anda melalui webpack dev server. Dijelaskan dalam Live Reload bagian di bawah ini.

• Tidak, anda tidak't harus menulis ulang aset-aset anda. Mungkin. Melihat CSS dan Kasus Tepi bagian di bawah ini.

  Disclaimer: I'll hanya mengambil sebagian kecil dari pertanyaan anda. Ruang lingkup yang terlalu luas untuk dikemas menjadi salah satu StackOverflow menjawab. Aku hanya akan berhubungan dengan

• menyiapkan pembangunan dan lingkungan produksi untuk webpack
• bundling pertama anda JavaScript yang harus memberikan dasar untuk membangun. I'll juga menyebutkan beberapa hal yang anda mungkin ingin menambahkan dan link sesuai sumber daya untuk membaca. Jadi, let's pergi.

  Persyaratan

  Saya asumsikan anda telah Node.js dan npm diinstal pada mesin anda, dan kira-kira tahu bagaimana menggunakannya. Saya juga berasumsi bahwa anda memiliki webpack dan webpack-cli dipasang sebagai (dev) dependensi dari proyek anda (bukan hanya secara global):

npm install --save-dev webpack webpack-cli

Update: versi Sebelumnya dari jawaban ini tidak memerlukan instalasi webpack-cli. Sebagai versi 4 (februari 2018), webpack's CLI berada dalam paket sendiri, oleh karena itu diperlukan tambahan paket.

Mengatur pengembangan dan produksi alur kerja

Anda biasanya ingin melakukan hal yang berbeda dalam pengembangan produksi (minifying di produksi, live-reload dalam pembangunan, ...) Untuk mencapai itu, kita'll ingin berpisah file konfigurasi kita.

Mempersiapkan struktur direktori

Let's setuju untuk mengabaikan webpack config dari pertanyaan anda. Kami'll mulai dari awal, kita'd harus mengubah hampir segala sesuatu pula. Pertama, membuat membangun di dalam folder proyek anda root. Membangun-terkait hal-hal yang akan pergi ke sana, karena kami don't ingin mencemari proyek anda's root folder dengan file config. (Anda're bebas untuk nama folder ini berbeda, tetapi melacak bahwa selama tutorial ini.) Membuat config.base.js, a config.production.js dan config.development.js file dalam folder itu. Besar, kita memiliki file konfigurasi untuk membangun dua rantai sekarang. Konfigurasi yang masih kosong, jadi let's sekarang mengisinya dengan beberapa logika dasar.

Install webpack-merge

Tapi pertama-tama, kita'll perlu menginstal webpack-gabung.

npm install --save-dev webpack-merge

Paket ini memungkinkan kita untuk dengan dalam menggabungkan beberapa webpack konfigurasi. Kita ingin menggunakannya untuk membuat webpack konfigurasi tergantung pada lingkungan kami saat ini.

Mengatur konfigurasi anda

Sekarang menyesuaikan build/config.base.js:

module.exports = {
  // We'll place webpack configuration for all environments here
}

File tidak jelas hanya mengekspor objek kosong sekarang, tapi kami'll perlu bahwa untuk langkah-langkah berikut. Letakkan kode ini di anda build/config.production.js:

const merge = require('webpack-merge')

module.exports = merge(require('./config.base.js'), {
  mode: 'production'

  // We'll place webpack configuration for production environment here
})

Dan hampir sama dengan kode yang masuk ke anda build/config.development.js:

const merge = require('webpack-merge')

module.exports = merge(require('./config.base.js'), {
  mode: 'development',
  watch: true

  // All webpack configuration for development environment will go here
})

Saya kira itu's cukup intuitif ini: Menggunakan webpack dengan config.development.js konfigurasi akan mengambil konfigurasi umum dan menggabungkan sendiri config deklarasi di.

Update: modus pilihan di atas config file yang ditambahkan dalam webpack 4 (dirilis februari 2018). Set sekelompok masuk akal default untuk pengembangan dan produksi bundel. Sekarang menjalankan proses akan terlihat seperti ini dari baris perintah:

npx webpack --config build/config.development.js

# If the above doesn't work, you probably have an older version of npm (< 5.1) installed
# While npx is a really great tool, you can of course still call the path of the webpack executable manually:

node_modules/.bin/webpack --config build/config.development.js

...and vice versa for the produksi lingkungan. Perintah itu agak kikuk untuk menggunakan, tapi jangan khawatir, kami'll alamat nanti.

Membuat beberapa file helper

Ada informasi yang kami'll ingin memusatkan untuk membuat mereka dengan mudah dapat ditukar. Path File yang seperti itu. Jadi let's ekstrak mereka. Membuat paths.js dalam membangun folder dan telah mengekspor beberapa jalan kita'll ingin digunakan kemudian:

const path = require('path')

// I'm really just guessing your project's folder structure from reading your question,
// you might want to adjust this whole section
module.exports = {
  // The base path of your source files, especially of your index.js
  SRC: path.resolve(__dirname, '..', 'public'),

  // The path to put the generated bundle(s)
  DIST: path.resolve(__dirname, '..', 'public', 'dist'),

  /*
  This is your public path.
  If you're running your app at http://example.com and I got your DIST folder right,
  it'll simply be "/dist".
  But if you're running it locally at http://localhost/my/app, it will be "/my/app/dist".

  That means you should probably *not* hardcode that path here but write it to a
  machine-related config file. (If you don't already have something like that,
  google for "dotenv" or something similar.)
  */
  ASSETS: '/dist'
}

Buat alias

Seperti disebutkan di atas, kita bisa menjalankan secara teknis kami membangun jaringan dalam pembangunan modus seperti ini:

npx webpack --config build/config.development.js

Yang's tidak nyaman verbose perintah, jadi let's perubahan itu. It's cara yang lebih nyaman untuk menjalankan proses membangun melalui npm script. Tambahkan salah satu script per lingkungan untuk anda paket.json seperti ini:

{
  "scripts": {
    "dev": "webpack --config build/config.development.js",
    "prod": "webpack --config build/config.production.js"
  }
}

Sekarang anda dapat menjalankan anda membangun rantai dengan npm menjalankan dev resp. npm menjalankan prod – yang jauh lebih mudah untuk menghafal dan lebih cepat untuk mengetik. ...begitu ada'es apa-apa untuk membangun, tentu saja.

Bundel JavaScript

Oke, itu sebenarnya cukup banyak bekerja tanpa mencapai terlalu banyak sejauh ini. Jadi let's mulai dengan sesuatu yang lebih menarik: Kita'll menentukan JavaScript entry point.

Menentukan entry point

Masukan kode berikut ke dalam file build/config.base.js (mengganti kode yang ada seluruhnya):

const path = require('path')
const { SRC, DIST, ASSETS } = require('./paths')

module.exports = {
  entry: {
    scripts: path.resolve(SRC, 'js', 'index.js')
  },
  output: {
    // Put all the bundled stuff in your dist folder
    path: DIST,

    // Our single entry point from above will be named "scripts.js"
    filename: '[name].js',

    // The output path as seen from the domain we're visiting in the browser
    publicPath: ASSETS
  }
}

Buat file JavaScript

Konfigurasi di atas mengharapkan index.js tinggal di SRC/js folder (seperti yang didefinisikan dalam build/paths.js). Let's buat file dengan isi sebagai berikut:

import './jquery.min.js'
import './jquery.migrate.js'
import './jquery.bxslider.min.js'
import './jquery.appear.js'
import './jquery.countTo.js'
import './bootstrap.js'

Seperti yang anda lihat, index.js hanya impor semua file yang ingin anda gunakan. Jika anda sekarang jalankan

npm run prod

dari terminal anda, sebuah scripts.js file yang akan dibuat di DIST folder. Anda dapat menyertakan yang menjadi markup anda dengan plain ol' <script> tag. Selamat, anda've got a kerja webpack setup!

Menyelam lebih dalam

Ini mini-tutorial benar-benar hanya tergores permukaan dari apa yang dapat anda lakukan dengan webpack. Ini memberi anda cukup solid foundation untuk konfigurasi anda yang sekarang anda dapat mengisi dengan apa pun yang anda butuhkan. Dan itu akan benar-benar cukup banyak hal. I'll daftar beberapa hal anda mungkin ingin meningkatkan, dengan beberapa link untuk membaca.

webpack Konsep

Jika anda ingin menggunakan webpack, hal ini dapat sulit untuk melakukannya jika anda don't tahu tentang konsep dasar. Juho Vepsäläperancis dibuat sebuah panduan tentang cara memulai dengan webpack yang membantu saya banyak. Dia's juga webpack core kontributor sehingga anda dapat yakin dia tahu apa yang dia's berbicara tentang. Terutama loader adalah konsep anda'll benar-benar butuhkan ** untuk tahu. Banyak petunjuk pada daftar ini juga dijelaskan di sana. Baca lebih lanjut: SurviveJS – webpack tutorial

Kode Membelah

Itu tidak apa nama's mengatakan: Anda mungkin tidak ingin pack semua JavaScript anda ke dalam satu besar file output. It's pekerjaan webpack tidak bagi anda untuk memisahkan bagian-bagian dari bundel yang anda hanya perlu pada halaman tertentu dari aplikasi anda. Juga, tergantung pada seberapa sering anda're bekerja pada proyek anda's JavaScript, itu mungkin ide yang baik untuk memisahkan kode pihak ketiga dari bundel anda untuk tujuan caching. Baca lebih lanjut: webpack Dokumentasi – Kode Membelah

Caching

Anda mungkin ingin meningkatkan situs anda's caching perilaku dengan menambahkan hash untuk anda dibundel nama file yang tergantung pada konten mereka. Ini akan membuat (misalnya) a script.31aa1d3cad014475a618.js bukannya scripts.js. File yang kemudian dapat di-cache tanpa batas waktu karena begitu isinya berubah, nama file akan berubah juga. Kode PHP anda mungkin kemudian menggunakan webpack-nyata-plugin untuk mendapatkan akses ke nama file yang dihasilkan. Baca lebih lanjut:

• Berubah Caching cara untuk cache anda bundel selamanya
• webpack Dokumentasi – chunkhash pada cara untuk memanjakan anda bundel nama-nama file dengan hash
• webpack-nyata-plugin pada cara untuk menghasilkan terwujud.json yang berisi nama file anda saat ini bundel

  Transpiling

  Dalam kasus anda ingin menggunakan modern ES2015 kode di situs anda's JavaScript (dan menargetkan non-evergreen browser), anda'll ingin transpile mereka turun ke reguler ES5. (Jika istilah "ES2015" tidak masuk akal untuk anda, anda're kemungkinan besar tidak menggunakan itu dan dapat mengabaikan ayat ini.) Baca lebih lanjut: babel-loader – loader yang berjalan Babel pada script anda

  CSS

  Ada webpack loader untuk CSS. Dan Sass. Dan PostCSS. Apa pun yang anda butuhkan. Dan karena anda're mungkin tidak berencana untuk menyertakan CSS anda melalui <script> kategori, mengenal Ekstrak Teks Plugin untuk menghasilkan yang sebenarnya `.css file.

  Update: The Ekstrak Teks Plugin sangat mapan. Namun, hal's benar-benar semacam hack: Itu menghasilkan .css file meskipun webpack hanya tahu JavaScript sebagai bahasa target.

  Namun, hal ini tidak lagi benar karena dari webpack 4. Ada's sekarang sistem untuk menentukan sewenang-wenang jenis modul, termasuk CSS.

  cerita Panjang pendek: Mengharapkan asli CSS support di webpack untuk mengganti Ekstrak Teks Plugin beberapa waktu segera.

  Petunjuk: Jalan

  I'll menyebutkan ini karena ini adalah rasa sakit yang nyata point bagi saya sampai saya menyadari betapa webpack karya-karya berikut ini: Diketahui bahwa webpack akan mengenali anda url(...) pernyataan dan mencoba untuk menyelesaikan mereka relatif ke sumber file. Ini berarti, sumber file publik/css/main.css:

body {
  background: url('../img/bg.jpg');
}

jika anda output path publik/dist/css/bundel.css, akan diubah:

body {
  background: url('../../img/bg.jpg');
}

Baca lebih lanjut:

• gaya-loader dan css-loader – you'll tangan ke bawah kebutuhan mereka.
• ekstrak-teks-webpack-plugin

  Minifying

  Update: Sejak webpack 4 dirilis pada bulan februari tahun 2018, bagian ini agak usang. Pengaturan baru mode untuk "produksi" sekarang secara otomatis berlaku JavaScript minification. Ada Terser plugin untuk webpack untuk mengecilkan JavaScript anda. Minifying CSS adalah sebuah fitur yang sudah builtin untuk css-loader plugin yang disebutkan di atas. Baca lebih lanjut: Terser webpack Plugin

  Optimasi Gambar

  webpack adalah bundler, bukan tugas runner. Dengan demikian, optimasi gambar tidak asli webpack tugas. Anda'd mungkin akan lebih baik menggunakan yang sebenarnya task runner atau hanya mendefinisikan beberapa npm script untuk ini. Ini tidak berarti webpack tidak mampu melakukan hal ini. Ada plugin untuk segala sesuatu cukup banyak. Baca lebih lanjut:

• imagemin dapat mengecilkan gambar yang cukup baik pada sendiri.
• imagemin-webpack-plugin akan mengintegrasikan proses itu ke webpack membangun jaringan.

  Live Reload

  Masalah anda dengan live reload punya cukup sederhana penyebab: webpack dev server adalah hanya sederhana Node.js server hanya melayani file statis. Untuk anda're kasus, webpack-dev-server mungkin adalah alat yang salah sama sekali. Mencoba webpack-livereload-plugin bukan untuk hidup reloader bahwa anda hanya dapat memiliki melalui <script> tag. Baca lebih lanjut: webpack-livereload-plugin

  Sumber Peta

  Update: Sebagai webpack 4 (dirilis pada bulan februari 2018), sumber peta yang dihasilkan secara otomatis ketika baru mode opsi disetel ke "pengembangan". Dengan segala cara, menggunakan sumber peta. Mereka'll membuat anda bekerja dengan bundel jadi jauh lebih mudah anda'll ingin menangis. Baca lebih lanjut: webpack Dokumentasi Source Maps

  Kasus Tepi

  Biasanya, semua yang ada script anda'll proses dengan webpack harus berjalan baik-baik saja. Satu-satunya pengecualian yang datang ke pikiran saya sekarang akan mengenai global entitas. Terlihat pada kode berikut:

function myFunc () {
  console.log('I exist!')
}

Kode ini di dataran file JavaScript akan membuat myFunc yang tersedia di mana-mana di kode JS. Tapi sejak webpack bundel kode dibungkus dalam fungsi callback (dan dengan demikian meninggalkan lingkup global), tidak ada't akan ada akses ke fungsi itu lagi. Perpustakaan pihak ketiga seharusnya tidak menjadi masalah di sana, mereka biasanya menetapkan mereka globals untuk jendela objek secara langsung, tetapi jika anda've sudah tertulis kode JS dalam proyek anda, anda harus menyadari bahwa.

Mengotomatisasi!

Anda'll ingin mengotomatisasi banyak dari alur kerja anda sebagai mungkin. Pertimbangkan untuk menjalankan npm menjalankan prod melalui git hook sebelum mendorong / setelah menarik.

Semoga ini bisa membantu.

Berdasarkan ada vue-template dan dan jawaban dari @Loilo saya membuat vue template yang anda dapat menginstal dengan vue-cli. Template ini jumpstarts anda untuk melihat aplikasi anda dapat memperpanjang dengan atau mengintegrasikan dalam anda lingkungan yang ada.

npm install -g vue-cli
vue init delcon/webpack-simple my-project
cd my-project
npm install

devwatch:

Template ini memiliki tambahan menjalankan devwatch pilihan jam tangan untuk filechanges alih-alih menggunakan webpack-dev-server. Ini membuatnya dapat digunakan untuk apapun yang ada webserver lingkungan.

npm run devwatch

dev:

untuk menjalankan itu dengan default webpack-dev-server, hapus <script src="http://localhost:35729/livereload.js"></script> di index.html:

npm run dev

membangun:

untuk membangun proyek anda untuk produksi:

npm run build