`

webpack 使用 CLI

阅读更多

安装

$ npm install webpack -g

 

基本使用

webpack <entry> <output>
  •  entry

传递文件或查询字符串。你可以传递多个条目(每个条目都在启动时加载)。

如果你通过键值对的形式 <name>=<request> 你可以创建一个额外的切入点。

将会被映射到配置选项的entry上

 

  • output

传递一个文件路径。

将会被映射到配置选项的output.path和output.filename上。

 

配置选项

很多配置选项都可以通过命令行设置。例如:--debug 对应 debug:true,或者 --output-library-target 对应 output.libraryTarget。

如果你没有传入任何选项,你将的到一个所有配置选项的列表。

 

插件

可以通过命令行设置一些插件,例如:--define <string>=<string> 对应 DefinePlugin。

 

Development shortcut -d

等同于 
--debug --devtool source-map --output-pathinfo
 

Production shortcut -p

等同于 

--optimize-minimize --optimize-occurence-order

 

Watch mode --watch

监测所有依赖并在有变化时重新编译代码。

 

配置文件 --config example.config.js

设置读取制定的配置文件。如果你不想使用默认的配置文件“webpack.config.js”,可以使用这个设置。

 

显示参数选项

 

  • --progress

显示编译进度标准错误。

 

  • --json

在标准输出中使用json格式输出。

提示:尽量把结果传递给对应的数据解析工具。

 

  • --colors

用颜色来显示统计信息。

 

  • --sort-modules-by ,--sort-chunks-by ,--sort-assets-by

对列表中的modules/chunks/assets按列排序。

 

  • --display-chunks

将模块分块显示。

 

  • --display-reasons

显示为什么包含模块的更多详细信息。

 

  • --display-error-details

显示更多错误信息。例如:显示在解析模块时尝试了哪些路径。

 

  • --display-modules

 显示隐藏模块。位于文件夹“node_modules",”bower_components“,”jam“,”components"中的模块默认在输出中是隐藏的。

分享到:
评论

相关推荐

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

    webpack是一个模块打包器,它用于将多个模块打包成一个或多个包,以供网页或应用使用。webpack-cli则是webpack的命令行界面工具,用于从命令行运行webpack。webpack 4与webpack 3相比,在执行方式上有所变化,...

    webpack打包

    webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块...

    webpack-cli:Webpack的命令行界面

    我们使用webpack CLI组织为一个多软件包存储库。 每个命令在packages文件夹中都有一个专用的子文件夹。 这是CLI所提供命令的摘要。 指令 支持开发人员是webpack CLI的一项重要任务。 因此,webpack CLI为许多常见...

    webpack-vue:使用webpack搭建vue项目

    使用webpack搭建vue项目 1.创建一个空项目 npm init -y 2.下载webpack,webpack-cli 目前可以使用webpack5不过还是建议使用webpack4 npm i webpack@4.44.2 webpack-cli@3.3.11 -D 3.配置webpack 1.根目录下创建...

    webpack4整合vue

    - **安装**:首先,需要全局安装最新版本的 `webpack` 和 `webpack-cli`,以及局部安装 `vue-loader` 和 `vue-template-compiler`。 - **配置**:在 `webpack.config.js` 中,设置 `entry` 为 Vue 应用的主入口...

    基于vue20webpack40cli30开发的移动端M站卖座电影

    综上所述,这个项目“基于vue20webpack40cli30开发的移动端M站卖座电影”利用了现代前端技术栈,结合Vue 2.0的组件化、Webpack 4.0的模块打包以及Vue CLI 3.0的便捷脚手架,构建了一个面向移动设备的电影销售平台。...

    webpack-cli:webpack-cli

    要开始使用webpack CLI,首先需要安装它。对于全局安装,可以使用npm(Node.js包管理器)运行以下命令: ```bash npm install -g webpack webpack-cli ``` 对于本地安装,将其作为项目依赖添加: ```bash npm ...

    webpack4.x基础入门

    Please install 'webpack-cli' in addition to webpack itself to use the CLI. -&gt; when using npm: npm install webpack-cli -D -&gt; when using yarn: yarn add webpack-cli -D ``` 4. **安装 webpack-cli** ...

    webpack-command:[不推荐使用]轻巧,模块化且自以为是的webpack CLI,可提供卓越的体验

    请使用webpack-cli 。 如果webpack-cli中未实现任何功能,请随时创建问题。 为什么不推荐使用webpack-command ? webpack-cli非常稳定,并且具有更多功能。 对于开发人员而言,两个CLI会产生误导。 难以维护具有...

    vue-cli+webpack

    Vue CLI 和 Webpack 是前端开发中的两个重要工具。Vue CLI(Vue.js 的命令行界面工具)是基于 Vue.js 生态系统构建快速开发环境的利器,而 Webpack 是一个模块打包器,广泛应用于现代 JavaScript 应用程序的构建过程...

    vue cli webpack中使用sass的方法

    Vue CLI Webpack 中使用 SASS 的方法 在 Vue CLI 项目中使用 SASS 需要安装相应的依赖项和配置loader,下面将详细介绍 Vue CLI Webpack 中使用 SASS 的方法。 安装依赖 首先,需要安装 SASS 相关的依赖项,使用 ...

    webpack-scaffold-pwa:用于PWA的Webpack支架

    我们希望看到您使用它,并向我们提供您的反馈意见,并帮助您完善该项目,并使PWA的创建变得更加轻松webpack脚手架pwa Webpack-cli插件神奇地 :sparkles: 使您的应用程序成为PWA最初设定初始化npm $ npm init安装...

    开箱即用的webpack4vuecli3multipageless多页面脚手架

    总的来说,Webpack 4 和 Vue CLI 3 结合使用,可以高效地搭建和管理多页面的Less项目,提供了一套完整的前端开发解决方案,极大地提高了开发效率和项目的可维护性。理解并熟练运用这些工具,对于现代前端开发者来说...

    webpack使用Vue学习案例

    6. **运行Webpack**:使用npm run build或npm run serve(如果使用Vue CLI)命令,Webpack会编译项目,生成可用于部署的静态资源。 7. **状态管理和路由**:如果项目需要,可以引入Vuex来管理全局状态,使用Vue ...

    webpack-cli-read:原始阅读

    了解其配置选项,如`contentBase`、`hot`等,以及如何结合CLI使用。 7. **性能优化**:学习如何通过SplitChunksPlugin进行代码分割,减少重复的库代码;通过SourceMap支持调试;以及如何利用Tree Shaking去除未使用...

    将vuecli2项目升级webpack4项目模板

    这篇详细的知识点解析将指导你如何将基于 Vue CLI 2 的项目手动升级到使用 Webpack 4 的项目模板。 1. **Webpack 4 的主要变化**: - **性能提升**:Webpack 4 引入了更快的编译速度和更小的打包体积,这得益于对 ...

    使用webpack运行终端命令

    通过全局安装 Webpack 和 Webpack CLI,可以在任何项目中使用它们: ```bash npm install -g webpack webpack-cli ``` 对于项目内部的依赖,需要在项目根目录创建 `package.json` 文件,然后局部安装 Webpack 和 ...

    vue2 + webpack5相适配的 能成功打包的 package.json 文件

    vue2 项目 + webpack 打包工具,是一个非常经典的组合,但是在配置的过程中会老是出问题,例如:webpack、webpack-cli、vue-loader、vue-template-compiler、css-loader的版本的设定就是一个匹配的大问题;...

    详解如何使用webpack打包JS

    如何使用webpack打包JS 我们在命令行中输入:webpack -h看看webpack的命令行大全 Usage: webpack-cli [options] webpack-cli [options] --entry &lt;entry&gt; --output webpack-cli [options] &lt;entries&gt; --output ...

Global site tag (gtag.js) - Google Analytics