共计 876 个字符,预计需要花费 3 分钟才能阅读完成。
webpack 的装置目前分为两个:webpack、webpack-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 #部分装置 (我的项目中应用)
全局装置 和 部分装置 的区别?
- 如果只有全局的 webpack,那么打包的时候,用了全局的 webpack,不同电脑的 webpack 版本不同会导致包的装置版本不同。
- 部分装置:每一个我的项目都有本人的 webpack 的版本,–D 是开发时依赖,定义了对立的 webpack 版本,打包的时候不会呈现包的版本问题。
间接在命令行中执行 webpack 找的是全局的 webpack,如果要用部分的 webpack 的话:
- 去 node_modules 中的 .bin 中找 webpack:
./node_modules/.bin/webpack
- 执行
npx webpack
默认找 node_modules 中的 .bin 下的 webpack 文件 - 在 package.json 中写脚本
"build": "npx webpack"
,在应用的时候 npm run build 相当于执行了 webpack 指令。
webpack 是如何确定咱们的入口的呢?
当咱们运行 webpack 时,webpack 会查找当前目录下的 src/index.js 作为入口,如果没有存在 src/index.js 文件,就会报错。
webpack 是如何对咱们的我的项目进行打包的呢?
依据命令或者配置文件找到入口文件,从入口开始,会生成一个 依赖关系图,这个依赖关系图会蕴含应用程序中所需的所有模块(比方.js 文件、css 文件、图片、字体等)
而后遍历图构造,打包一个个模块(依据文件的不同应用不同的 loader 来解析)
正文完