本文共 1212 字，大约阅读时间需要 4 分钟。

初始化根目录

在项目根目录执行以下命令初始化 npm 包管理器

npm init

接着按回车键依次选择确认信息

安装

为了方便开发使用以下命令安装 webpack 及其 CLI 工具

npm install -D webpack webpack-cli

注意：在开发环境中使用时，添加 -D 参数以确保依赖仅用于开发阶段

打包构建

默认情况下 webpack 会根据根目录下 src/index.js 文件作为入口，打包输出到 dist/ 目录

npx webpack

如果需要修改打包的入口和出口目录，可以创建 webpack.config.js 配置文件

修改入口和出口目录

// 示例 webpack.config.js
const path = require('path');
module.exports = {
    mode: 'development',
    entry: './test_entry/index.js',
    output: {
        path: path.resolve(__dirname, 'test_output'),
        filename: 'index.js'
    }
}

执行打包命令时可以选择使用自定义配置文件

npx webpack --config myconfig.js

关于 webpack 配置文件

默认 webpack 使用 webpack.config.js 作为配置文件名称，可以自定义配置文件名

npx webpack --config myconfig.js

注意：由于 webpack 在编译过程中依赖 Node.js 环境，必须在 Node.js 环境下执行

webpack 配置文件还可以返回一个函数接收环境变量

module.exports = env => {
    console.log('env', env);
    return {
        mode: 'development'
    }
}

注意：环境变量可以通过命令行传递

npx webpack --env ab=1

配置 package.json

在 package.json 中添加以下脚本配置

{
    "scripts": {
        "build-dev": "webpack --mode=development --watch",
        "build-pro": "webpack --mode=production"
    }
}

注意：--watch 参数用于开发环境下实时监控文件修改并自动重新构建

构建命令

根据项目需求选择合适的构建命令执行

npm run build-dev
npm run build-pro

注意：如果配置了 --mode 参数，命令行参数将优先生效环境变量