Webpack 4 dan pisahkan file konfigurasi menjadi modul

Halo, Habr! Hari ini saya akan memberi tahu Anda tentang Webpack 4 dengan pemisahan kode menjadi modul terpisah, serta solusi menarik yang akan membantu Anda membangun rakitan webpack 4 Anda lebih cepat. Pada akhirnya, saya akan memberikan rakitan webpack dasar saya dengan alat yang paling diperlukan, yang nantinya bisa Anda dapat untuk memperluas. Majelis ini akan membantu Anda memahami materi ini, dan mungkin juga membantu Anda menulis implementasi Anda lebih cepat dan menyelesaikan masalah yang mungkin terjadi dengan lebih cepat.

Ideologi utama majelis ini adalah pemisahan kode yang benar di dalam file konfigurasi untuk kenyamanan penggunaan, pembacaan, dan kebersihan webpack.config.js. Modul dan plugin yang diperlukan untuk versi dev dan prod (serta untuk memisahkan fungsi dalam file utama) akan ditempatkan di folder webpack terpisah dan diimpor darinya untuk terhubung ke konfigurasi utama.

Mengapa pendekatan ini diperlukan?

Dengan peningkatan bertahap dalam jumlah modul, plug-in, dll., Yang dibangun oleh rakitan Anda di webpack, file konfigurasi tumbuh dengan pesat. Seiring waktu, file ini menjadi sulit dibaca, dan mengubahnya menjadi proyek tertentu, jika beberapa modul tidak digunakan di dalamnya, itu menjadi lebih sulit, tetapi Anda menginginkan sesuatu yang universal. Oleh karena itu, diperlukan pengaturan kode yang jelas.

Apa yang kita butuhkan

Kami akan menggunakan plugin webpack-merge .

Kami membuat folder webpack dan mengambil semua modul menjadi file terpisah. Misalnya, webpack / pug.js, webpack / scss.js dan ekspor fungsi-fungsi ini dari mereka.

File Pug.js

module.exports = function() { return { module: { rules: [ { test: /\.pug$/, loader: 'pug-loader', options: { pretty: true, }, }, ], }, }; }; 

File webpack.config.js . Dalam file ini kami menghubungkan mereka, dan dengan bantuan plugin ini kami terhubung dengan mudah dan cepat.

 const merge = require('webpack-merge'); const pug = require('./webpack/pug'); const common = merge([ { entry: { 'index': PATHS.source + '/pages/index/index.js', 'blog': PATHS.source + '/pages/blog/blog.js', }, output: { path: PATHS.build, filename: './js/[name].js', }, plugins: […], optimization: { … }, }, pug(), ]); 

Sekarang, jika kita memiliki tugas baru, di mana kita memerlukan modul baru, plug-in, loader, maka kita membawanya ke modul hotel (file) dan meletakkannya di folder webpack, dan kemudian menghubungkannya ke file konfigurasi utama, menjaga konfigurasi sebersih mungkin.

Pengaturan untuk produksi dan pengembangan

Sekarang, dengan bantuan dangkal jika, kami akan menyelesaikan pemisahan kami, yang kami tuju, dan mengkonfigurasi paket web kami untuk dua jenis pengembangan ini, sehingga akhirnya nyaman untuk menggunakan alat ini, dan juga di masa depan kami akan dapat secara fleksibel dan hanya mengkonfigurasinya untuk proyek lain, atau memperluas yang saat ini. Untuk mengekspor ke simpul (untuk webpack itu sendiri) di webpack 4, kami menggunakan konstruksi berikut:

 module.exports = function(env, argv) { if (argv.mode === 'production') { return merge([ common, extractCSS(), favicon(), ]); } if (argv.mode === 'development') { return merge([ common, devserver(), sass(), css(), sourceMap(), ]); } 

Dalam objek umum, kami menghubungkan apa yang digunakan baik dalam prod dan dalam pengembangan, dan dalam kondisi kami hanya menghubungkan modul-modul yang diperlukan dalam kasus ini.

Sekarang saya ingin berbicara tentang fitur utama webpack 4 tentang webpack 3

• Untuk memulai lebih cepat, webpack 4 tidak memerlukan webpack.config.js, sekarang hanya membutuhkan titik masuk (index.js)
• Dalam versi baru, antarmuka baris perintah webpack berada dalam paket terpisah dan Anda perlu menginstal webpack-cli.
• Untuk menjalankan webpack 4, Anda perlu (jika tidak akan menjadi peringatan) dalam mode tentukan skrip (mode operasi) - mode produksi atau - pengembangan mode, tergantung pada tombol, operasi perubahan webpack. Mode pengembangan bertujuan untuk mempercepat pembangunan. Dalam versi produksi, semuanya ditujukan pada minifikasi kode yang terakhir.
• Untuk membuat file common.js dan common.css, CommonsChunkPlugin tidak lagi digunakan, splitChunks sekarang bertanggung jawab untuk ini dan konstruksi berikut digunakan:
  
  

    optimization: { splitChunks: { cacheGroups: { 'common': { minChunks: 2, chunks: 'all', name: 'common', priority: 10, enforce: true, }, }, }, }, 

  
  Di webpack 3 - ini akan terjadi pada plugin:
  
  

   new webpack.optimize.CommonsChunkPlugin({ name: 'common ', }) 

  
  Dengan demikian, dalam potongan di HtmlWebpackPlugin kita terhubung (di sini tanpa perubahan).
  
  

   plugins: [ new HtmlWebpackPlugin({ filename: 'index.html', chunks: ['index', 'common'], template: PATHS.source + '/pages/index/index.pug', }), ], 

  
  
• Poin penting berikutnya, untuk membuat sourceMap, kami sekarang menggunakan pendekatan berikut - membuat file sourceMap.js di folder webpack dan menghubungkannya dalam versi dev misalnya (seperti yang disebutkan di atas):
  
  

   module.exports = function() { return { devtool: 'eval-sourcemap', }; }; 

Sekarang pendekatan plugin: [new webpack.optimize.UglifyJsPlugin ({})] tidak berfungsi.

Dengan ini, saya ingin menyelesaikan cerita saya dan memberikan perakitan dasar saya - tautan ke webpack 4, yang mungkin akan membantu Anda dalam pekerjaan dan pengembangan Anda. Terima kasih atas perhatian anda!