webpack的development和production模式

webpack的development和production模式

webpack打包模式

1. development模式

• 开发环境
• 不会对打包生成的文件进行代码压缩和性能优化。
• 打包速度快，适合在开发阶段使用。

2. production模式

• 生产环境
• 会对打包生成的文件进行代码压缩和性能优化。
• 打包速度慢，仅适合在项目发布阶段使用。

3. 打包配置

{
  "name": "cztl",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack server",
    "build": "webpack --mode production"
  },
}

项目打包

开发模式

开发模式命令：

npm run dev

打包结果：

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://127.0.0.1:8111/
<i> [webpack-dev-server] Content not from webpack is served from '../cztl' directory
[BABEL] Note: The code generator has deoptimised the styling of D:\three.js资料\cztl\src\three\build\three.module.js as it exceeds the max of 500KB.
assets by info 281 KiB [immutable]
  asset 25f390e921f22187aa42.svg 142 KiB [emitted] [immutable] [from: src/fonts/glyphicons-halflings-regular.svg] (auxiliary name: main)
  asset dec4ea00820558e24672.ttf 59.2 KiB [emitted] [immutable] [from: src/fonts/glyphicons-halflings-regular.ttf] (auxiliary name: main)
  asset f34ea237f268661e9d00.woff 30.5 KiB [emitted] [immutable] [from: src/fonts/glyphicons-halflings-regular.woff] (auxiliary name: main)
  asset 5e9505a87e4d8ecb2017.eot 26.3 KiB [emitted] [immutable] [from: src/fonts/glyphicons-halflings-regular.eot] (auxiliary name: main)
  asset 45eb1d236a736caa24dd.woff2 23.5 KiB [emitted] [immutable] [from: src/fonts/glyphicons-halflings-regular.woff2] (auxiliary name: main)
asset bundle.js 2.73 MiB [emitted] (name: main) 1 related asset
asset ./index.html 3.97 KiB [emitted]
runtime modules 26.3 KiB 12 modules
modules by path ./node_modules/ 509 KiB
  modules by path ./node_modules/axios/ 56.8 KiB 32 modules
  modules by path ./node_modules/webpack-dev-server/client/ 55.8 KiB 12 modules
  modules by path ./node_modules/style-loader/dist/runtime/*.js 5.75 KiB 6 modules
  modules by path ./node_modules/webpack/hot/*.js 4.3 KiB 4 modules
  modules by path ./node_modules/html-entities/lib/*.js 81.3 KiB 4 modules
  modules by path ./node_modules/css-loader/dist/runtime/*.js 3.52 KiB 3 modules
  + 3 modules
modules by path ./src/ 2.08 MiB (javascript) 281 KiB (asset)
  javascript modules 2.08 MiB 15 modules
  asset modules 210 bytes (javascript) 281 KiB (asset)
    ./src/fonts/glyphicons-halflings-regular.eot 42 bytes (javascript) 26.3 KiB (asset) [built] [code generated]
    ./src/fonts/glyphicons-halflings-regular.woff2 42 bytes (javascript) 23.5 KiB (asset) [built] [code generated]
    + 3 modules
webpack 5.74.0 compiled successfully in 13017 ms

生产模式

生产模式命令：

npm run build

打包结果：

D:\three.js资料\cztl>npm run build

> cztl@1.0.0 build D:\three.js资料\cztl
> webpack --mode production

[BABEL] Note: The code generator has deoptimised the styling of D:\three.js资料\cztl\src\three\build\three.module.js as it exceeds the max of 500KB.
assets by info 281 KiB [immutable]
  asset 25f390e921f22187aa42.svg 142 KiB [emitted] [immutable] [from: src/fonts/glyphicons-halflings-regular.svg] (auxiliary name: main)
  asset dec4ea00820558e24672.ttf 59.2 KiB [emitted] [immutable] [from: src/fonts/glyphicons-halflings-regular.ttf] (auxiliary name: main)
  asset f34ea237f268661e9d00.woff 30.5 KiB [emitted] [immutable] [from: src/fonts/glyphicons-halflings-regular.woff] (auxiliary name: main)
  asset 5e9505a87e4d8ecb2017.eot 26.3 KiB [emitted] [immutable] [from: src/fonts/glyphicons-halflings-regular.eot] (auxiliary name: main)
  asset 45eb1d236a736caa24dd.woff2 23.5 KiB [emitted] [immutable] [from: src/fonts/glyphicons-halflings-regular.woff2] (auxiliary name: main)
asset bundle.js 1.6 MiB [emitted] [minimized] [big] (name: main) 2 related assets
asset ./index.html 2.9 KiB [emitted]
orphan modules 1.27 MiB [orphan] 12 modules
runtime modules 1.39 KiB 7 modules
modules by path ./node_modules/ 349 KiB
  modules by path ./node_modules/axios/ 56.8 KiB 32 modules
  modules by path ./node_modules/style-loader/dist/runtime/*.js 5.75 KiB 6 modules
  modules by path ./node_modules/css-loader/dist/runtime/*.js 3.52 KiB 3 modules
  ./node_modules/jquery/dist/jquery.js 283 KiB [built] [code generated]
modules by path ./src/ 2.08 MiB (javascript) 281 KiB (asset)
  asset modules 210 bytes (javascript) 281 KiB (asset)
    ./src/fonts/glyphicons-halflings-regular.eot 42 bytes (javascript) 26.3 KiB (asset) [built] [code generated]
    + 4 modules
  javascript modules 2.08 MiB
    ./src/index.js + 12 modules 1.34 MiB [built] [code generated]
    + 2 modules

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  bundle.js (1.6 MiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (1.6 MiB)
      bundle.js


WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

webpack 5.74.0 compiled with 3 warnings in 13061 ms

dist文件夹中生成

两种模式对比

对比上面两次不同模式的打包实验数据：

模式	打包时间	打包体积
开发模式	13017 ms	2.08 MiB
生产模式	13061 ms	1.6 MiB

结论：
开发模式打包速度快，项目体积大；生产模式打包速度慢，体积小。

webpack打包后的项目运行

开发环境下打包

打包后的JavaScript程序运行在node.js，运行打包命令后，DOS命令窗口会出现访问的地址。

生产环境下打包

在生产模式下执行打包命令，会产生打包后的项目文件。如果在dist文件点击index.html运行，无法显示网页，会报错：

js路径问题，无法找到bundle.js，修改为绝对路径。

• 修改前：

<script defer="defer" src="/bundle.js"></script>

• 修改后：

<script defer="defer" src="/cztl/src/dist/bundle.js"></script>