tris webpack boilerplate
1.0.0
Sayangnya, saya tidak punya waktu/antusiasme untuk mempertahankan proyek ini sekarang. Saya sarankan untuk melakukan forking pada proyek ini, atau membaca sumbernya untuk mempelajari cara pembuatannya.
Boilerplate webpack ini ditujukan untuk pengembang pemula, menengah, dan lanjutan yang ingin membuat situs web statis dengan cepat sambil mencapai semua pengoptimalan yang tepat untuk mendapatkan skor sempurna di Google Page Speed Insights dan Google Lighthouse Reports — Ini adalah evolusi dari tris-gulp-boilerplate, sekarang dengan Webpack 4. Webpack adalah standar baru untuk bundling JS yang tidak mampu dilakukan oleh Gulp. Untungnya Webpack dapat menjalankan tugas dan menggabungkan js?
Tujuan dari proyek/boilerplate ini adalah untuk menjangkau orang-orang berikut:
Para pemula ? — yang meskipun menggunakan Gulp/Webpack/Node/Npm masih memerlukan penjelasan yang lebih menyeluruh dibandingkan pengembang yang lebih familiar. Mereka ingin segala sesuatunya berhasil, namun mereka juga ingin mengetahui bagaimana dan mengapa hal tersebut terjadi .
Para penipu proyek sampingan ?♀️ — mereka yang memiliki semua ide hebat tetapi tidak ingin membuang waktu untuk menyiapkannya. Mereka perlu mengeluarkan ide, aplikasi, dan situs web mereka ke dalam browser... dengan cepat .
Obsesif kompulsif ♂️ — orang yang senang mendapatkan skor sempurna dalam laporan kinerja dan pengoptimalan. Orang-orang yang terorganisir secara digital dan bangga mengetahui bahwa semua file mereka telah diperkecil, dikompresi, di-zip, dan siap dikirim!
Jangan ragu untuk membagi repo ini dan membuat alur kerja Anda sendiri berdasarkan template ini! Setiap orang sedikit berbeda, saya mengerti.
Anda memerlukan git dan node.js di komputer Anda sebelum menjalankannya.
git clone https://github.com/tr1s/tris-webpack-boilerplate.git your-project-name
cd your-project-name && rm -rf .git
npm install
npm start
Anda sudah siap, mulai coding ?? !
Hapus semua yang ada di folder src/styles/ , src/index.html dan src/index.scss/ jika Anda ingin memulai 100% baru dan/atau membuat alur kerja Sass Anda sendiri. Saya mendasarkan struktur folder saya pada pola 7-1.
npm run build ketika Anda siap mengunggah situs Anda ke platform FTP/hosting pilihan Anda. Ini akan membuat folder dist dengan semua aset situs web Anda dioptimalkan dan dikompresi.
Jika Anda ingin penjelasan mendalam tentang cara kerja semuanya, silakan baca tentang fitur-fitur di bawah ini. Jika tidak, lanjutkan coding dan bersenang-senang :)
tris-webpack-boilerplate
Penggunaan
Fitur / Isi
Fitur Dijelaskan
Pemisahan Konfigurasi Webpack
Server Pengembangan Webpack
Aset dan minifikasi HTML
404 halaman tidak ditemukan
SCSS ke CSS + optimasi
Transpilasi ES6
Daftar browser
Aset gambar + kompresi
Pemuatan font + pramuat
Kompresi aset
Bersihkan Plugin Webpack
Peta Sumber
generasi favicon
Offline dulu dan caching
Aplikasi Web Progresif (PWA)
milik Gotcha
Berkontribusi
Daripada memiliki satu webpack.config.js yang besar, kami akan membagi produksi dan pengembangan menjadi dua konfigurasi baru yang disebut webpack.dev.js dan webpack.prod.js . Konfigurasi yang kita inginkan pada pengembangan dan produksi akan ada di konfigurasi webpack.common.js .
Saat kita menjalankan npm start , ia akan menjalankan build pengembangan berdasarkan konfigurasi webpack.dev.js yang juga memiliki konfigurasi gabungan webpack.common.js . Baca selengkapnya tentang ini di dokumentasi Webpack.
/* wenpack.dev.js */const merge = require("webpack-merge");const common = require("./webpack.common.js");/* menggabungkan webpack.common.js lalu Anda menambahkan tambahan Anda */module.exports = merge(common, {
mode: "pengembangan",
/* kode lainnya ada di sini */}); Saat kita menjalankan npm run build , ia akan menjalankan build produksi berdasarkan konfigurasi webpack.prod.js yang juga memiliki konfigurasi gabungan webpack.common.js .
/* webpack.prod.js */const merge = require("webpack-merge");const common = require("./webpack.common.js");/* menggabungkan webpack.common.js lalu Anda menambahkan tambahan Anda */module.exports = merge(common, {
mode: "produksi",}); Kami ingin pengembangan dan produksi kami menghasilkan hasil yang sama secara visual di browser. Anda tidak ingin menyelesaikan pengkodean, menjalankan pembangunan, dan kemudian memiliki situs web yang sama sekali berbeda dengan gambar yang hilang misalnya. Itu sebabnya kami memiliki webpack.common.js untuk menangani semua loader dan manajemen aset. webpack.dev.js akan sedikit berbeda dengan peta sumber yang lebih ringan. Terakhir, webpack.prod.js akan menangani semua tahap akhir pembuatan situs web Anda. Yaitu kompresi gambar, kompresi aset (gzip), minifikasi aset, pembuatan favicon, caching, dan pembuatan pengalaman offline.
Saya akan membahas setiap proses di bawah ini.
Server webpack-dev dikonfigurasi di package.json. npm start akan menjalankan server dan membuka proyek Anda di browser menggunakan konfigurasi webpack.dev.js . npm start adalah skrip default npm, jadi Anda tidak perlu menambahkan run ke dalamnya. Namun untuk skrip build Anda perlu mengetikkan npm run build .
"skrip": { "mulai": "webpack-dev-server --open --config webpack.dev.js", "build": "webpack --config webpack.prod.js"}, Kami menggunakan html-loader untuk mengekspor HTML sebagai string dan memperkecil hasilnya. Ini memungkinkan Anda mengimpor src/index.html ke dalam src/index.js Anda. Kita cukup memperkecil HTML dengan opsi pemuat minimize: true , jadi inilah alasan kita membiarkannya di webpack.common.js alih-alih memindahkannya ke webpack.prod.js .
/* webpack.common.js */{
tes: /.html$/,
gunakan: [{loader: 'html-loader',pilihan: { minimalkan: true}
}]},/* src/index.js */import "./index.html";
Kami kemudian menggunakan html-webpack-plugin untuk membuat index.html baru yang dihasilkan dengan semua impor aset yang benar.
Opsi template: adalah tempat Anda mengambil HTML sumber Anda. Anda dapat menggunakan templat html, templat setang, atau templat lainnya milik Anda sendiri.
Opsi inject: adalah kemana aset Anda akan pergi. Webpack akan meletakkan skrip webpack-bundle.js yang Anda bundel di bagian bawah badan secara default, tetapi di sini saya mengalihkannya ke head karena kita akan menggunakan skrip-ext-html-webpack-plugin untuk menambahkan atribut defer ke skrip dan letakkan di kepala situs web. Ini membantu kinerja.
/* webpack.common.js */const HtmlWebpackPlugin = memerlukan('html-webpack-plugin');const ScriptExtHtmlWebpackPlugin = memerlukan("script-ext-html-webpack-plugin");plugin: [
new HtmlWebpackPlugin({title: 'tris-webpack-boilerplate',namafile: 'index.html',template: './src/index.html',inject: 'head'
}),
new HtmlWebpackPlugin({title: 'tris-404-page',namafile: '404.html',template: './src/404.html',inject: 'head'
}),
ScriptExtHtmlWebpackPlugin baru({defaultAttribute: 'tunda'
}),], Terus tambahkan lebih banyak plugin new HtmlWebpackPlugin({}) jika Anda ingin memiliki situs web multihalaman. Beri nama halaman tersebut sesuai dengan title: kunci.
Netlify adalah layanan gratis luar biasa yang memungkinkan Anda mengelola dan menyebarkan situs web Anda. Netlify secara otomatis mencari 404.html dan akan memuat halaman tersebut ketika seseorang mencoba membuka tautan rusak di situs web Anda. Jadi tidak ada yang perlu Anda khawatirkan.
Jika Anda menggunakan layanan lain, lakukan riset tentang bagaimana Anda dapat menautkan laman 404.html Anda agar aktif. Ini cara yang bagus untuk mengirim orang kembali ke halaman utama Anda jika mereka membuka tautan yang rusak.
Untuk menggunakan Sass/SCSS, kita perlu menggunakan beberapa loader untuk mendapatkan hasil yang kita inginkan. Pemuat css, pemuat postcss, dan pemuat sass.
test: menggunakan regex (ekspresi reguler) untuk memeriksa file sass, scss, atau css dan kemudian menjalankannya melalui tiga pemuat ini, yang membungkus mini-css-extract-plugin, yang kemudian menghasilkan satu file CSS untuk Anda untuk digunakan dalam produksi.
Baca lebih lanjut tentang konsep loader.
/* webpack.common.js */{
pengujian: /.(sa|sc|c)ss$/,
gunakan: [MiniCssExtractPlugin.loader,{ loader: 'css-loader', opsi: {sourceMap: true }},{ loader: 'postcss-loader', opsi: {sourceMap: true }},{ loader: 'sass-loader ', opsi: {sourceMap: true }}
]}, Bagian kedua dari urutan loader, postcss-loader , di situlah Anda akan mengecilkan dan mengawali css Anda secara otomatis. Untuk melakukan ini kita membuat postcss.config.js di root proyek dan mengkonfigurasinya seperti ini...
/* postcss.config.js */const purgecss = memerlukan("@fullhuman/postcss-purgecss");module.exports = {
plugin: [memerlukan("autoprefixer"),memerlukan("cssnano")({ preset: "default",}),purgecss({ konten: ["./**/*.html"], keyframes: true,} ),
],};Baca tentang autoprefixer dan cssnano untuk mengonfigurasinya sesuai keinginan Anda jika perlu. Baca juga tentang postcss secara umum karena ini adalah alat yang sangat ampuh untuk dimiliki di gudang senjata Anda.
Purgecss adalah plugin postcss yang fantastis untuk membuang css yang tidak digunakan dalam kode Anda. Purgecss menganalisis konten dan file css Anda. Kemudian mencocokkan pemilih yang digunakan dalam file Anda dengan yang ada di file konten Anda. Ini menghapus pemilih yang tidak digunakan dari css Anda, menghasilkan file css yang lebih kecil.
Ini siap digunakan secara default, tetapi jika Anda ingin mengujinya sendiri secara visual, batalkan komentar @import "../node_modules/bulma/bulma"; di index.scss , lalu jalankan npm run build dan lihat hasil webpack-bundle.css di folder dist Anda. Anda akan melihat tidak banyak kode. Kemudian hapus purgecss dari postcss.config.js Anda dan jalankan npm run build lagi, Anda akan melihat ada 10.000+ baris kode di css Anda yang berasal dari kerangka Bulma. Seperti yang Anda lihat, purgecss sangat cocok untuk menghilangkan CSS yang tidak Anda gunakan saat menggunakan kerangka kerja besar seperti Bootstrap, Foundation, Bulma, dll!
Mini-css-extract-plugin adalah langkah terakhir saat mengekstrak CSS dan memberinya nama sebelum dikeluarkan.
/* webpack.common.js */const MiniCssExtractPlugin = memerlukan("mini-css-extract-plugin");plugin: [
MiniCssExtractPlugin baru({namafile: 'webpack-bundle.css',chunkFilename: '[id].css'
})], Jadi pada dasarnya... css-loader akan mengumpulkan CSS dari semua file css yang direferensikan dalam aplikasi Anda dan memasukkannya ke dalam sebuah string. Kemudian postcss-loader melakukan prefiks otomatis dan mengecilkan gaya Anda, lalu sass-loader mengubahnya menjadi modul JS, lalu mini-css-extract-plugin mengekstrak CSS dari modul JS menjadi satu file CSS untuk diurai oleh browser web.
Anda mungkin ingin menggunakan fitur dan sintaksis JavaScript terbaru, namun belum semua browser mendukungnya. Babel akan menanganinya untuk kita.
Di sini kami menguji semua file js tetapi tidak termasuk folder node_modules , lalu menjalankannya melalui babel-loader dengan preset babel-preset-env.
/* webpack.common.js */{
tes: /.js$/,
kecualikan: /(node_modules)/,
gunakan: {loader: 'babel-loader',pilihan: { preset: ['@babel/preset-env']}
}} Kali ini kita menjelajah ke file webpack.prod.js . Saat kita npm run build , output js kita akan diperkecil dan memiliki peta sumber lengkap. Berjalan dalam mode dev melalui npm start kita masih memiliki peta sumber yang lebih ringan tetapi js tidak akan diperkecil.
/* webpack.prod.js */const TerserPlugin = require("terser-webpack-plugin");module.exports = merge(umum, {
mode: "produksi",
devtool: "peta sumber",
pengoptimalan: {minimizer: [ new TerserPlugin({test: /.js(?.*)?$/i,parallel: true,sourceMap: true, }),],
},});Baca selengkapnya tentang opsi di dokumentasi terser.
Di sini kami ingin memiliki satu tempat di mana kami dapat memberi tahu alat tertentu browser apa yang ingin kami tambahkan dukungannya. Kami mencapai ini menggunakan browserslist, dan file .browserslistrc yang sesuai di root proyek. Autoprefixer dan babel-present-env akan mengambil file ini dan menerapkan apa yang diperlukan berdasarkan konfigurasi.
Baca tentang apa lagi yang dapat Anda masukkan ke .browserslistrc dan gunakan browserl.ist untuk melihat browser apa yang secara spesifik akan ditargetkan dengan konfigurasi Anda. Oke, saya rasa saya sudah cukup sering mengatakan browser sekarang?.
/* .browserslistrc */> 0,25%tidak mati
Pertama kita menguji jpeg, jpg, png, gif, dan svg menggunakan regex (ekspresi reguler), kemudian kita menggunakan file-loader, yang menyelesaikan impor dan memerlukan file ke dalam url kemudian memancarkan file ke direktori output. Jadi, jika Anda menggunakan elemen <img> yang mengambil file dari folder src/images , file tersebut akan diimpor dan dikeluarkan ke jalur keluaran yang ditentukan images . Yang akhirnya menjadi src/images jika Anda npm start (menjalankan dev), atau npm run build (menjalankan build).
/* webpack.common.js */{
pengujian: /.(jpe?g|png|gif|svg)$/,
gunakan: [{loader: 'file-loader',options: { name: '[name].[ext]', outputPath: 'images/', publicPath: 'images/'},
}]}, Sekarang kami hanya ingin mengoptimalkan gambar kami di npm run build , jadi kami mengedit webpack.prod.js seperti di bawah ini.
Sekali lagi kami menguji jpeg, jpg, png, gif, dan svg menggunakan regex, dan menerapkan optimasi yang sesuai. gifsicle adalah kompresor gif lossless, pngquant adalah kompresor png lossy, dan kita dapat menambahkan plugin tambahan bernama imageminMozjpeg untuk melakukan kompresi jpg/jpeg lossy. Taruhan yang aman adalah mengatur kualitas antara 75-90 dan Anda akan mendapatkan kompresi yang layak tanpa kehilangan kualitas yang terlihat.
Saya sarankan untuk tetap menggunakan kompresi lossless, dan memotong gambar Anda ke ukuran yang tepat sebelum menambahkannya ke proyek Anda. Hapus saja bagian kunci imageminMozjpeg dan pngquant untuk melakukannya.
Anda juga dapat menggunakan tinypng untuk kompresi gambar.
/* webpack.prod.js */const ImageminPlugin = memerlukan("imagemin-webpack-plugin").default;const imageminMozjpeg = memerlukan("imagemin-mozjpeg");plugin: [
new ImageminPlugin({test: /.(jpe?g|png|gif|svg)$/i,gifsicle: { // optimasi kompresor gif losslessLevel: 9,},pngquant: { // kompresor png lossy, hapus untuk lossless default kualitas: "75",},plugin: [ imageminMozjpeg({// kompresor jpg lossy, hapus untuk kualitas lossless default: "75", }),],
}),];Di sini kami menguji semua ekstensi font umum dan menggunakan pemuat file lagi untuk menyelesaikan impor font dan mengeluarkannya.
/* webpack.common.js */{
tes: /.(woff|woff2|ttf|otf)$/,
gunakan: [{loader: 'file-loader',pilihan: { nama: '[nama].[ext]', outputPath: 'fonts/', publicPath: 'fonts/'},
}]}, Di src/styles/base/_typography.scss kami memuat font melalui aturan @font-face . Google Webfonts Helper juga merupakan alat luar biasa untuk menghosting Google Font sendiri tanpa repot. Baca lebih lanjut tentang aturan @font-face pada trik CSS. Selain itu, baca juga properti font-display.
Itu selalu merupakan praktik terbaik untuk memuat font Anda terlebih dahulu. Kami akan mencapainya dengan menggunakan plugin preload-webpack, dan Anda harus meletakkannya tepat setelah HtmlWebpackPlugin agar dapat berfungsi dengan baik.
/* webpack.common.js */baru PreloadWebpackPlugin({
rel: 'pramuat',
sebagai(entri) {if (/.(woff|woff2|ttf|otf)$/.test(entry)) mengembalikan 'font';
},
fileDaftar Putih: [/.(woff|woff2|ttf|otf)$/],
termasuk: 'semuaAset'}), Di sini kita kembali ke konfigurasi webpack.prod.js menggunakan plugin kompresi-webpack untuk mengompresi file html, css, dan javascript saja . Hal ini untuk menghindari kompresi file peta sumber yang dihasilkan.
/* webpack.prod.js */module.exports = penggabungan(umum, {
mode: 'produksi',
plugins: [new CompressionPlugin({ test: /.(html|css|js)(?.*)?$/i // hanya mengompresi html/css/js, melewatkan mengompresi peta sumber, dll}),}); Clean-webpack-plugin hanyalah plugin webpack sederhana untuk menghapus/membersihkan folder build Anda sebelum membuat yang baru. Perhatikan tampilan folder Anda saat menjalankan npm run build atau npm start . Folder dist Anda saat ini (jika sebelumnya Anda sudah membuatnya) akan dihapus dan yang baru akan segera muncul setelahnya.
/* webpack.common.js */const CleanWebpackPlugin = require("clean-webpack-plugin");plugins: [New CleanWebpackPlugin(["dist"])];Menggunakan peta sumber sangat penting untuk men-debug kode Anda di alat pengembang.
Seperti yang Anda lihat ketika Anda npm start dan membuka devtools di Chrome lalu klik konsol, Anda akan melihat bahwa ada dua console.logs yang berasal dari script.js baris 1 dan 2. Kita dapat dengan mudah melihat ini di struktur folder kita di src/scripts/script.js . Jika kami tidak menggunakan peta sumber maka devtools akan menunjukkan kepada kami bahwa console.logs ini berasal dari webpack-bundle.js yang kami paketkan, yang tidak terlalu membantu.
Kasus serupa dengan gaya kami. Jika Anda melihat elemen body di devtools, Anda akan melihat beberapa gaya diterapkan dari file _global.scss kami, dan beberapa dari file _typography.scss kami, yang keduanya terletak di folder src/styles/base/ kami. Kami tidak akan dapat mengetahui hal ini jika kami mengabaikan peta sumber. Itu hanya akan menunjukkan kepada kita gaya yang berasal dari paket webpack-bundle.css kita.
/* webpack.dev.js */module.exports = penggabungan(umum, {
mode: "pengembangan",
devtool: "peta-sumber-sebaris",}); /* webpack.prod.js */module.exports = penggabungan(umum, {
mode: "produksi",
devtool: "peta sumber",});Baca selengkapnya tentang berbagai jenis peta sumber untuk menemukan yang terbaik untuk proyek Anda. Baca juga opsi devtool di dokumen webpack.
Ini adalah plugin hebat yang menghasilkan setiap ikon yang Anda perlukan berdasarkan satu sumber gambar. Di folder src/images/ saya memiliki tris-package.svg yang saya masukkan ke dalam favicons-webpack-plugin.
Ini akan menghasilkan ikon untuk apple, android, chrome, firefox, twitter, windows, apa saja. Ini akan menghasilkan setiap ikon dalam berbagai ukuran dan mengimpornya langsung ke kepala situs web Anda di tempatnya. Twitter dan windows disetel ke false tetapi default, jadi saya mengubahnya menjadi true hanya untuk mencakup semua basis untuk berjaga-jaga.
Catatan: ini secara signifikan meningkatkan waktu pembuatan. Hal ini dapat dimengerti mengingat seberapa besar kinerjanya dan berapa banyak waktu yang dihematnya dalam jangka panjang. Jangan kaget jika npm run build Anda membutuhkan waktu 20 detik lebih lama dari biasanya.
/* webpack.prod.js */const FaviconsWebpackPlugin = memerlukan("favicons-webpack-plugin");module.exports = merge(umum, {
mode: "produksi",
plugin: [FaviconsWebpackPlugin baru({ logo: "./src/images/favicon.svg", ikon: {twitter: true,windows: true, },}),
],});Di sini kami menggunakan plugin plugin offline untuk menyimpan semua aset kami dalam cache saat memuat halaman.
Plugin ini dimaksudkan untuk memberikan pengalaman offline untuk proyek webpack . Ia menggunakan ServiceWorker , dan AppCache sebagai cadangan. Kami cukup menyertakan plugin ini di webpack.prod.js kami, dan runtime yang menyertainya di skrip klien kami (src/index.js), dan proyek kami akan siap offline dengan menyimpan semua (atau beberapa) aset keluaran webpack dalam cache.
Catatan: Jika Anda npm run build dan mengunggah perubahan ke server Anda (atau bagaimana pun Anda terus memperbarui situs web), situs web Anda harus sudah ditutup dan dibuka kembali sebelum Anda melihat perubahannya. Anda tidak dapat membukanya dan terus menyegarkan, Anda harus menutup tab dan membukanya kembali agar cache rusak.
/* webpack.prod.js */const OfflinePlugin = require("offline-plugin");module.exports = merge(common, {
mode: "produksi",
plugin: [OfflinePlugin baru()],});Aplikasi web progresif (PWA) adalah aplikasi web yang dimuat seperti halaman web atau situs web biasa tetapi dapat menawarkan fungsionalitas kepada pengguna seperti bekerja offline, pemberitahuan push, dan akses perangkat keras perangkat yang biasanya hanya tersedia untuk aplikasi asli. PWA menggabungkan fleksibilitas web dengan pengalaman aplikasi asli.
Langkah terakhir untuk menjadikan boilerplate ini sebagai PWA adalah menambahkan Manifes Aplikasi Web wajib ke root proyek Anda dan mengonfigurasinya dengan tepat!
Webpack mengalami masalah saat mencoba menggabungkan perpustakaan besar seperti jQuery. Anda akan mendapatkan kesalahan konsol seperti $ is not defined atau jQuery is not defined . Untuk mengatasi hal ini kami membiarkan Webpack memperlakukannya sebagai eksternal. Kami kemudian mendefinisikan variabel dan memasukkan jQuery melalui CDN. Kebanyakan orang memiliki cache jQuery di browser mereka sehingga ini tidak akan menjadi masalah dalam hal kinerja. Saya telah menambahkan konfigurasi externals: secara default, tetapi Anda harus menambahkan cdn jQuery sendiri jika Anda berencana untuk menggunakannya.
Baca selengkapnya tentang eksternal di dokumentasi Webpack.
/* webpack.common.js */plugins: [],eksternal: {
$: 'jquery',
jquery: 'jQuery',
'jendela.$': 'jquery',}/* src/index.html */<kepala> <scriptdefersrc="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" ></script></head>
Saya mencoba sebaik mungkin untuk menjelaskan semuanya secara menyeluruh, tetapi jika ada sesuatu yang dapat dijelaskan dengan lebih jelas, silakan kirimkan permintaan penarikan dengan beberapa saran pengeditan. Terima kasih!
Semoga ini bisa membantu! Ikuti saya di twitter jika Anda menyukainya. ?
