通过CLI(命令行)进行打包

最新推荐文章于 2024-07-29 08:11:50 发布

原创最新推荐文章于 2024-07-29 08:11:50 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

19 篇文章

订阅专栏

本文介绍如何使用CLI命令行方式来进行Webpack打包操作，包括单入口和多入口的打包方法，以及一些常见配置如监听文件变化的watch配置等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过CLI(命令行)进行打包

1. webpack将js文件打包

webpack <entry> [<entry>] <output>

<entry>

一个文件名或一组被命名的文件名，作为构建项目的入口起点。如果传递一个形式为

<name>
 = <request>

的键值对，则可以创建一个额外的入口起点。它将被映射到配置选项(configuration option)的 entry 属性。

<output>

要保存的bundled文件的路径和文件名。它将映射到配置选项 output.path 和 output.filename。

示例：

目录结构：

├── dist
├── index.html
└── src
    ├── index.js
    ├── other.js
    └── main.js

执行命令：

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

    | Asset            | Size     | Chunks      | Chunk Names |
    |------------------|----------|-------------|-------------|
    | index-bundle.js  | 2.52 kB  | 0 [emitted] | main        |
    [0] ./src/index.js | 45 bytes |{0} [built]  | index	      |

打包源码，入口为 index.js，并且输出文件的路径为 dist，文件名为 index-bundle.js

多入口的

webpack index=./src/index.js main=./src/main.js dist/[name]-[chunkhash].js

| Asset                                 | Size    | Chunks      | Chunk Names   |
|---------------------------------------|---------|-------------|---------------|
| main-2740fdca26e9348bedbec.bundle.js  |  2.6 kB | 0 [emitted] | main          |
| index-740fdca26e9348bedbec.bundle.js  | 2.59 kB | 1 [emitted] | index         |
    [0] ./src/index.js 29 bytes {0} [built]
    [1] ./src/main.js 51 bytes {1} [built]

注意：

1. 如果根目录下存在webpack.config.js配置文件，执行命令打包js文件，若配置文件中设置了<output>，则会出现报错。为了避免报错：Module not found: Error: Can't resolve 'dist/[name]-[chunkhash].js' in 。。。

尽可能不在webpack.config.js配置文件中设置output导致重复设置而报错。

2. 如果执行命令

webpack index=src/index.js main=src/main.js dist/[name]-[chunkhash].js

则会报错显示 entry 模块找不到：无法解析‘src/index.js’/‘src/main.js’。

2. 常用的配置

列出命令行所有可用的配置选项

webpack --help
webpack -h

指定配置文件。配置文件默认为 webpack.config.js，如果你想使用其它配置文件，可以加入这个参数。

webpack --config example.config.js

以JSON格式输出webpack的运行结果。即将运行的结果以JSON的形式显示

webpack --json
webpack --json > stats.json

3.输出配置

4. Watch 配置

这些配置可以用于观察依赖文件的变化，一旦有变化，则可以重新执行构建过程。

执行命令：

<output>
通过CLI(命令行)进行打包

webpack index=src/index.js main=src/main.js dist/[name]-[chunkhash].js -w

处于监听状态。。。

5. Debug配置

6.模块配置

7.性能优化配置

8. Resolve 配置