【Webpack】1.入门及简单使用
发布于 3 年前 作者 SilenceHVK 2704 次浏览 来自 分享

【Webpack】1.入门及简单使用 【Webpack】2.四个核心概念及使用 【Webpack】3.多入口设置与 html-webpack-pugin 插件详解

什么是 webpack

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

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

与 Gulp/Grunt 对比

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

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

Grunt和Gulp工作图

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

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. 在项目中创建如下文件结构 <pre> .
    ├── index.html // 显示的网页 ├── main.js // webpack 入口 └── bundle.js // 通过 webpack 命令生成的文件,无需创建 </pre>

  2. 通过命令对项目中依赖的js文件进行打包

    # webpack 要打包的 js 文件名  打包后生成的js文件名
    $ webpack main.js bundle.js

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

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

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

2 回复

链接图片有问题……

@AserSayHi 谢谢提醒,已经重新上传了图片

回到顶部