汪图南
  • RAG

    • RAG
  • 快速入门
  • 高级技巧
前端面试之道
  • 打包工具

    • Webpack
    • Rollup
  • TypeScript

    • TypeScript基础
    • TypeScript类型挑战
  • CSS预编译器

    • SASS
  • 自动化测试

    • Vue应用测试
  • Vue2.0源码分析
  • Vue3.0源码分析
  • 数据结构和算法(基础)
  • LeetCode(刷题)
  • JavaScript书籍

    • 你不知道的JavaScript(上)
    • 你不知道的JavaScript(中下)
    • JavaScript数据结构和算法
    • JavaScript设计模式与开发实践
    • 深入理解ES6
  • Git书籍

    • 精通Git
Github
  • RAG

    • RAG
  • 快速入门
  • 高级技巧
前端面试之道
  • 打包工具

    • Webpack
    • Rollup
  • TypeScript

    • TypeScript基础
    • TypeScript类型挑战
  • CSS预编译器

    • SASS
  • 自动化测试

    • Vue应用测试
  • Vue2.0源码分析
  • Vue3.0源码分析
  • 数据结构和算法(基础)
  • LeetCode(刷题)
  • JavaScript书籍

    • 你不知道的JavaScript(上)
    • 你不知道的JavaScript(中下)
    • JavaScript数据结构和算法
    • JavaScript设计模式与开发实践
    • 深入理解ES6
  • Git书籍

    • 精通Git
Github
  • Webpack

    • 说明
    • 追本溯源
    • 安装
    • 起步
    • 打包静态资源
    • Webpack核心
    • Webpack进阶
    • Webpack配置案例
    • Webpack性能优化
    • 编写自己的Loader
    • 编写自己的Plugin

安装

全局安装

注意

如果你只是想做一个 Webpack 的 Demo 案例,那么全局安装方法可能会比较适合你。如果你是在实际生产开发中使用,那么推荐你使用本地安装方法。

全局安装命令

参数说明

webpack4.0+的版本,必须安装webpack-cli,-g命令代表全局安装的意思

$ npm install webpack webpack-cli -g

卸载

参数说明

通过npm install安装的模块,对应的可通过npm uninstall进行卸载

$ npm uninstall webpack webpack-cli -g

本地安装(推荐)

参数说明

本地安装的Webpack意思是,只在你当前项目下有效,而通过全局安装的Webpack,如果两个项目的Webpack主版本不一致,则可能会造成其中一个项目无法正常打包。本地安装方式也是实际开发中推荐的一种Webpack安装方式。

$ npm install webpack webpack-cli -D
# 等价于
$ npm install webpack webpack-cli --save-dev

版本号安装

参数说明

如果你对Webpack的具体版本有严格要求,那么可以先去Github的Webpack仓库查看历史版本记录或者使用npm view webpack versions查看Webpack的npm包历史版本记录

# 查看webpack的历史版本记录
$ npm view webpack versions

# 按版本号安装
$ npm install webpack@4.25.0 -D
最后更新时间: 2025/5/24 09:00
贡献者: wangtunan
Prev
追本溯源
Next
起步