webpack系列之基本概念和使用

时间 2019-11-06

标签 webpack 系列基本概念使用繁體版

原文原文链接

webpack系列之基本概念和使用

欢迎你们访问个人github blog查看更多文章php

前言

最近在作vue项目，天然而然就接触到了webpack这个打包工具，借此把一些总结分享出来。
webpack知识点比较多，打算作为一个系列分篇讲解，今天先分享第一篇：webpack系列之基本概念和使用。html

一. 什么是webpack

webpack能够看作是模块打包工具：它将各类静态资源（好比：JavaScript 文件，图片文件，样式文件等）视为模块，它可以对这些模块进行解析优化和转换等操做，最后将它们打包在一块儿，打包后的文件可用于在浏览器中使用。vue

下面看一个图可以很清晰的展示这个打包流程：
node

二. 为何使用webpack

先举一个你们都很熟悉的例子：webpack

一台计算机内部须要不少不少根线来链接单元器件，假如每条线不按规则摆放，将要占用极大的空间，且很差管理。幸亏人们发明了集成电路，才有了现代计算机的板卡。

你们看，经过这个板卡，全部的元器件，电线都按规则摆放，规整有序，很大的节省了空间，并且也很方便管理。git

你能够把webpack看作是这个板卡，项目中的各类各样的JavaScript程序和依赖包能够当作是计算机内部须要的不少根线和单元器件，webpack经过loader将这些JavaScript程序和依赖包都转换成JavaScript 模块，就比如咱们将单元器件和线按照必定的规则摆放，放在固定的位置方便管理，这样经过webpack咱们就把一个项目中的复杂程序细化为了各类具备依赖关系的模块，从而使咱们的项目管理起来更加方便。github

`webpack`优点

webpack能替代部分 grunt/gulp 的工做，好比打包、压缩混淆、图片转base64等，并且还具备如下几点优点：web

webpack 是以 commonJS 的形式来书写脚本的，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移
能被模块化的不只仅是 JS 了
扩展性强，具备强大的插件（Plugin）接口，使用起来比较灵活，特别是支持热插拔的功能很实用
能够将代码切割成不一样的块（chunk），每一个块包含一个或多个模块，块能够按需被异步加载，下降了初始化时间
......

三. 基本概念

在正式讲解怎么使用webpack以前，你须要先理解四个核心概念：npm

入口(entry)
输出(output)
loader
插件(plugins)

本篇作为一个开门篇，先讲解前两个核心概念：入口(entry)和输出(output)。json

3.1 入口(entry)

入口起点(entry point)指示 webpack 应该使用哪一个模块作为入口文件，来做为构建其内部依赖图的开始。进去入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的，每一个依赖项随即被处理，最后输出到称之为 bundles 的文件中。

3.2 出口(output)

output 属性告诉 webpack 在哪里输出它所建立的 bundles，以及如何命名这些文件，这些均可以在webpack的配置文件中指定，后面的案例会给你们介绍怎么去配置。

四.案例

在讲了webpack是什么，为何使用webpack，以及两个核心概念后，咱们来作一个小案例来真实感觉一下。

4.1 基本安装

咱们建立一个目录，初始化npm，而且在本地使用npm安装webpack

mkdir webpack-demo && cd webpack-demo
npm init
npm install --save-dev webpack

4.2 目录结构

├── node_modules
├── dist
│   └── index.html
├── package-lock.json
├── package.json
└── src
    └── index.js

4.3 修改入口文件

打开src\index.js，添加以下代码：

var element = document.createElement('div');
   element.innerHTML = 'webpack demo！';
   document.body.appendChild(element);

4.4 执行打包命令

➜  webpack-demo webpack src/index.js dist/bundle.js
Hash: 2432d7e2ecc1d3cb0c5b
Version: webpack 3.10.0
Time: 63ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.65 kB       0  [emitted]  main
   [0] ./src/index.js 179 bytes {0} [built]

打开dist目录，你会发现打包后的文件bundle.js已经生成。

4.5 引入`bundle.js`

打开dist\index.html添加以下代码：

<html>
  <head>
    <title>webpack练习</title>
  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>

4.6 效果

直接浏览器打开 index.html：

4.7 使用配置文件

可能你们看到打包命令后会有疑问：

这个打包命令有点长，这样岂不是很容易出错?

的确，webpack有许多比较高级的功能均可以经过命令行模式去实现，可是这样很不方便，且容易出错，更好的办法就是定义个配置文件，咱们能够把全部的与打包相关的信息放在里面。这比在终端(terminal)中输入大量命令要高效的多。

那该怎么作呢？

咱们新建一个webpack配置文件：webpack.config.js:

module.exports = {
    devtool: 'eval-source-map',
    entry:  __dirname + "/src/index.js",  //入口文件
    output: {
        path: __dirname + "/dist",  //打包后的文件存放的地方
        filename: "bundle.js" //打包后输出文件的文件名
    }
}

命令行执行只须要：webpack便可实现打包：

➜  webpack-demo webpack
Hash: 37ae154d97c486e04d87
Version: webpack 3.10.0
Time: 73ms
    Asset    Size  Chunks             Chunk Names
bundle.js  3.4 kB       0  [emitted]  main
   [0] ./src/index.js 179 bytes {0} [built]

这条命令会自动引用webpack.config.js文件中的配置选项进行打包，再次访问index.html，会发现第一种打包方式后输出一样的结果，可是简化了命令，也下降了因命令行过长而致使的错误。

注意：

webpack.config.js是 webpack默认的配置文件名，若是咱们的配置文件不叫这个名字时，咱们须要借助一个 --config 参数来实现打包（ --config 参数来指定去找哪一个配置文件）：

webpack --config `webpack.filename.js`

五.总结

第一篇先讲解一下webpack的基本概念，以及经过一个小案例让你们感觉一下webpack的简单使用，下一篇会深刻一些，讲解webpack中的另外一个重要概念：Loader。

欢迎你们访问个人github blog查看更多文章

webpack系列之基本概念和使用

webpack系列之基本概念和使用

前言

一. 什么是webpack

二. 为何使用webpack

webpack优点

三. 基本概念

3.1 入口(entry)

3.2 出口(output)

四.案例

4.1 基本安装

4.2 目录结构

4.3 修改入口文件

4.4 执行打包命令

4.5 引入bundle.js

4.6 效果

4.7 使用配置文件

五.总结

`webpack`优点

4.5 引入`bundle.js`