关于webpack:webpack-和-webpackcli

6次阅读

共计 876 个字符,预计需要花费 3 分钟才能阅读完成。

webpack 的装置目前分为两个:webpackwebpack-cli

webpack、webpack-cli 的区别

在命令行中执行 webpack 命令,会执行 node_modules 下的 .bin 目录下的 webpack 文件,webpack 的执行依赖 webpack-cli,如果没有装置 webpack-cli 就会报错。在 webpack-cli 中代码执行时,才是真正利用 webpack 进行编译和打包的过程;

npm install webpack webpack-cli –g    #全局装置
npm install webpack webpack-cli –D    #部分装置 (我的项目中应用)

全局装置 和 部分装置 的区别?

  1. 如果只有全局的 webpack,那么打包的时候,用了全局的 webpack,不同电脑的 webpack 版本不同会导致包的装置版本不同。
  2. 部分装置:每一个我的项目都有本人的 webpack 的版本,–D 是开发时依赖,定义了对立的 webpack 版本,打包的时候不会呈现包的版本问题。

间接在命令行中执行 webpack 找的是全局的 webpack,如果要用部分的 webpack 的话:

  1. 去 node_modules 中的 .bin 中找 webpack:./node_modules/.bin/webpack
  2. 执行 npx webpack 默认找 node_modules 中的 .bin 下的 webpack 文件
  3. 在 package.json 中写脚本 "build": "npx webpack",在应用的时候 npm run build 相当于执行了 webpack 指令。

webpack 是如何确定咱们的入口的呢?

当咱们运行 webpack 时,webpack 会查找当前目录下的 src/index.js 作为入口,如果没有存在 src/index.js 文件,就会报错。

webpack 是如何对咱们的我的项目进行打包的呢?

依据命令或者配置文件找到入口文件,从入口开始,会生成一个 依赖关系图,这个依赖关系图会蕴含应用程序中所需的所有模块(比方.js 文件、css 文件、图片、字体等)
而后遍历图构造,打包一个个模块(依据文件的不同应用不同的 loader 来解析)

正文完
 0