webpack命令行传参到项目页面

本次的需求是想通过在输入类似npm run dev之类的命令的时候,加一个参数,然后在页面中接收这个参数从而做一些判断。比如,我们的需求是在测试系统的标题,要增加(测试系统)四个字,如果单纯是改来改去,维护版本的成本太高,所以最终实现了通过输入 yarn build_test则直接打包测试系统,输入yarn build就是打包正常的生产系统。下面来说一下具体如何实现。

实现方法

1 在webpack的配置中引入argv,这是一个关键点。它可以接到命令行输入的参数。

const argv = require('yargs').argv;
let type = ''
if (argv.type) {
  type = argv.type
}
2 webpack.DefinePlugin是第二个关键点,它可以把你的参数带到页面中
  new webpack.DefinePlugin({
    'process.env.NODE_ENV': '"develop"',
    'process.type': "'" + type + "'", // 这个type就是我们系统中需要的参数
  }),

3 页面中接收参数

console.log(process.type)

 

至于怎么改npm命令,就变得简单了,不再赘述。

分享