การส่งผ่านอาร์กิวเมนต์บรรทัดคำสั่งไปยัง webpack.config.js

webpack.config.js ยังสามารถส่งออกฟังก์ชันของ env ซึ่งสามารถส่งคืนวัตถุ conf ได้ คุณสามารถมีการกำหนดค่า webpack ได้เช่น:

module.exports = env => {
    return {
        entry: env === "production" ? "./app.js": "app-dev.js",
        output: {
          filename: "bundle.js"
        },
    }
};

จากนั้นเรียก webpack จากบรรทัดคำสั่ง (หรือ package.json) ดังนี้:

webpack --env=production

คุณสามารถระบุพารามิเตอร์ที่กำหนดเองบนตัวแปร env ได้จากบรรทัดคำสั่ง ดังนั้นสำหรับตัวอย่างนี้ คุณสามารถเรียก:

webpack --env.entry='./app.js' --env.output='bundle.js'

และใช้ใน webpack ของคุณโดยทำ

module.exports = env => ({
  entry: env.entry,
  output: {
    filename: env.output
  },
});

คุณยังสามารถส่งคู่คีย์-ค่าหลายคู่ไปยังการกำหนดค่าของคุณโดยใช้ --env=key=value:

webpack --env=mode=production --env=branch=develop

หรือ (สำหรับการพัฒนาด้วย webpack-dev-server):

webpack serve --env=mode=production --env=branch=develop

webpack.config.js จะมีลักษณะเช่นนี้:

module.exports = (env) => {
  const mode = env.mode === 'prod' ? 'dev';
  const branch = env.branch ? env.branch : 'develop';

  return {
    entry: mode === 'prod' ? './app.js': 'app-dev.js',
    output: {
      filename: 'bundle.js',
      path: 'dist/' + branch),
    },
  }
}

ค่าทั้งหมดที่ส่งผ่านในลักษณะนี้จะพร้อมใช้งานเป็นออบเจ็กต์ในการกำหนดค่าซึ่งทำให้ใช้งานง่าย

{ 
  WEBPACK_BUNDLE: true,
  mode: 'production',
  branch: 'feature-x',
  foo: 'bar'
}

คุณสามารถใช้แพ็คเกจ argv และตั้งค่าตัวแปรได้ คุณต้องดำเนินการก่อน module.export

คุณสามารถใช้อาร์กิวเมนต์ --env CLI เพื่อส่งพารามิเตอร์ที่กำหนดเองไปยังการกำหนดค่าได้

ตัวอย่างเช่น คำสั่งต่อไปนี้:

webpack --env entry=./entry.js --env output=./output.js

จะสร้างวัตถุ env ต่อไปนี้:

{entry: './entry.js', output: './output.js'}

ซึ่งคุณสามารถใช้ในการกำหนดค่าของคุณดังนี้:

module.exports = env => ({
  entry: env.entry,
  output: {
    filename: env.output
  },
});

อ่านเพิ่มเติมที่นี่: Webpack - ตัวแปรสภาพแวดล้อม

วิธีที่ง่ายที่สุดในความคิดของฉันในการส่งผ่านข้อโต้แย้งคือการใช้ Node Webpack เป็นผู้รับอาร์กิวเมนต์ คุณสามารถบันทึกอาร์กิวเมนต์บรรทัดคำสั่งของคุณในตัวแปรสภาพแวดล้อมเฉพาะ (ซึ่งมีอยู่ในเซสชันเท่านั้น):

// webpack.config.js 
process.env.MY_APPLICATION_NAME_ARGS = JSON.stringify(process.argv)

export default {
...

จากนั้นใน main.js ของคุณ (ทุกที่ที่คุณต้องการแยกวิเคราะห์) คุณจะดึงอาร์กิวเมนต์บรรทัดคำสั่งจากตัวแปรสภาพแวดล้อมเฉพาะของคุณ

// main.js
const myArgs = JSON.parse(env.MY_APPLICATION_NAME_ARGS )

เนื่องจากคุณจะดึงอาร์กิวเมนต์ทั้งหมดที่คุณส่งไปยัง Webpack โดยใช้สิ่งนี้ คุณจะสามารถใช้โมดูลโหนดใดๆ (เช่น yargs เป็นต้น) เพื่อแยกวิเคราะห์พวกมันได้อย่างง่ายดาย (หรือทำด้วยตนเองก็ได้)

ดังนั้นคุณจะสามารถทำสิ่งต่างๆ เหล่านี้ได้โดยไม่มีปัญหาใดๆ:

webpack ... --opt1 the_value --custom1 something

yarn run dev --opt1 the_value --custom1 something

ฯลฯ