欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

【Webpack 学习】1.Webpack的理解与使用

程序员文章站 2022-07-12 20:16:32
...

什么是 webpack

   webpack 是德国开发者 Tobias Koppers 开发的模块加载器

  在 webpack 中所有的文件都将被当做模块使用。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有的这些模块打包成一个或多个 bundle。如图所示:
【Webpack 学习】1.Webpack的理解与使用

与 Gulp/Grunt 对比

  webpack 与 Gulp/Grunt 是没有对比性的,因为Gulp/Grunt是一种能够优化前端的开发流程的工具,而 webpack 是一种模块化的解决方案。不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具。

  Grunt和Gulp的工作方式是:在一个配置文件中,指明对某些文件进行类似编译,组合,压缩等任务的具体步骤,工具之后可以自动替你完成这些任务。

【Webpack 学习】1.Webpack的理解与使用

  webpack的工作方式是:把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个(或多个)浏览器可识别的JavaScript文件。

【Webpack 学习】1.Webpack的理解与使用

webpack的安装及使用 (Demo1 Source

  1. 通过 npm 全局安装 webapck
    $ npm install -g webpack
  1. 创建项目并初始化 package.json 文件
    $ mkdir demo1 && cd demo1
    $ npm init
  1. 在项目中安装 webpack
    $ npm install webpack --save-dev

–save-dev 是开发时候依赖的东西,–save 是发布之后还依赖的东西

  1. 在项目中创建如下文件结构
.        
├── index.html  // 显示的网页
├── main.js    // webpack 入口
└── bundle.js // 通过 webpack 命令生成的文件,无需创建
  1. 通过命令对项目中依赖的js文件进行打包
    # webpack 要打包的 js 文件名  打包后生成的js文件名
    $ webpack main.js bundle.js

  在webpack命令后面还可以加入以下参数

  • --watch 实时打包
  • --progress 显示打包进度
  • --display-modules 显示打包的模块
  • --display-reasons 显示模块包含在输出中的原因

  更多参数可以通过命令 webpack --help 查看