webpack学习

webpack

说起 Webpack，大家都知道这是一个模块化构建(打包)工具，那么究竟什么是模块化呢？

模块化

模块化是指解决一个复杂问题时自顶向下逐层把系统划分成若干模块的过程，有多种属性，分别反映其内部特性。（百度百科）

模块化被越来越多的应用到我们的日常生活中，在我的印象中，小时候家电（比如收音机、电视）坏了都是拿到店里去找老师傅维修，现在家电都是模块化的，检测下哪里坏了直接换个新模块就可以了，由此可见，模块化不仅仅是个前端概念（相反，前端模块化也是这些年刚刚被得到重视的），我们生活场景中大量的充斥着模块化，让我们的生活效率更高。

前端模块化一般指得是 JavaScript 的模块，最常见的是 Nodejs 的 NPM 包，每个模块可能是最小甚至是最优的代码组合，也可能是解决某些问题有很多特定模块组成的大模块。如果没有模块化，可能大家编写代码当中遇见最多的就是复制（copy），当我们需要某个功能的代码时，自己由之前在哪个项目写过，那么我们就会 copy 过来，copy 多了，自然代码的可维护性就会下降。

我们所接触的模块化开发有CommonJS和ES6 Module规范。此外还有AMD、CMD、UMD（兼容AMD和CMD）

说起模块化又不得不提到一个词叫做组件化

组件化和模块化的区别

Tips：大家可能也经常听到组件化这个名词，模块化一般指的是可以被抽象封装的最小/最优代码集合，模块化解决的是功能耦合问题；组件化则更像是模块化进一步封装，根据业务特点或者不同的场景封装出具有一定功能特性的独立整体；另外，前端提到组件化更多的是具有模板、样式和 js 交互的 UI 组件。

工程化

当我们开发的 Web 应用越来越复杂的时候，会发现我们面临的问题会逐渐增多：

  1. 模块多了，依赖管理怎么做；
  2. 页面复杂度提升之后，多页面、多系统、多状态怎么办；
  3. 团队扩大之后，团队合作怎么做；
  4. 怎么解决多人研发中的性能、代码风格等问题；
  5. 权衡研发效率和产品迭代的问题。

这些问题就是软件工程需要解决的问题。工程化的问题需要运用工程化工具来解决，得益于 Nodejs 的发展，前端这些年在工程化上取得了不俗的成绩。前端工程化早期，是以 Grunt、Gulp 等构建工具为主的阶段，这个阶段解决的是重复任务的问题，它们将某些功能拆解成固定步骤的任务，然后编写工具来解决，比如：图片压缩、地址添加 hash、替换等，都是固定套路的重复你性工作。

而现阶段的 Webpack 则更像是从一套解决 JavaScript 模块化依赖打包开始，利用强大的插件机制，逐渐解决前端资源依赖管理问题，依附社区力量逐渐进化成一套前端工程化解决方案。

什么是 webpack

本质上，Webpack 是一个现代 JavaScript 应用程序的静态模块打包器（static module bundler）。在 Webpack 处理应用程序时，它会在内部创建一个依赖图（dependency graph），用于映射到项目需要的每个模块，然后将所有这些依赖生成到一个或多个 bundle。

像 Grunt、Gulp 这类构建工具，打包的思路是：遍历源文件→匹配规则→打包，这个过程中做不到按需加载，即对于打包起来的资源，到底页面用不用，打包过程中是不关心的。

webpack 跟其他构建工具本质上不同之处在于：webpack 是从入口文件开始，经过模块依赖加载、分析和打包三个流程完成项目的构建。在加载、分析和打包的三个过程中，可以针对性的做一些解决方案，比如code split（拆分公共代码等）。

当然，Webpack 还可以轻松的解决传统构建工具解决的问题：

  • 模块化打包，一切皆模块，JS 是模块，CSS 等也是模块；
  • 语法糖转换：比如 ES6 转 ES5、TypeScript；
  • 预处理器编译：比如 Less、Sass 等；
  • 项目优化：比如压缩、CDN；
  • 解决方案封装：通过强大的 Loader 和插件机制，可以完成解决方案的封装;

webpack-cli体验零配置打包

温故而知新，可以为师矣。

本节默认认为已经安装过Node和Npm.开发IDE使用的是WebStorm 2018 3.6

打造一个可以转换ES6为ES5 以及 支持图片(png,jpg,gif,webp)、less、sass/scss的webpack配置项，支持修改项目文件自动更新的功能。

全局安装

npm install webpack webpack-cli -g

初始化项目

npm init -y

{
  "name": "demo1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
  }
}

这里面包含了dependencies为项目的依赖在通过npm install XXX -S或者npm install yyy --save会将xxx及版本号显示在这个位置

devdependencies为开发环境依赖通过npm install yyy -D或者npm install yyy --dev-save

创建src/main.js和src/index.html

需求描述，通过jquery实现 ul>li无序列表中li的隔行换色功能。

安装jquery 项目中需要使用

npm install jquery -S

实现隔行换色

src/main.js

import $ from "jquery"
$("ul li:even").css({background:'red'})
$("ul li:odd").css({background:'pink'})

执行命令

webpack src/main.js -o dist/bundle.js

目录结构

dist
|   ├─bundle.js
src
|   ├─main.js
|   ├─index.html
package.json

修改index.html引入打包后的js

……
<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<script src="../dist/bundle.js"></script>
……

章结

发现，我们要手动把js代码引入，并且要手动打开浏览器去查看网页。等我们后面学到webpack-dev-server中的html-webpack-plugin插件去解决。

项目源码

git clone https://github.com/highh5/webpack.git -b lesson-01

webpack结合npm scripts

我们后面会不断的修改项目文件，每次修改完要重新执行webpack src/main.js -o dist/bundle.js命令。感觉 命令比较长，比较繁琐。

安装本地项目依赖

npm install webpack webpack-cli -D

{
  "name": "demo1",
  "version": "1.0.0",
  "dependencies": {
    "jquery": "^3.4.1"
  },
  "devDependencies": {
    "webpack": "^4.35.0",
    "webpack-cli": "^3.3.5"
  }
}

npm scripts

我们可以结合npm scripts来方便我们书写命令。修改package.json文件如下：

{
  "name": "demo1",
  "version": "1.0.0",
  "scripts": {
    "start": "webpack src/main.js -o dist/bundle.js"
  },
  "dependencies": {
    "jquery": "^3.4.1"
  },
  "devDependencies": {
    "webpack": "^4.35.0",
    "webpack-cli": "^3.3.5"
  }
}

启动命令

npm start 或者npm run start

解释

npm run xxx

这其中的xxx就是我们在scripts中定义的key值。

这样一句命令代表着我们将xxx的值执行。即执行 webpack src/main.js -o dist/bundle.js。

这里面的webpack命令其实是利用的我们项目的开发环境的的webpack-cli模块。如果本地项目未完装webpack、wepback-cli则去找全局命令。

注意

<font color="red">start这个命令可以省去run其它都不可以</font>

问题

上面命令执行后是可以进行打包，不过会产生一个警告提示。按照提示添加mode属性要么为production（生产环境）或者development 开发环境 。我们在这里了解一下开发环境。所以将mode属性的值设置为development;

> demo1@1.0.0 start C:\Users\zhaoy\Desktop\react\01\demo1
> webpack src/main.js -o dist/bundle.js

Hash: 4e6df5b73ef9caaba844
Version: webpack 4.35.0
Time: 329ms
Built at: 2019-06-24 7:36:41 PM
    Asset      Size  Chunks             Chunk Names
bundle.js  87.6 KiB       0  [emitted]  main
Entrypoint main = bundle.js
[1] ./src/main.js 106 bytes {0} [built]
    + 1 hidden module

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option t
o 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configurati
on/mode/

修改npm scripts

webpack src/main.js -o dist/bundle.js --mode development

{
  "name": "demo1",
  "version": "1.0.0",
  "scripts": {
    "start": "webpack src/main.js -o dist/bundle.js --mode development"
  },
  "dependencies": {
    "jquery": "^3.4.1"
  },
  "devDependencies": {
     "webpack": "^4.35.0",
     "webpack-cli": "^3.3.5"
  }
}

项目源码

git clone https://github.com/highh5/webpack.git -b lesson-02

webpack配置文件

webpack的配置项除了--output和--mode之外还有非常多的选项。官方也提供了一个更简便的方式来进行操作。

配置文件

在项目根目录上新建webpack.config.js

const path  = require('path');

module.exports = {
  entry:path.join(__dirname,'./src/main.js'),
  output:{
    path:path.join(__dirname,'./dist'),
    filename:'bundle.js'
  }
}

我们利用path.join(__dirname,'path')将文件的入口文件变为绝对地址。将输出文件地址也改为绝对地址。这样更利于管理。

相应的npm scripts也要做一些修改"start": "webpack --config webpack.config.js"或者"start": "webpack"完整的文件如下。

{
  "name": "demo1",
  "version": "1.0.0",
  "scripts": {
    "start": "webpack --config webpack.config.js"
  },
  "dependencies": {
    "jquery": "^3.4.1"
  },
  "devDependencies": {
    "webpack": "^4.35.0",
    "webpack-cli": "^3.3.5"
  }
}

执行命令

npm start 那么会执行webpack --config webpack.config.js那么上面的代码的执行顺序为webpack 读取到webconfig.js``的配置就可以得知具体的事务。

项目源码

git clone https://github.com/highh5/webpack.git -b lesson-03

webpack-dev-server

我们现在修改需求，把main.js中的”pink“改为"purple" 即粉色改为紫色。发现并没有自动打包文件，我们需要手动执行npm start来重新打包。

我们在去看gulp的时候我们在改项目文件时候，只要项目文件发生变化 ，那么会自动打包，并且会刷新浏览器。其实webpack也有相应的功能，而且这个功能较gulp更强大。

修改src/main.js

import $ from "jquery"
$("ul li:even").css({background:'red'})
$("ul li:odd").css({background:'purple'})

安装npm install webpack-dev-server -D

修改npm scripts

"start": "webpack-dev-server --config webpack.config.js  --open --port 3000 --hot"

{
  "name": "demo1",
  "version": "1.0.0",
  "scripts": {
    "start": "webpack-dev-server --config webpack.config.js  --open --port 3000 --hot"
  },
  "dependencies": {
    "jquery": "^3.4.1"
  },
  "devDependencies": {
    "webpack": "^4.35.0",
    "webpack-cli": "^3.3.5",
    "webpack-dev-server": "^3.7.2"
  }
}

解释配置

--open  自动打开浏览器 相当于   --open  true
--port  打开的服务端口号 3000  --port 3000
--hot   自动更新                            --hot   true

执行命令

npm start

执行命令我们会发现会自动打开浏览器，但是我们发现打开的并不是我们的index.html中的文件。它其它打开的是一个静态文件服务器

同时我们也发现并不会在我们本地去创建一个dist/bundle.js那么它是怎么一回事？

其实它是将打包的信息全部放在缓存（内存）中，我们是看不到的，那究竟打包的文件在哪里？打开这个地址就可以找到。http://localhost:3000/bundle.js

那么如何将我们的模板index.html和bunddle.js文件结合？请查看下面

html-webpack-plugin插件

安装npm install html-webpack-plugin -D

使用webpack.config.js

const path  = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry:path.join(__dirname,'./src/main.js'),
  output:{
    path:path.join(__dirname,'./dist'),
    filename:'bundle.js'
  },
  plugins:[
    new HtmlWebpackPlugin({
      template: path.join(__dirname,'./src/index.html'),
      filename: 'index.html'
    })
  ]
}

注意插都是一个构造函数，都需要new,所以在引入html-webpack-plugin模块时我们会使用大驼峰命名法。

利用上面的方式我们重新启动一下服务即可完成。npm start

1561432736486.png

除js外的其它模块

使用css

webpack将所有的文件都认为是模块所以CSS也不例外。

创建src/index.css

body{
    background:gold;
}

使用css

在main.js项目入口文件 通过 import './index.css';

import $ from "jquery"
$("ul li:even").css({background:'red'})
$("ul li:odd").css({background:'purple'})

import './index.css'

报错

ERROR in ./src/index.css 1:4
Module parse failed: Unexpected token (1:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> body{
|     background:gold;
| }
 @ ./src/main.js 5:0-20

webpack默认是不识别.css文件作为结尾的模块，需要我们通过loader加载器将.css文件进行解释成正确的模块

css-loader

安装 npm install css-loader -D

配置webpack.config.js

const path  = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry:path.join(__dirname,'./src/main.js'),
  output:{
    path:path.join(__dirname,'./dist'),
    filename:'bundle.js'
  },
  plugins:[
    new HtmlWebpackPlugin({
      template: path.join(__dirname,'./src/index.html'),
      filename: 'index.html'
    })
  ],
  module:{
    rules:[
      {test:/\.css$/,use:['css-loader']}
    ]
  }
}

module表示是模块的意思，rules是规则的意思，每个规则对应的都是一个对象，其中test字段表示是书写正则以哪个文件名结尾，use是一个数组，表示 当前类型文件用哪种加载器解释。

疑问

这次我们重新执行命令npm start不再报错，但是对于css的样式并未加载成功原因是为什么？缺失style-loader

为什么说是缺失style-loader?

css-loader 是将index.css正确解释 为webpack的模块，进行打包到了bundle.js，我们可以佐证，但是该样式并未成功的显示到浏览器中。

那么style-loader的作用其实就是将打包到bundle.js中的css样式输出到浏览器中，以style标签的形式显示。

1561433736658.png

1561433780122.png

style-loader

安装npm install style-loader -D

配置 {test:/\.css$/,use:['style-loader','css-loader']}

注意loader的加载顺序是从右向左， 即先将css文件通过css-loader 作为正确的模块进行解释，然后再通过style-loader进行显示到浏览器中。

至此CSS文件已经完成。

使用less文件

安装npm install less-loader less -D

配置：{test:/\.less$/,use:['style-loader','css-loader','less-loader']}

注意，我们需要借助于less编译。因为less-loader 依赖less。

使用sass文件

安装npm install sass-loader node-sass -D

配置：{test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}

rules:[
  {test:/\.css$/,use:['style-loader','css-loader']},
  {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
  {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
]

注意

<font color="red">对正则中的.号表示任意字符，千万小心最好把它转义一下，再来使用。</font>

项目源码

git clone https://github.com/highh5/webpack.git -b lesson-04

图片处理

安装npm install url-loader -D

配置：{test:/\.(jpg|jpeg|gif|png|webp)$/,use:['url-loader']},

放置一张图片到src目录图片大小为13.54kb

1561443070231.png

我们给a.scss指定body的背景是这张图片

$color:green;
body{
  background: url("./avatar.jpg");
}

打开浏览器后发现图片是以base64进行编码了。什么是base64编译的图片呢？通俗的讲，图片不再像以前通过外链的形式打开，而是内嵌在网页上了。图片越大base64的编码信息越多。也就是说越大的图片会导致我们的代码越来越长。这是不是好事呢？

答案： 肯定不是很好，我们期望网页打开越快越好，如果网站当中所有的图片全是以base64来进行编码，那么会导致首页代码体积越大，那么打开速度也不会很快，相反可能会很卡。

我们一般可以让小图片使用base64进行加载，这样既能让图片快速加载，又会减少http请求。至于大图片我们一般就直接以往常的外链形式存在即可。

解决问题

修改loader配置项,limit表示小于后面的1000 byte即接近1kb，用base64显示。超过的限制的话通过外链来读取图片（需要安装file-loader 文件加载器）

npm install file-loader -D

{
  test: /\.(jpg|jpeg|gif|png|webp)$/, use: [{
    loader: 'url-loader',
    options:{
      limit:1000,
      name:'[name].[hash:8].[ext]'
    }
  }]
},

最终图片被正确解释出来

body {
    background: url(avatar.9d23d463.jpg);
}

ES6 转 ES5

安装

npm install babel-core babel-loader@7.1.5 babel-plugin-transform-runtime babel-preset-env babel-preset-stage-0 -D

配置loader

{test:/\.js/,use:['babel-loader'],exclude:/node_modules/}

exclude表示排除掉 node_modules下载的依赖项。这样可以加速网站开发，而且我们也只需要对我们的项目src源文件进行编译即可。

新增.babelrc文件

{
    "presets":[“env","stage-0"],
    "plugins":["transform-runtime"]
}

修改main.js使用es6语法

class Person {
  constructor(){

  }
}
var p = new Person();

执行命令编译

npm start

编译后的结果接近在1335行

\n\n var Person = function Person() {\n  (0, _classCallCheck3.default)(this, Person);\n};\n\nvar p = new Person();\n\n

至此关于webpack的基本配置已经到这里。

项目源码

git clone https://github.com/highh5/webpack.git -b lesson-05

小结

介绍了模块化、工程化相关的概念和发展现状，最后介绍了 Webpack 的应用场景，以及复习了webpack如何使用等。

面试题（拓展）

学而不思则罔，思而不学则殆

Webpack 与 Grunt、Gulp 这类打包工具有什么不同？

简单解答：一个是模块化打包化工具，一个是流程化任务工具。

webpack 的工作方式是： 把你的项目当做一个整体，通过一个指定的主文件名（index.js, 一般是入口文件），webpack 将从这个文件开始找到你的项目所依赖的文件，使 用loaders 来处理它们，最后打包为一个浏览器可识别的js 文件。


20180628155732669.png

Gulp的工作方式是：stream流

grunt的工作方式是：在一个配置文件中，指明对某些文件进行压缩、组合、检查等任务的具体步骤，然后在运行中输入相应的命令。


20180628155644280.png

与 Webpack 类似的工具还有哪些？谈谈你为什么选择（或放弃）使用 Webpack？

同样是基于入口的打包工具还有以下几个主流的：

从应用场景上来看：

  • webpack适用于大型复杂的前端站点构建
  • rollup适用于基础库的打包，如vue、react
  • parcel适用于简单的实验性项目，他可以满足低门槛的快速看到效果

由于parcel在打包过程中给出的调试信息十分有限，所以一旦打包出错难以调试，所以不建议复杂的项目使用parcel

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
禁止转载，如需转载请通过简信或评论联系作者。
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,793评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,567评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,342评论 0赞 338
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,825评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,814评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,680评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,033评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,687评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 42,175评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,668评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,775评论 1赞 332
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,419评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,020评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,206评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,092评论 2赞 351
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,510评论 2赞 343

推荐阅读更多精彩内容

  • webpack学习
    webpack学习 一、初识webpack ​ 我们已经知道了模块化开发是非常重要和必要的了，而且也了解了一些...
    waigo阅读 932评论 0赞 2
  • webpack学习笔记
    全局安装webpack 全局安装webpack会有个问题，就是当你有两个项目依赖于不同版本的webpack，就会有...
    説好的妹紙呢阅读 1,803评论 0赞 11
  • webpack学习总结
    Webpack学习总结 此文只是自己学习webpack的一些总结，方便自己查阅，阅读不变，非常抱歉！！ 下载安装：...
    Lxs_597阅读 936评论 0赞 0
  • webpack学习笔记
    http://blog.csdn.net/weizengxun/article/details/53448885 ...
    晓卢轩阅读 603评论 0赞 0
  • webpack学习笔记
    学习目的 学习前端构建化工具 webpack，能熟练掌握 并使用 webpack 对项目进行打包优化。 ...
    _1633_阅读 1,347评论 0赞 7