webpack-cli在webpack打包中的作用小结

目录
  • webpack & webpack-cli
    • webpack Introduction
    • webpack-cli 详解
  • Reference

webpack & webpack-cli

webpack Introduction

webpack 是一个静态的模块化打包工具,为现代的JavaScript应用程序服务

打包 bundler:webpack可以帮助我们进行打包,所以它是一个打包工具

静态的static:将代码打包成最终的静态资源(部署到静态服务器)

模块化module:webpack默认支持各种模块化开发,ES Module、CommonJS、AMD等

现代modern:前端开发的各种问题,催生了webpack的出现

webpack 安装

npm install webapck webpack-cli --save-dev

webpack 从 4.0 版本开始,在安装时,就必须要安装这两个东西。

webpack 是打包代码时依赖的核心内容,而 webpack-cli 是一个用来在命令行中运行 webpack 的工具。

但,webpack-cli对于打包文件不是必要的,这是为什么呢?

webpack-cli 详解

npm run build 命令来解析 webpack-cli 在代码打包中的作用,wk.config.js 为自定义webpack 配置文件

"scripts": {
    "build": "webpack --config wk.config.js"
 }

当在命令行中执行 npm run build 时,会执行node_modules/.bin下的webpack可执行文件

这里有三个可执行文件,分别对应不同的平台

# unix 系统默认可执行文件,必须输入完整文件名
webpack
​
# windows cmd 中默认的可执行文件
webpack.cmd
​
# windows PowerShell 中可执行文件,可以跨平台
webpack.ps1

以webpack可执行文件内容为例:

#!/bin/sh
basedir=$(dirname "$(echo "$0" | sed -e 's,\,/,g')")
​
case `uname` in
    *CYGWIN*|*MINGW*|*MSYS*) basedir=`cygpath -w "$basedir"`;;
esac
​
if [ -x "$basedir/node" ]; then
  "$basedir/node"  "$basedir/../webpack/bin/webpack.js" "$@"
  ret=$?
else
  node  "$basedir/../webpack/bin/webpack.js" "$@"
  ret=$?
fi
exit $ret

从代码中可以看到,会执行node_modules/webpack/bin/ 目录下的webpack.js,该文件主要代码如下:

// 该函数用于执行命令,例如用于下载需要的包
const runCommand = (command ,args) => {}
​
// 判断该包是否安装
const isInstalled = packageName => {}
​
// 该函数用于执行webpack-cli包中bin目录下的cli.js文件
const runCli = cli => {
    const path = require("path");
    const pkgPath = require.resolve(`${cli.package}/package.json`);
    // pkgPath: D:\webpack\node_modules\webpack-cli\package.json
    const pkg = require(pkgPath);
    // pkg: webpack-cli的package.json 中的配置
    // path.resolve(path.dirname(pkgPath), pkg.bin[cli.binName]): D:\webpack\node_modules\webpack-cli\bin\cli.js
    require(path.resolve(path.dirname(pkgPath), pkg.bin[cli.binName]));
}
​
if (!cli.installed) {
    // 判断 webpack-cli 是否安装
    // 如果没有安装,询问用于是否安装 webpack-cli
    ...
    ...
} else {
    runCli(cli);
}

该文件最重要的函数就是 runCli ,该函数可以执行 webpack-cli 包中bin目录下的cli.js 文件,也就是说在此之前的步骤只是为了找到cli.js文件,在此之后,webpack-cli 才发挥作用。

同时,webpack.js 文件也做了一些辅助判断,首先查看你是否安装了webpack-cli,如果没有安装,就会询问你是否安装(或手动安装)该包,如果选择不安装,那么程序运行到这就停止了。

接着打开webpack-cli/bin/cli.js

#!/usr/bin/env node
​
"use strict";
​
const importLocal = require("import-local");
const runCLI = require("../lib/bootstrap");
​
if (!process.env.WEBPACK_CLI_SKIP_IMPORT_LOCAL) {
  // Prefer the local installation of `webpack-cli`
  if (importLocal(__filename)) {
    return;
  }
}
​
process.title = "webpack";
​
runCLI(process.argv);

该文件的主要函数为 runCLI,而 runCLI 又来自 bootstrap.js 文件,打开 bootstrap.js 文件

const WebpackCLI = require("./webpack-cli");
​
const runCLI = async (args) => {
  // Create a new instance of the CLI object
  const cli = new WebpackCLI();
​
  try {
    await cli.run(args);
  } catch (error) {
    cli.logger.error(error);
    process.exit(2);
  }
};
​
module.exports = runCLI;

注意,到了这里才真正用到了 webpack-cli 暴露出的接口,cli.run(args) 用来处理命令行参数,此时args参数为:

[
  'E:\nodejs\node.exe',
  'D:\webpack\node_modules\webpack\bin\webpack.js',
  '--config',
  'wk.config.js'
]

最终,从以上整个过程,我们可以知道 webpack-cli 是用来处理命令行参数,并通过参数构建 compiler 对象,然后才是对代码进行打包的过程。

这同时也解决了前文提出的问题,为什么webpack-cli对于文件打包不是必需的。 既然 webpack-cli

只是为了处理命令行参数,那我们同样可以构建自己的cli来处理参数,比如 lyx-cli。在第三方框架中,React 和 Vue(未使用Vite的版本)也没有使用 webpack-cli.

Reference

到此这篇关于webpack-cli在webpack打包中的作用小结的文章就介绍到这了,更多相关webpack webpack-cli作用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Webpack-cli安装成功后查看webpack -v报错案例详解

    目录 问题 1. 安装webpack webpack-cli 2. 查看webpack 版本 解决 1. 查看node版本 2. 升级npm 3. 查看webpack版本 问题 1. 安装webpack webpack-cli npm install -g webpack webpack-cli 2. 查看webpack 版本 webpack -v 报错 /usr/local/lib/node_modules/webpack/lib/cli.js:66 .replace( ^ SyntaxErr

  • 浅谈webpack和webpack-cli模块源码分析

    webpack4与webpack3的区别 webpack4.0 以后,似乎执行方式就发生了改变,不再是 webpack 一波流,而是多了一个 webpack-cli.webpack3中webpack-cli是合在webpack中.所以在命令行运行 webpack 命令的同时,会提示让你再装一个 webpack-cli. 执行脚本到打包结束流程 1.当我们安装了webpack模块后,就会在node_modules/.bin目录下生成一个webpack.webpack.cmd,webpack是lin

  • webpack-cli在webpack打包中的作用小结

    目录 webpack & webpack-cli webpack Introduction webpack-cli 详解 Reference webpack & webpack-cli webpack Introduction webpack 是一个静态的模块化打包工具,为现代的JavaScript应用程序服务 打包 bundler:webpack可以帮助我们进行打包,所以它是一个打包工具 静态的static:将代码打包成最终的静态资源(部署到静态服务器) 模块化module:webpac

  • 详解webpack分离css单独打包

    这篇文章只写了如何把CSS打包成一个CSS文件,没有讲解如何打包成多个CSS文件,经简友提点,这里添加上了 打包成多个CSS文件的方法. 瞎扯 webpack 把所有的资源都当成了一个模块, CSS,Image, JS 字体文件 都是资源, 都可以打包到一个 bundle.js 文件中. 但是有时候需要把样式 单独的打包成一个文件, 然后放到 CND上, 然后缓存到浏览器客户端中 一.extract-text-webpack-plugin 使用方法 这个操作很简单的,只需要一个插件就好了,就是e

  • vue cli构建的项目中请求代理与项目打包问题

    在上篇文章给大家介绍了vue-cli webpack模板项目搭建及打包时路径问题的解决方法,可以点击查看. vue-cli构建的项目中,生产模式下的打包路径.与生产模式下的请求代理简单示意 总结 以上所述是小编给大家介绍的vue cli构建的项目中请求代理与项目打包问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持! 您可能感兴趣的文章: Vue-cli创建项目从单页面到多页面的方法 Vue使用vue-cli创建项目 vue-cli项

  • vue-cli+webpack在生成的项目中使用bootstrap实例代码

    在html页面中加入bootstrap是很方便,就是一般的将css和js文件通过Link和Script标签就行. 那么在一个用vue-vli生成的前端项目中如何加入?因为框架不一样了,略微要适应一下. 脚手架生成项目 执行命令用webpack模板生成一个名为vuestrap的项目(名字任意) vue init webpack vuestrap 在出现的各提示选项中,没什么要求,为了方便,把不用的ESLint,unit tests,e2e都关掉(这些选项都随意). ? Project name v

  • Webpack实现按需打包Lodash的几种方法详解

    前言 在数据操作时,Lodash 就是我的弹药库,不管遇到多复杂的数据结构都能用一些函数轻松拆解. ES6 中也新增了诸多新的对象函数,一些简单的项目中 ES6 就足够使用了,但还是会有例外的情况引用了少数的 Lodash 函数.一个完整的 Lodash 库,即使是压缩后,现最新版本也有 71k 的体积.不能为了吃一口饭而买下一个饭店啊. 针对这个问题,其实已经有很多可选方案了. 函数模块 Lodash 中的每个函数在 NPM 都有一个单独的发布模块.NPM: results for 'loda

  • 详解webpack模块化管理和打包工具

    本篇文章主要介绍了详解webpack模块化管理和打包工具,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 Webpack简介 webpack是当下最热门的前端资源模块化管理和打包工具. 它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际 需要的时候再异步加载.通过 loader  的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块. AMD 模块. ES6 模块.CSS.图片. JSON.

  • webpack分离css单独打包的方法

    本文介绍了webpack分离css单独打包的方法,分享给大家,具体如下: CHANGELOG 2018-02-08 14:46:06 刚看了下,网上查了 webpack单独打包css,找到的文章,本文比较靠前,但是由于写的比较混乱,因此重新整理一下内容,更通俗易懂一点. 2018-02-01 14:45:23 由于这篇文章只写了如何把CSS打包成一个CSS文件,没有讲解如何打包成多个CSS文件,经简友提点,这里添加上了 打包成多个CSS文件的方法. 2016-05-17 11:55 刚学习web

  • 一篇文章带你浅入webpack的DLL优化打包

    一.前言 我们在使用第三方包的时候,一般内部的代码都不会变,但是当webpack打包的时候,还是回去处理第三方包.我们是否可以利用一些方法来改进呢?我们可以先对第三方包处理,然后再打包. 二.实战 1.初始化 npm init 2.局部安装webpack npm i -D webpack 3.编辑package.json 加入一行代码,方便运行命令, "start": "webpack --config webpack.config.js" { "name

  • Mysql中explain作用详解

    一.MYSQL的索引 索引(Index):帮助Mysql高效获取数据的一种数据结构.用于提高查找效率,可以比作字典.可以简单理解为排好序的快速查找的数据结构. 索引的作用:便于查询和排序(所以添加索引会影响where 语句与 order by 排序语句). 在数据之外,数据库还维护着满足特定查找算法的数据结构,这些数据结构以某种方式引用数据.这样就可以在这些数据结构上实现高级查找算法.这些数据结构就是索引. 索引本身也很大,不可能全部存储在内存中,所以索引往往以索引文件的形式存储在磁盘上. 我们

  • Dom在ajax技术中的作用说明

    今天我们来讲一下Dom在ajax技术中的作用.当你使用ajax向服务端发出请求,并返回数据到客户端时.你是怎么 将这些返回的数据显示到网页上的?毫无疑问的你使用的是Dom,利用Dom的各个指令.来向html中添加你想要显示的内容.例如:getElementById也或是getElementsByTagName查找元素 innerHTML显示内容?还是appendChild添加元素?当然创建一个不存在的元素也是可以的createElement可以轻松实现. 如果你想要创建够酷够炫的ajax效果.这

随机推荐