Opdrachtregelargumenten doorgeven aan webpack.config.js

Ik heb een eenvoudige webpack.config.js

module.exports = {
  entry: "./app.js",
  output: {
    filename: "bundle.js"
  },
}

En ik wil de waarden voor entryen outputdoorgeven via opdrachtregelargumenten. Kan dat en hoe moet ik dat doen?


Antwoord 1, autoriteit 100%

webpack.config.jskan ook een functie van env exporteren die een conf-object kan retourneren. U kunt daarom een ​​webpack-configuratie hebben zoals:

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

en roep dan webpack aan vanaf de opdrachtregel (of package.json) als volgt:

webpack --env=production

Antwoord 2, autoriteit 31%

U kunt aangepaste parameters opgeven voor de variabele envvanaf de opdrachtregel, dus voor dit voorbeeld kunt u het volgende aanroepen:

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

en gebruik ze in uw webpack door te doen

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

Antwoord 3, autoriteit 28%

U kunt ook meerdere sleutel-waardeparen aan uw configuratie doorgeven met --env=key=value:

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

of (voor ontwikkeling met webpack-dev-server):

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

webpack.config.jsziet er als volgt uit:

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),
    },
  }
}

Alle waarden die op deze manier worden doorgegeven, zijn beschikbaar als een object in de configuratie, waardoor ze gemakkelijk te gebruiken zijn.

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

Antwoord 4, autoriteit 10%

U kunt het CLI-argument --envgebruiken om willekeurige parameters aan de configuratie door te geven.

Bijvoorbeeld het volgende commando:

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

Zal het volgende env-object produceren:

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

Die je dan als volgt in je configuratie kunt gebruiken:

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

Lees hier meer: ​​Webpack – Omgevingsvariabelen


Antwoord 5, autoriteit 5%

U kunt het pakket argvgebruiken en de variabelen instellen. U moet dit doen vóór module.export.


Antwoord 6, autoriteit 2%

De gemakkelijkste manier, naar mijn mening, om argumenten door te geven is door Node te gebruiken.
Omdat Webpack degene is die de argumenten ontvangt, kunt u uw opdrachtregelargumenten opslaan in een speciale omgevingsvariabele(die alleen binnen de sessie bestaat):

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

Vervolgens in uw main.js (overal waar u ze wilt ontleden), haalt u uw opdrachtregelargumenten op uit uw speciale omgevingsvariabele.

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

Omdat je alle argumenten ophaalt die je aan Webpack hebt doorgegeven, kun je hiermee alle node-modules (zoals bijvoorbeeld yargs) pijnloos gebruiken om ze te ontleden (of dit natuurlijk handmatig doen).

Dus je kunt dit soort dingen zonder problemen doen:

webpack ... --opt1 the_value --custom1 something
yarn run dev --opt1 the_value --custom1 something

enz.

Other episodes