跳到主要内容

webpack-cli

介绍​

webpack-cli 提供了许多命令来使 webpack 的工作变得更简单

命令​

build 命令​

运行 webpack（默认命令，可用输出文件）。

"scripts":{
    "build":"webpack build"
}

server 命令​

运行 webpack 开发服务器webpack-dev-server (需安装开发服务器webpack-dev-server)

"scripts":{
    "dev":"webpack server"
}

标志​

--config 标志​

提供 webpack 配置文件的路径

  • 开发编译时指定webpack配置文件路径

    "scripts":{
        "dev":"webpack server --config ./webpack.config.js"
    }

  • 打包编译时指定webpack配置文件路径

    "scripts":{
        "build":"webpack build --config ./webpack.config.js"
    }

--color 标志​

启用控制台颜色

--env 标志​

当它是一个函数时，传递给配置的环境变量

::: warning 注意

  • 当webpack.config.js 为一个函数时，提供的第一个参数即为env

  • --env配置的环境变量不可以在bundle代码中使用 :::

  • package.json通过--env配置env环境变量

    "scripts": {
        "dev": "webpack serve --env mode=build --env env=dev --progress --color --config ./webpack.config.js",
        "build": "webpack build --env mode=build --env=prod --progress --color --config ./webpack.config.js --watch"
    },

  • webpack.config.js 使用env环境变量

    const Path = require('path');
    module.exports = (env, argv) => {
        const {mode,currentEnv} = env;
        console.log(mode);
        console.log(currentEnv);
        return {
            mode: "development",
            entry: Path.resolve(process.cwd(), "./index.ts"),
            output: {
            path: Path.resolve(process.cwd(), "build"),
                filename: "index.js",
            },
            devServer: {
                port: 8090,
                open: true,
                static: {
                    directory: Path.resolve(process.cwd(), "./"),
                },
            },
        };
    };

--progress 标志​

在构建过程中打印编译进度

"scripts":{
    "build":"webpack build --progress --config ./webpack.config.js"
}

--watch 标志​

监听文件变化

::: warning 注意

  1. --watch 标志只可以用于build命令。用于server命令会报错 :::
"scripts":{
    "build":"webpack build --config ./webpack.config.js --watch"
}

--mode 标志​

定义 webpack 所需的 mode

--analyze 标志​

它调用 webpack-bundle-analyzer 插件来获取 bundle 信息