Saya ada proyek PHP dengan jquery dan bootstrap, tidak menggunakan front-end framework.
Saya mencoba untuk menggunakan webpack modul bundler dalam rangka untuk membuat satu entry point untuk proyek sumber daya, mengelola js dependensi dengan node js package manager, menjalankan tugas sebagai minify js, css, image re-ukuran...dll. Dan meningkatkan browser loading waktu yang dibutuhkan untuk memuat satu halaman.
Saya datang di webpack tutorial dan harus instal dan menginstal dev-server, tapi masalahnya adalah bahwa saya tidak dapat memahami bagaimana aku akan mengkonversi semua saya saat ini script js dan css link di proyek (di mana saya memiliki banyak jquery dan CSS perpustakaan yang digunakan untuk menyediakan beberapa fitur dalam proyek) untuk menggunakan webpack.
Apakah saya harus menulis ulang semua saya JS dan CSS file dalam cara yang sesuai dengan webpack? Bagaimana cara melakukan migrasi sukses?
Selain itu, saya tidak dapat menjalankan saya saat ini aplikasi php pada webpack dev-server, itu dimaksudkan untuk berjalan di sana di tempat pertama? Hanya daftar direktori proyek sementara.
Saya telah menciptakan sebuah tes index.js
file dan digunakan berikut webpack konfigurasi:
var path = require('path');
var webpack = require('webpack');
module.exports =
{
entry: [
'./public/js/index.js',
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost:8080'
],
plugins: [
new webpack.HotModuleReplacementPlugin()
],
output: {
path: path.join(__dirname, "public/dist/js"),
publicPath : "http://localhost:8080/my_proj/public/dist/js",
filename: "bundle.js"
}
};
Saya menambahkan bundle.js
saya script beban hanya untuk pengujian sebagai berikut berharap bahwa aplikasi ini akan berjalan pada webpack dev-server:
<script type="text/javascript" src="public/dist/js/bundle.js"></script>
<script type="text/javascript" src="public/js/jquery.min.js"></script>
<script type="text/javascript" src="public/js/jquery.migrate.js"></script>
<script type="text/javascript" src="public/js/jquery.bxslider.min.js"></script>
<script type="text/javascript" src="public/js/jquery.appear.js"></script>
<script type="text/javascript" src="public/js/jquery.countTo.js"></script>
<script type="text/javascript" src="public/js/bootstrap.js"></script>
Harap membantu saya memahami konsep di sini dan bagaimana saya bisa membuat migrasi ini berhasil?
Pertama, untuk menjawab pertanyaan-pertanyaan kecil:
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
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.) Membuatconfig.base.js
, aconfig.production.js
danconfig.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.
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.
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'
}
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.
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.
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
}
}
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!
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.
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
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
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:
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 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
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 filepublik/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:
ekstrak-teks-webpack-plugin
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 untukcss-loader
plugin yang disebutkan di atas. Baca lebih lanjut: Terser webpack PluginOptimasi 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:
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
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 MapsKasus 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.
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