كيفية تجهيز webpack ل production build

عبد النور محمد · 9 سبتمبر 2021

لدي مشروع مكتمل والأن أريد التحويل من بيئة التطوير لبيئة ال production ليصبح الموقع اسرع كيف يمكنني ذلك

const webpack = require('webpack');

const config = {
  entry: ['babel-polyfill', './src/index.js'],
  output: {
    filename: 'bundle.js',
  },
  devServer: {
    inline: true,
    port: 8080,
    historyApiFallback: true,
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        API_KEY: 'API_KEY',
        GOOGLE_MAPS_KEY: 'GOOGLE_MAPS_KEY',
        GOOGLE_GEOLOCATION_KEY: 'GOOGLE_GEOLOCATION_KEY',
      },
    }),
  ],
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react'],
        },
      },
      {
        test: /\.css$/,
        loader: 'style!css',
      },
    ],
  },
};

module.exports = config;

أسامة زيادة · 9 سبتمبر 2021

يمكنك استخدام production mode في ويباك , عن طريق فتح ملف package.json و إضافة التعليمة التالية

"scripts": {
    "build": "NODE_ENV=production webpack --config ./webpack.production.config.js"
},

ثم تشغيل الأمر التالي

npm run build

لتكوين مجلد dist الذي يكون الانتاج النهائي للكود.

Wael Aljamal · 9 سبتمبر 2021

يمكن تحديد نمط تشغيل webpack بين production و development من خلال الخاصية mode في كائن الإعدادات:

Mode: development
// webpack.development.config.js
module.exports = {
  mode: 'development',
};
Mode: production
// webpack.production.config.js
module.exports = {
  mode: 'production',
};

ويمكن تمرير نمط التشغيل مباشرة ضمن CLI أو مع script:

webpack --mode=development
webpack --mode=production

ويمكن الاعتماد على الحزمة webpack-merge التي تمكننا من إنشاء عدة ملفات إعدادات كل منها لبيئة معينة وبإعدادات نختارها.. ثم يمكن دمجها بملف واحد common

التثبيت:

npm install --save-dev webpack-merge

ملفات الإعدادات:

 |- webpack.common.js
 |- webpack.dev.js
 |- webpack.prod.js

webpack.common.js

 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');

 module.exports = {
   entry: {
     app: './src/index.js',
   },
   plugins: [
     new HtmlWebpackPlugin({
       title: 'Production',
     }),
   ],
   output: {
     filename: '[name].bundle.js',
     path: path.resolve(__dirname, 'dist'),
     clean: true,
   },
 };


webpack.dev.js

 const { merge } = require('webpack-merge');
 const common = require('./webpack.common.js');

 module.exports = merge(common, {
   mode: 'development',
   devtool: 'inline-source-map',
   devServer: {
     static: './dist',
   },
 });


webpack.prod.js


 const { merge } = require('webpack-merge');
 const common = require('./webpack.common.js');

 module.exports = merge(common, {
   mode: 'production',
 });

ثم كل ملف مخصص لبيئة ما، يضمن الملف المشترك ويضف إعدادة الببيئة المخصصة

ولعمل script:

NPM Scripts

package.json

    "scripts": {
     "start": "webpack serve --open --config webpack.dev.js",
     "build": "webpack --config webpack.prod.js"
    },

التوثيق: webpack.js/production