语言►nodejs►库►webpack

webpack的命令行界面

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/06/01/webpack%E7%9A%84%E5%91%BD%E4%BB%A4%E8%A1%8C%E7%95%8C%E9%9D%A2/

摘要

本文主要讲述了：

  1. 使用配置文件
  2. 使用命令行参数
  3. 环境参数

正文

使用配置文件

1
2
3
#!/usr/bin/env bash

npx webpack --config webpack.config.js

如果配置文件名为webpack.config.js，可以直接写成：

1
2
3
#!/usr/bin/env bash

npx webpack

使用命令行参数

发送给命令行的任何参数都将被解析并映射到配置文件中的相应参数。

示例：将./src/index.js打包成dist/bundle.js

1
2
3
#!/usr/bin/env bash

npx webpack ./src/index.js -o dist/bundle.js

示例：将./src/index.js、./src/foo.js打包成dist/bundle.js

1
2
3
#!/usr/bin/env bash

npx webpack index=./src/index.js foo=./src/foo.js -o dist/bundle.js

注意：在使用命令行参数时，如果 CWD 下存在webpack.config.js，不管是否明文声明使用webpack.config.js，webpack都会读取webpack.config.js，然后将命令行参数和webpack.config.js进行合并（命令行参数的权重比webpack.config.js的权重更高），从而得到一份最终的配置，并根据最终配置打包。

环境参数

webpack命令行允许开发者使用--env传入任意数量的环境变量。环境变量可以在webpack.config.js中的env使用。

注意：若不指定参数值，则默认为true

示例：

1
2
3
4
5
6
module.exports = function (env, argv) {
  // env是argv对象的子属性
  return {
    mode: env.prod ? 'production' : 'development',
  };
};
1
2
3
#!/usr/bin/env bash

npx webpack --env.prod

相当于：

1
2
3
module.exports = {
  mode: 'production',
};

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/06/01/webpack%E7%9A%84%E5%91%BD%E4%BB%A4%E8%A1%8C%E7%95%8C%E9%9D%A2/

本文对你有帮助？请支持我

支付宝
微信