Clever Geek Handbook

Menyiapkan Webpack 5 dari awal





Pelajari cara menggunakan webpack untuk membuat JavaScript, gambar, font, dan gaya, serta cara menjalankan



server pengembangan. Jika Anda pernah menggunakan webpack 4 sebelumnya, berikut beberapa perbedaan dari versi 5:



  • perintah "webpack-dev-server" sekarang terlihat seperti "webpack-serve"
  • instalasi terpisah dari file-loader, raw-loader dan url-loader tidak lagi diperlukan, Anda dapat menggunakan modul aset bawaan
  • Node.js , , , stream, «stream-browserify» { stream: «stream-browserify» }


?



Sebagian besar, situs tidak lagi ditulis dalam HTML murni dengan sedikit JavaScript - seringkali hanya dibuat dengan JavaScript. Oleh karena itu, kode harus dibangun, diperkecil, dan ditranspilasi. Di sinilah webpack berguna.



Webpack adalah pembuat modul. Ini digunakan untuk mengemas kode untuk digunakan oleh browser. Ini memungkinkan Anda untuk memanfaatkan JavaScript terbaru dengan Babel, atau menggunakan TypeScript dan mengkompilasinya ke kode minifikasi lintas browser. Ini juga memungkinkan Anda untuk mengimpor sumber daya statis ke JavaScript.



Untuk pengembang, webpack juga menyediakan server pengembangan yang dapat memperbarui modul dan gaya dengan cepat saat file disimpan. Alat baris perintah seperti "vue create" dan "react-create-app" menggunakan webpack di belakang layar, tetapi Anda dapat dengan mudah membuat penyiapan webpack sendiri untuk kerangka kerja ini.



Webpack juga dapat melakukan banyak hal lain, tetapi artikel ini akan membahas dasar-dasar penyiapan dan penggunaannya.



Instalasi



Buat direktori proyek dan lakukan inisialisasi: 



mkdir webpack-tutorial
cd !$
// 
cd webpack-tutorial
yarn init -yp  //     "package.json"
// 
npm init -y


Instal webpack dan webpack-cli sebagai dependensi pengembangan: 



yarn add -D webpack webpack-cli
// 
npm i -D webpack webpack-cli




Buat direktori "src" untuk menyimpan file aplikasi. Saya akan mulai dengan membuat file "index.js" sederhana: 



console.log(" !")


Bagus, kami memiliki proyek Node.js dengan paket utama terinstal dan file "index.js". Mari mulai mengonfigurasi webpack.



Penyiapan dasar



Mari mulai mengonfigurasi kolektor. Buat file "webpack.config.js" di direktori root proyek.



Titik masuk


Pertama-tama, Anda perlu menentukan titik masuk aplikasi, mis. file apa yang akan dikompilasi webpack. Pada contoh di atas, kami mendefinisikan titik masuk sebagai "src / index.js": 



// webpack.config.js
const path = require('path')

module.exports = {
    entry: {
        main: path.resolve(__dirname, './src/index.js'),
    },
}


Titik keluar


Titik keluar adalah direktori tempat file yang dikompilasi oleh webpack ditempatkan. Setel titik keluar ke "dist". Awalan "[name]" cocok dengan nama file di src: 



// webpack.config.js
module.exports = {
    // ...

    output: {
        path: path.resolve(__dirname, './dist'),
        filename: '[name].bundle.js',
    },
}


Pengaturan minimal untuk membangun proyek sudah siap. Tambahkan skrip "build" ke file "package.json" yang menjalankan perintah "webpack": 



// package.json
"scripts": {
    "build": "webpack"
}


Luncurkan webpack: 



yarn build
// 
npm run build



asset main.bundle.js 19 bytes [emitted] [minimized] (name: main)
./src/index.js 18 bytes [built] [code generated]
webpack 5.1.0 compiled successfully in 152 mss


File "index.bundle.js" dibuat di direktori "dist". File tidak berubah, tetapi kami berhasil membangun proyek.



Plugin



Antarmuka plugin membuat webpack sangat fleksibel. Plugin digunakan baik oleh webpack itu sendiri maupun oleh ekstensi pihak ketiga. Beberapa plugin digunakan di hampir setiap proyek.



Plugin berbasis template HTML


Kami memiliki rakitan yang sudah jadi, tetapi tidak berguna tanpa markup, yang akan memuat rakitan sebagai skrip. Karena kami ingin file HTML semacam itu dibuat secara otomatis, kami menggunakan html-webpack-plugin.





Instal plugin: 



yarn add -D html-webpack-plugin


Buat file "template.html" di direktori "src". Kami dapat menambahkan variabel dan informasi lain ke template. Mari tambahkan variabel "title", jika tidak, template akan terlihat seperti file HTML biasa dengan penampung dengan pengenal "root": 



<!-- src/template.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>

  <body>
    <div id="root"></div>
  </body>
</html>


Tambahkan properti "plugins" ke pengaturan webpack, di mana kita mendefinisikan plugin, nama file keluaran (index.html) dan template: 



// webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // ...

    plugins: [
        new HtmlWebpackPlugin({
            title: 'webpack Boilerplate',
            template: path.resolve(__dirname, './src/template.html'), // 
            filename: 'index.html', //   
        }),
    ],
}


Kami memulai perakitan. Direktori "dist" sekarang berisi file "index.html" dengan skrip yang disertakan di dalamnya. Keren! Jika Anda membuka file ini di browser, Anda akan melihat pesan "Menarik sekali!" di konsol.



Mari tambahkan beberapa konten ke DOM. Mari ubah konten dari file "index.js" dan mulai ulang perakitan. 



// index.js
//   
const heading = document.createElement('h1')
heading.textContent = ' !'

//    DOM
const root = document.querySelector('#root')
root.append(heading)


Buka direktori "dist" dan mulai server (untuk ini Anda perlu menginstal http-server : benang global tambahkan http-server atau npm i -g http-server secara global ). 



http-server


Di tab browser yang terbuka, Anda akan melihat judul yang bertuliskan "Menarik sekali!" Perhatikan juga pengurangan ukuran file.



Pembersihan


Instal clean-webpack-plugin, yang membersihkan direktori "dist" setiap kali proyek dibuat. Ini memungkinkan Anda untuk secara otomatis menghapus file lama yang tidak lagi dibutuhkan. 





// webpack.config.js
const HtmlWebpackPlugin = require('html=webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
    // ...

    plugins: [
        // ...
        new CleanWebpackPlugin(),
    ],
}


Modul dan Loader



Webpack menggunakan loader untuk mengurai file yang dimuat oleh modul . Ini bisa berupa file JavaScript, sumber daya statis seperti gambar, atau gaya, dan kompiler seperti TypeScript dan Babel. Webpack 5 memiliki beberapa pemuat sumber daya bawaan.



Proyek kami memiliki file HTML yang memuat beberapa skrip, tetapi tidak ada yang lain. Mari pikirkan apa yang kita inginkan dari kolektor?



  • Kompilasi fitur JavaScript terbaru menjadi kode yang kompatibel dengan semua atau sebagian besar browser
  • Mengimpor Gaya dan Mengonversi SCSS ke CSS
  • Mengimpor gambar dan font
  • Menyesuaikan React atau Vue (opsional)


Pertama, mari kita siapkan Babel untuk mengompilasi JavaScript.



Babel (JavaScript)


Babel adalah alat untuk mengaktifkan JavaScript masa depan saat ini.



Kami akan mendefinisikan aturan bahwa semua file js dalam sebuah proyek (kecuali file yang terdapat dalam direktori node_modules) akan ditranspilasi menggunakan babel-loader. Babel membutuhkan beberapa dependensi agar berfungsi: 





yarn add -D babel-loader @babel/core @babel/preset-env @babel/babel-plugin-proposal-class-properties



// webpack.config.js
module.exports = {
    // ...

    module: {
        rules: [
            // JavaScript
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: ['babel-loader'],
            },
        ],
    }
}


Jika Anda menyiapkan proyek TypeScript, Anda harus menggunakan typescript-loader sebagai ganti babel-loader untuk semua file JavaScript yang membutuhkan transpilasi. Anda memeriksa file dengan ekstensi "ts" dan menggunakan ts-loader.



Jadi Babel sudah disiapkan, tetapi pluginnya belum ada. Anda dapat memverifikasi ini dengan menambahkan kode berikut ke bagian atas index.js: 



// index.js
//     
class Game {
    name = 'Violin Charades'
}
const myGame = new Game()

//  
const p = document.createElement('p')
p.textContent = `I like ${myGame.game}.`

//   
const heading = document.createElement('h1')
heading.textContent = ' !'

//      DOM
const root = document.querySelector('#root')
root.append(heading, p)



ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/you/webpack-tutorial/src/index.js: Support for the experimental syntax 'classProperties' isn't currently enabled (3:8):

  1 | // Create a class property without a constructor
  2 | class Game {
> 3 |   name = 'Violin Charades'
    |        ^
  4 | }


Untuk memperbaikinya, buat file ".babelrc" di root proyek: 



// .babelrc
{
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}


Kami memulai pembangunan dengan pembuatan benang. Semuanya bekerja sekarang.



Gambar-gambar


Kami ingin mengimpor gambar ke dalam file JavaScript, tetapi JavaScript tidak dapat melakukan ini. Untuk memverifikasi ini, buat direktori "src / images", letakkan gambar di sana dan coba impor di file "index.js": 



// index.js
import example from './images/example.png'

// ...


Saat memulai build, pengecualian akan muncul: 



ERROR in ./src/images/example.png 1:0
Module parse failed: Unexpected character ' ' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders


Seperti disebutkan sebelumnya, webpack memiliki beberapa pengunduh bawaan untuk menangani file statis. Untuk gambar, gunakan jenis "aset / sumber daya". Harap dicatat bahwa kita berbicara tentang tipe (tipe), dan bukan tentang pemuat (loader): 



// webpack.config.js
module.exports = {
    // ...

    module: {
        rules: [
            // 
            {
                test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
                type: 'asset/resource',
            },
        ],
    },
}


File baru muncul di direktori "dist".



Font dan data tersemat lainnya


Webpack juga memiliki modul built-in untuk menangani beberapa data yang disematkan seperti font dan SVG. Untuk melakukan ini, cukup menentukan jenis "asset / inline": 



// index.js
import example from './images/example.svg'

// ...



// webpack.config.js
module.exports = {
    // ...

    module: {
        rules: [
            //   SVG
            {
                test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,
                type: 'asset/inline',
            },
        ],
    },
}


Gaya


Menggunakan pemuat gaya adalah prasyarat untuk menggunakan string seperti "import 'file.css'" dalam skrip Anda.



Banyak orang menggunakan CSS-in-JS , komponen bergaya, dan alat lain yang memungkinkan JavaScript untuk bergaya.



Terkadang kami dapat membatasi diri untuk memuat satu file CSS. Tetapi mungkin Anda ingin menggunakan PostCSS , yang memungkinkan kemampuan CSS terbaru di browser. Atau apakah Anda ingin menggunakan preprocessor Sass .



Saya ingin menggunakan ketiganya - tulis kode di Sass, proses dengan PostCSS, dan kompilasi ke CSS. 





yarn add -D sass-loader postcss-loader css-loader style-loader postcss-preset-env node-sass


Seperti Babel, PostCSS memerlukan file konfigurasi terpisah: 



// postcss.config.js
module.exports = {
    plugins: {
        'post-css-preset-env': {
            browsers: 'last 2 versions',
        },
    },
}


Untuk menguji fungsionalitas alat bernama, mari buat file "src / styles / main.scss" yang berisi variabel Sass dan contoh penggunaan PostCSS (lch): 



// src/styles/main.css
$font-size: 1rem;
$font-color: lch(53 105 40);

html {
    font-size: $font-size;
    color: $font-color;
}


Kami mengimpor file ini ke index.js dan menambahkan 4 loader. Loader digunakan oleh webpack dari kanan ke kiri, jadi yang terakhir harus sass-loader, lalu PostCSS, lalu CSS, dan terakhir style-loader, yang menerapkan gaya yang dikompilasi ke elemen DOM: 



// index.js
import './styles/main.css'

// ...



// webpack.config.js
module.exports = {
    // ...

    module: {
        rules: [
            // CSS, PostCSS, Sass
            {
                test: /\.(scss|css)$/,
                use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
            },
        ],
    },
}


Setelah dibuat, Anda akan melihat bahwa Sass dan PostCSS telah diterapkan ke DOM.



Harap dicatat bahwa kami telah mengatur preferensi untuk mode pengembangan. Untuk produksi, gunakan MiniCssExtractPlugin sebagai ganti style-loader, yang mengekspor CSS yang diperkecil.



Perkembangan dari



Mengetik benang yang dibangun (npm run build) setiap saat untuk membangun kembali proyek bisa jadi membosankan. Semakin besar proyeknya, semakin lama waktu yang dibutuhkan untuk membangunnya. Oleh karena itu, Anda perlu memiliki dua file konfigurasi webpack:



  • Pengaturan produksi, termasuk minifikasi, pengoptimalan, dan penghapusan semua peta sumber daya (peta sumber)
  • Pengaturan pengembangan termasuk mulai server, pembaruan pada setiap perubahan, dan peta sumber daya


Alih-alih membuat direktori "dist", mode pengembangan dapat menyimpan informasi yang Anda butuhkan dalam memori.



Untuk melakukan ini, Anda perlu menginstal webpack-dev-server. 





yarn add -D webpack-dev-server


Untuk mendemonstrasikan cara menggunakan server untuk pengembangan, kita dapat menentukan pengaturan yang sesuai di file "webpack.config.js". Dalam praktiknya, yang terbaik adalah memiliki dua file konfigurasi, satu dengan mode: produksi dan satu lagi dengan mode: pengembangan. Dalam boilerplate webpack 5 yang disiapkan khusus untuk Anda, saya menggunakan webpack-merge untuk mendapatkan pengaturan dasar dalam satu file, dan persyaratan khusus terdapat dalam file "webpack.prod.js" dan "webpack.dev.js". 



// webpack.config.js
const webpack = require('webpack')

module.exports = {
    // ...
    mode: 'development',
    devServer: {
        historyApiFallback: true,
        contentBase: path.resolve(__dirname, './dist'),
        open: true,
        compress: true,
        hot: true,
        port: 8080,
    },
    plugins: [
        // ...
        //      
        new webpack.HotModuleReplacement(),
    ],
}


Kami telah menambahkan mode: development dan properti "devServer". Properti ini berisi beberapa pengaturan standar - nomor port (8080), pembukaan browser otomatis, penggunaan hot-module-replacement , yang memerlukan webpack.HotModuleReplacement (). Ini akan memungkinkan modul untuk memperbarui tanpa memuat ulang halaman penuh, mis. jika gaya individu berubah, hanya mereka yang diperbarui, Anda tidak perlu memuat ulang JavaScript, yang sangat mempercepat pengembangan.



Untuk memulai server, gunakan perintah "webpack serve": 



// package.json
"scripts": {
    "start": "webpack serve"
}



yarn start


Setelah menjalankan perintah ini, browser akan terbuka di localhost: 8080. Sekarang Anda dapat memodifikasi Sass dan JavaScript dan mereka akan memperbaruinya dengan cepat.



Kesimpulan



Saya harap artikel ini membantu Anda memulai webpack. Untuk mempermudah menyelesaikan tugas harian Anda, saya mengembangkan boilerplate webpack 5 dengan Babel, Sass, PostCss, pengoptimalan untuk produksi, dan server untuk pengembangan. Mengambilnya sebagai dasar, Anda dapat dengan mudah mengkonfigurasi webpack Anda untuk bekerja dengan React, Vue atau TypeScript.


More articles:


All Articles