Webpack 4: Panduan Langkah demi Langkah Lengkap – Codewithaden

Pada intinya, Webpack adalah Bundler modul statis Untuk aplikasi JavaScript modern. Saat Webpack memproses aplikasi Anda, itu secara rekursif membangun a grafik ketergantungan yang mencakup setiap modul kebutuhan aplikasi Anda, kemudian mengemas semua modul tersebut ke dalam satu atau lebih bundel

Posting Terkait: Tutorial webpack untuk pemula.

Perbaikan Webpack 4.

  • Peningkatan kinerja dan waktu pembangunan yang lebih cepat (hingga 98% lebih cepat)
  • Konfigurasi nol untuk aplikasi kecil. (Anda dapat memeriksa Tutorial Parceljs demikian juga)
  • Pohon yang lebih baik bergetar untuk modul murni tanpa efek samping.
  • Mendukung.
  • Anda dapat mengimpor dan mengekspor perakitan web (Rust, C ++, C, dll.).
  • Pengenalan mode properti yang bisa mengambil keduanya perkembangan atau produksi opsi dan default ke produksi

Contoh Webpack 4: Memulai

Dia sangat dapat dikonfigurasi , tetapi untuk memulai, Anda hanya perlu memahami empat Konsep inti

  • Pintu masuk
  • Keluaran
  • Loader
  • Plugin

Pintu masuk

Sebuah titik masuk menunjukkan pack modul mana yang harus digunakan untuk mulai membangun internal grafik ketergantungan . Setelah memasuki titik masuk, Webpack akan mengetahui modul dan pustaka lain mana yang bergantung pada titik masuk (secara langsung dan tidak langsung).

Inilah contoh paling sederhana pintu masuk konfigurasi:

// webpack.config.js

module.exports = {
  entry: './path/to/my/entry/file.js'
}; 

Keluaran

Itu keluaran Properti memberi tahu halaman web di mana memancarkan bundel. Ini juga membuat dan bagaimana memberi nama file -file ini. Anda dapat mengonfigurasi bagian ini dengan menentukan keluaran bidang dalam konfigurasi Anda.

// webpack.config.js

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
}; 

Loader

Loader Aktifkan Webpack untuk memproses lebih dari sekadar file JavaScript. Mereka memungkinkan Anda untuk memanfaatkan Webpack kemampuan bundling untuk semua file dengan mengubahnya menjadi valid modul Tempat web itu dapat diproses. Contoh loader adalah Vue-Loader, Babel-Loader, CSS-Loader , dll.

// webpack.config.js

const path = require('path');

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

module.exports = config; 

Plugin

Sementara loader mengubah modul spesifik, plugin dapat dimanfaatkan untuk melakukan rentang tugas yang lebih luas. Plugin berkisar dari optimasi bundel dan minifikasi hingga mendefinisikan variabel seperti lingkungan.

// webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins
const path = require('path');

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config; 

Mulai Proyek Webpack

Oke, jadi mari kita mulai dengan contoh. Pertama, kami akan membuat folder proyek yang disebut a starter webpack.

Masuk ke folder itu, buka terminal, dan tekan perintah berikut untuk menghasilkan a package.json mengajukan.

npm init 

Sekarang, kita perlu menginstal webpack. Jadi mari kita dapatkan untuk menginstal.

npm install webpack webpack-cli -D 

Jadi itu akan menginstal paket webpack dan webpack-cli sebagai ketergantungan pengembangan.

Nol Konfigurasi Webpack 4

Jika Anda telah bekerja dengan versi webpack sebelumnya, kami harus membuat a webpack.config.js mengajukan. Dalam versi webpack ini, yaitu 4, kami tidak perlu membuat file itu secara default. Sebaliknya, kita perlu membuat satu folder di root yang disebut SRC, yang perlu didefinisikan karena index.js mengajukan. Meskipun untuk konfigurasi lebih lanjut, kita perlu membuat file itu.

  1. Buat satu folder yang dipanggil SRC di dalam akar.
  2. Di folder itu, buat satu file dipanggil index.js.
  3. Tulis kode sederhana di file itu seperti Console.log (‘Webpack 4 berjalan tanpa file config’);
  4. Jalankan webpack dengan pergi ke terminal dan mengenai perintah ini: Webpack.
  5. Itu akan menghasilkan a Dist folder, dan di dalam folder itu Main.js file dibuat. Ingat, secara default, build adalah produksi.

Mode Pengembangan dan Produksi Webpack 4.

Secara default adalah a mode produksi. Tetapi kita juga dapat menghasilkan build dalam mode pengembangan. Pergi ke Anda package.json file dan tambahkan kode berikut di dalam skrip obyek.

"scripts": {
    "dev": "webpack --mode development",
    "prod": "webpack --mode production"
}, 

Sekarang untuk mode pengembangan, tekan perintah berikut.

npm run dev 

Untuk mode produksi, tekan perintah berikut.

npm run prod 

Transpiling JavaScript ES6 dengan Babel.

Javascript modern sebagian besar ditulis Es6 , dan sebagian besar browser terbaru tidak mendukungnya. Jadi kita perlu mentranspile kode ES6 ke ES5 kode.

Posting Terkait: Panduan Pemula untuk Mengatur Lingkungan Pengembangan ES6

Webpack tidak tahu bagaimana mengubahnya, jadi kita membutuhkan loader untuk melakukan pekerjaan itu.

Babel-Loader adalah loader webpack untuk mentranspiling Es6 dan di atasnya, sampai ke ES5 . Jadi mari kita menginstal dependensi. Pertama, kita perlu menginstal ketergantungan pengembangan.

npm install babel-core babel-loader -D 

Oke, sekarang kita perlu mengkonfigurasi Babel-Loader. Jadi pertama -tama, buat file di dalam folder root yang dipanggil webpack.config.js. Karena konfigurasi default sudah ada, kita perlu menentukan Konfigurasi Babel-Loader.

// webpack.config.js

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

Kita perlu menginstal satu ketergantungan lagi pada mode pengembangan, a Webpack-dev-Server.

npm install webpack-dev-server -D 

Ini memberi kami server pengembangan di mana kami dapat meng -host aplikasi kami dalam pengembangan. Tapi, pertama, ubah naskah di sebuah package.json mengajukan.

"scripts": {
    "dev": "webpack-dev-server --mode development",
    "prod": "webpack --mode production"
}, 

Sekarang, tulis kode ES6 di dalam SRC >> index.js mengajukan.

// index.js

const app = (a, b) => {
   return a + b;
}

alert(app(4,5)); 

Kami telah menggunakan fungsi panah yang merupakan Es6 fitur. Sekarang, di folder root, buat satu file yang dipanggil index.html.




   
   
   
   Webpack 4 Tutorial


   

Mulai server dengan perintah berikut.

npm run dev 

Beralih ke http: // localhost: 8080. Anda dapat melihat bahwa file JavaScript Main.js disertakan dengan benar.

Konfigurasikan React.js dengan Webpack 4

Sekarang, untuk mengkonfigurasi React.js, Kita perlu memasukkan ketergantungan berikut.

npm install babel-preset-react babel-preset-stage-0 -D 

Di folder root, buat satu file dipanggil .babelrc.

{
   "presets": ["react", "stage-0"]
} 

Instal React.js.

Langkah selanjutnya adalah menginstal React.js dependensi.

npm install react react-dom --save 

Di dalam SRC folder, buat satu file dipanggil AppComponent.js.

// AppComponent.js

import React, { Component } from 'react';

export default class AppComponent extends Component {
   render() {
      return (
         
App Component is Rendered!!
) } }

Oke, Reaksi Komponen dibuat. Selanjutnya, sertakan ini AppComponent.js file di dalam index.js mengajukan.

// index.js

import React from 'react';
import { render } from 'react-dom';
import AppComponent from './AppComponent';

render(, document.getElementById('app')); 

Jika Anda belum memulai server , lalu mulai.

npm run dev 

Anda bisa melihatnya di Pelabuhan : 8080 , aplikasi web Anda sedang berjalan.

Itu untuk tutorial ini.

Artikel ini berasal dari website Winpoin, dan kemudian diterjemahkan ke bahasa indonesia, baca artikel asli disini

Leave a Reply

Your email address will not be published. Required fields are marked *