"本质上，Webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler).

当Webpack处理应用程序时，他会递归地创建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将这些模块打包成一个或多个包(bundle).

======== 安装Webpack =========

·

先创建一个文件夹（如：webpack-demo），进入文件夹后执行安装命令.

安装命令：npm install -g webpack 或者 npm install web pack --save

可简写为：npm i -g webpack

·

补充：如果是Mac系统，则需要加上sudo（权限问题，包括本文中后续的所有命令），即：sudo npm install -g webpack，回车后输入当前用户的密码即可.

·

安装完成以后，我们可以看到，在package.json文件中，已经有Webpack了：



图中安装的webpack-cli工具可用于在命令行运行Webpack.

@

关于模块化编程

什么是模块化编程？

模块化编程是一种软件设计技术.

在模块化编程中，开发者将程序分解成离散红能快，并称之为模块.

每个模块具有比完整程序更小的接触面，使得校验、调试、测试轻而易举.

精心编写的模块提供了可靠的抽象和封装界限，使得应用程序中每个模块都具有条理清楚的设计和明确的目的.

下面来参考一下某项目各个组件的分布结构：



可以看到，不同的业务逻辑，不同点的页面内容，应该分隔在不同的文件(模块)中，这样更加方便日后的调试与维护.

- - - - - - - - - - - - - - - - - - - - -

Node.js从一开始就支持模块化编程，然而在web，模块化的支持正缓慢到来.

在web，存在多种支持JavaScript模块化的工具，这些工具各有优势和限制.

Webpack正是从这些工具获得的经验和教训，而将模块的概念应用于项目中的任何文件.

- - - - - - - - - - - - - - - - - - - - -

为什么使用模块化编程？

模块化编程使我们能够把某一类功能组合成一个独立的文件，然后对外提供一个接口，这种方式更加简化了各个业务功能之间的协作关系，方便日后的维护和扩展.

Webpack的工作方式

Webpack会把我们的项目当做一个整体，通过一个给定的主文件（如: index.js），Webpack将从这个 给定的主文件 开始找到你的项目的所有依赖文件，使用loaders处理它们。最后打包成一个或多个浏览器可识别的JavaScript文件.

如下图所示：

三个重要的概念

======== 入口文件 =========

·

入口文件(entry point)指示Webpack应该使用哪个模块来作为构建其内部依赖图的开始.

进入入口起点后，Webpack会找出有哪些模块和库是入口起点(直接和间接)依赖的.

所有的依赖项随即被处理，最后输出到称之为bundles的文件中.

======== 出口文件 =========

·

出口文件告诉Webpack在哪里输出它所创建的bundles，以及如何命名这些文件，默认值为dist.

基本上，整个应用程序结构都会被编译到你指定的输出路径的文件夹中.

======== loader =========

·

loader使Webpack能够处理那些非JavaScript文件(webpack自身只理解JavaScript).

loader可以将所有类型的文件转换为Webpack能够处理的有效模块，然后我们便可以利用Webpack的打包能力对它们进行处理.

·

本质上，loader是将所有类型的文件转换为应用程序的依赖图和最终的bundle能直接引用的模块.

使用Webpack创建一个项目

下面，我们使用上面的目录结构，并根据Webpack的上述几个概念，来写一个简单的Demo程序.

首先，我们在webpack-demo目录下面创建一个src目录——用于存放我们程序的原始文件（如：src/index.js）.

然后，在webpack-demo目录下面创建一个index.html文件——用于使用打包后的出口文件.

新的目录结构如下：



准备就绪之后，我们开始在index.html文件中写入最基础的html代码：

  1. <!-- index.html -->
  2. <!DOCTYPE html>
  3. <html lang="en">
  4.   <head>
  5.     <meta charset="utf-8">
  6.     <title>Webpack Sample Project</title>
  7.   </head>
  8.   <body>
  9.     <div id='root'>
  10.     </div>
  11.     <script src="./dist/main.js"></script>
  12.   </body>
  13. </html>

这些基础代码便是为了引入打包后的js文件，Webpack4默认的输出文件为dist/main.js

然后我们在index.js文件中写入如下代码：

  1. // index.js
  2. let greeting = "Hello Webpack!";
  3. console.log(greeting);

最后，我们将在下面使用Webpack将该项目打包.

正式使用Webpack

这里我们将使用Webpack4打包，默认下载的就是Webpack4，Webpack3已基本不再使用了.

（补充：如果是Mac系统，则需要在命令前面加上sudo（权限问题），回车后输入当前用户的密码即可.）

======== 使用Webpacck3打包 =========

·

Webpack3可以在终端使用，基本使用方法(全局安装)如下：

web pack {entry file} {destination for bundled file}

·

指定入口文件后，Webpack将自动识别项目所依赖的其它文件.

不过需要注意的是：如果你的Webpack不是全局安装的，那么当你在终端中使用此命令时，需要额外指定其在node_modules中的地址.

·

Webpack3非全局安装的情况下打包：

./node_modules/.bin/webpack ./src/index.js destination/bundle.js

======== 使用Webpacck4打包 =========

·

Webpack4增加了模式区分，打包命令如下：

webpack --mode development(或production) 指定模式

·

两种模式：

development 开发者模式，打包默认不压缩代码.

production 生产者模式，上线时使用，会压缩代码，默认为此模式.

·

Webpack4固定入口目录为src，入口文件必须为index.js，打包后文件在新增的dist目录下，出口文件为main.js.

·

开始打包：

打包后可以看到，新的文件结构如下：



然后我们在浏览器中打开index.html文件的控制台，可以看到如下结果：

使用Webpack进行ES6的模块化编程

ES6引入了模块化编程的概念（关于ES6的新增语法，请参考此文献：ES6新增语法详述）.

下面，我们继续使用上面的demo程序来测试ES6中的模块化编程.

1.首先，我们在src目录下新建一个sayhello.js问价，并加入如下代码：

  1. // sayhello.js
  3. let huaqiangu = "您好，花千骨！";
  4. let baiqian = "您好，白浅！";
  5. let jinmi = "您好，锦觅！";
  7. export {huaqiangu, baiqian};
  9. export default jinmi;
  10. // 每个文件中只能有一个export default xx,
  11. // import会将没有命中的变量名映射到export default导出的数据上面

2.随后，我们在index.js文件中导入上面创建的sayhello.js文件：

  1. // index.js
  3. let greeting = "Hello Webpack!";
  4. console.log(greeting);
  6. // import {huaqiangu, baiqian} from "./sayhello.js";
  7. // 可不写文件后缀名：
  8. import {huaqiangu, baiqian} from "./sayhello";
  10. import jm from './sayhello';
  12. console.log('huaxiangu:', huaqiangu);
  13. console.log('baiqian:', baiqian);
  14. console.log('jm:', jm);

3.最后，我们重新打包项目，并在浏览器中打开index.html文件的控制台，查看如下：



好了，我们就学到这里吧.

"

【Webpack】的更多相关文章

  1. 【webpack】-- 模块热替换

    全称是Hot Module ReplaceMent(HMR),理解成热模块替换或者模块热替换都可以吧,和.net中的热插拔一个意思,就是在运行中对程序的模块进行更新.这个功能主要是用于开发过程中,对生 ...

  2. 【webpack】-- 样式加载

    加载css需要用到css-loader和style-loader css-loader将@import 和 url 处理成正规的ES6 import ,如果@import指向的是一个外部资源,css- ...

  3. 【webpack】webpack-dev-server生猛上手——让我们来搭一个webpack的微服务器吧！

      [前言]:因为最近在搞百度地图API的时候到了webpack的externals,才发现我之前都只是用webpack做一些搭建完项目后的"收尾工作"--即打包,而没有把它纳入到 ...

  4. 【webpack】流行的前端模块化工具webpack初探

    从开发文件到生产文件   有一天我突然意识到一个问题,在使用react框架搭建应用时,我使用到了sass/less,JSX模版以及ES6的语法在编辑器下进行开发,使用这些写法是可以提高开发的效率.可是 ...

  5. 【Webpack】320- Webpack4 入门手册（共 18 章）（下）

    介绍 1. 背景 最近和部门老大,一起在研究团队[EFT - 前端新手村]的建设,目的在于:帮助新人快速了解和融入公司团队,帮助零基础新人学习和入门前端开发并且达到公司业务开发水平. 本文也是属于[E ...

  6. 【Webpack】319- Webpack4 入门手册（共 18 章）（上）

    介绍 1. 背景 最近和部门老大,一起在研究团队[EFT - 前端新手村]的建设,目的在于:帮助新人快速了解和融入公司团队,帮助零基础新人学习和入门前端开发并且达到公司业务开发水平. 本文也是属于[E ...

  7. 【Webpack】315- 手把手教你搭建基于 webpack4 的 vue2 多页应用

    背景 前司和现司都会存在这种业务场景:有很多 H5 页面是不相关的,如果使用 SPA 的话,对于很多落地页和活动页不太友好,有一些纯前端页面加载过慢,所以就萌生了创建一个多页面 MPA 的框架. 起初 ...

  8. 【webpack】-- 自动刷新

    前端需要频繁的修改js和样式,且需要根据浏览器的页面效果不断的做调整:而且往往我们的开发目录和本地发布目录不是同一个,修改之后需要发布一下:另外一点就是并不是所有的效果都可以直接双击页面就能看到,我们 ...

  9. 关于【Webpack】的入门使用

    注:节选自http://www.jianshu.com/p/42e11515c10f 1.安装 Webpack可以使用npm安装,新建一个空的练习文件夹(此处命名为webpack sample pro ...

  10. 【webpack】中file-loader和url-loader使用方法

    file-loader 可以指定要复制和放置资源文件的位置,以及如何使用版本哈希命名以获得更好的缓存.此外,这意味着 你可以就近管理图片文件,可以使用相对路径而不用担心部署时 URL 的问题.使用正确 ...

随机推荐

  1. 销量下跌、质量问题不断，小鹏G3“维权门”之后的日子不好过

    编辑 | 于斌 出品 | 于见(ID:mpyujian) 小鹏汽车何时能站上国内新能源汽车行业C位?这是于见之前提出过的问题.随着上个月小鹏汽车终于发布了2020款小鹏G3,从该款产品的用户反馈及销量 ...

  2. Copy Paste DWG to older 3ds Max

    Hi, This is quick tutorial: how to install Auto Cad scripts to be able to copy from newer Auto Cad t ...

  3. c# 让接口实现方法

    interface IMy { } static class MyFunc { public static void Func<T>(this T obj) where T : IMy { ...

  4. Java Set集合的详解

    一,Set Set:注重独一无二的性质,该体系集合可以知道某物是否已近存在于集合中,不会存储重复的元素 用于存储无序(存入和取出的顺序不一定相同)元素,值不能重复. 对象的相等性 引用到堆上同一个对象 ...

  5. Codeforces Round #600 (Div. 2) B. Silly Mistake

    #include<iostream> #include<map> #include<set> #include<algorithm> using nam ...

  6. 《深入理解Java虚拟机》读书笔记九

    第十章 早期(编译期)优化 1.Javac的源码与调试 编译期的分类: 前端编译期:把*.java文件转换为*.class文件的过程.例如sun的javac.eclipseJDT中的增量编译器. JI ...

  7. 题解【洛谷P1725】琪露诺

    题面 典型的单调队列优化\(\text{DP}\)题. 不难想到设\(dp_i\)表示以\(i\)结尾能得到的最大冰冻指数. 这样设的转移方程也很简单:\(dp_i=\max\left\{ dp_j+ ...

  8. 用户登录（php）

    <!DOCTYPE HTML><html><head><meta charset="utf-8"><script type=& ...

  9. 安装破解pycharm2018版

    1.安装2018版pycharm: 2.把破解补丁放在一个地方(目录无中文,无空格): 3.在 Pycharm安装目录的\bin目录下找到 pycharm.exe.vmoptions 和 pychar ...

  10. RGBA alpha 透明度混合算法

    RGBA alpha 透明度混合算法 .分类: 图像处理 Ps技术 2011-05-25 09:11 1112人阅读 评论(0) 收藏 举报 Alpha 透明度混合算法,网上收集整理,分成以下三种: ...