本质上,Webpack
是一个现代Javascript应用程序的静态模块打包器(Module Bundler)。当Webpack
处理应用程序时,它会递归地构建一个依赖关系图(Dependency Graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个bundle
。从Webpack v4.0.0
开始,可以不用引入一个配置文件。然而,Webpack
仍然还是高度可配置的。
首先我们来看一下Webpack
官网给出的用于介绍的图片:

下面我们依据官网给出的用于介绍Webpack
的图片来简要地介绍Webpack
这个项目管理工具。
Webpack
基本介绍
概念的引入
-
思考: 在网页中,我们经常会引入哪些常见的静态资源?
JS
.js .jsx .coffee .ts [Typescript]CSS
.css .less .sass .scssImages
.jpg .png .gif .bmp .svgFonts
.svg .ttf .eot .woff .woff2模板文件
.ejs .jade .vue [这是在webpack中定义组件的方式,推荐这么用] -
问题: 网页中静态资源多了以后存在的问题?
- 网页加载速度变慢,因为要多次重复的发送资源请求
- 要处理错综复杂的依赖关系
-
方案: 如何解决上述两个问题?
- 合并、压缩、精灵图、图片的Base64编码
- 其他更高效的解决方案如下:可以使用之前学过的
requireJS
、也可以使用Webpack
可以解决各个包之间的复杂依赖关系- 使用
Gulp
, 是基于task
任务的; - 使用
Webpack
, 是基于整个项目进行构建的;
- 使用
什么是Webpack
Webpack
是一个前端的项目构建工具,它是基于Nodejs
开发出来的一个前端工具
Webpack
的安装
首先新建项目webpack-basic
,初始化package.json
文件。输入如下命令:
然后安装Webpack
相关包:
命令完成后,我们会发现项目中多了一个node_modules
文件夹,该文件夹是用来存放项目中安装的依赖包。
Webpack
基本使用
搭建项目结构
-
为项目创建三个文件夹:
config
:配置文件夹
dist
:编译文件夹
src
:项目代码文件夹输入命令:
如图增加了三个文件夹:
-
创建项目入口html、js文件:
输入命令:
利用webpack
构建项目
在package.json
-> scripts
中栏目配置build
的运行命令。配置如下所示:
配置完成后运行命令:
执行命令后会发现dist
文件夹下多了个bundle.js
。命令运行时,npm
取出build
对应配置的命令在node
环境中执行,Webpack
打包默认入口为src/index.js
,默认生成路径是dist/bundle.js
,默认打包模式为development
, 打包模式总共有两种:
development
(开发环境)production
(生产环境)
生成环境下bundle.js
的体积更小。
Webpack
配置介绍
从webpack v4.0.0
开始,可以不用引入一个配置文件。然而,Webpack
仍然还是高度可配置的。在开始前需要先理解四个核心概念:
- 入口(entry):打包文件的入口(对应上述默认入口
src/index.js
),支持多入口 - 输出(output):打包压缩文件后的输出位置
- 加载器(loader):针对对应文件进行转义,解析成浏览器识别的文件
- 插件(plugins):插件目的在于解决
loader
无法实现的其他事。
讲了概念过后,接下来我们创建一个webpack.dev.js
,也可以命名为webpack.config.js
, 做一个简单的配置解析。

配置文件内容及配置介绍
webpack.dev.js
这个配置文件的基本内容如下,其中html-webpack-plugin
是负责打包生成HTML文件的插件:
接下来,我们使用npm install html-webpack-plugin
将项目中使用的未安装的包安装了。然后我们重新配置下webpack打包的命令,在package.json
文件中进行配置:
运行过后的结果如图所示:

打包后生成了index.html
并且引入了output
中的打包后的JS文件。
webpack-dev-server
启动服务及命令参数
webpack-dev-server
的作用是打包项目后,并启动一个服务,可以直接在浏览器查看项目页面,并且实时监听项目内容的修改。具体配置如下:
package.json
文件添加开发启动命令,如下:
Webpack
项目中常用loader
以及配置。
Javascript方面的所运用的loader
以上都是babel-loader
相关的loader
包,当然项目使用babel-loader
前,还需要配置一个babel
配置,告知babel-loader
在使用时对应的语法文件采用何种方式去处理。该配置文件名称为.babelrc
,.babelrc
配置如下:
然后在webpack.dev.js
-> module.rules
选项添加loader
规则,添加配置如下:
需要注意的是官方默认babel-loader
和babel
对应的版本需要一致,即babel-loader
需要搭配最新版本babel
。所以如果出现类似下述的错误:
必须首先要检查版本是否一致。一般有两种解决方法:
CSS方面的所运用的loader
在webpack.dev.js
-> module.rules
选项添加loader
规则,添加配置如下:
在Webpack
中也可以将CSS文件模块化。但是需要注意的是,由于很多第三方库也有许多CSS文件,如果全部模块化,则大量第三方库的CSS文件会失效。所以一般来说,为了仅在自己的项目代码中能使用CSS文件的模块化,可以将自己写的CSS文件替换为SCSS文件,这样通过模块化SCSS文件来避免影响第三方库的CSS文件。
资源文件加载的所运用的loader
在webpack.dev.js
-> module.rules
选项添加loader
规则,添加配置如下:
Hint:Webpack
配置
下面的代码是我自己在React
项目中所用的配置文件: