webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。在使用 WebPack 前你需要先了解 NodeJS 及 NPM。
基础
在使用 WebPack 之前你需要先安装它(NodeJS 的安装及 NPM 的使用此处不再叙述)。以下是 WebPack 使用必装的内容及命令:
如果你没有安装 webpack-dev-server ,那么只能使用如下命令打包文件,生产环境相较于开发环境会压缩代码使其体积更小。
注意:使用上述命令需全局安装 webpack 及 webpack-cli ,否则会报错:’webpack’ 不是内部或外部命令,也不是可运行的程序
安装 webpack-dev-server 后在 package.json 的 scripts 中配置 “server”: “webpack serve –host 127.0.0.1 –port 1001” 并在项目根目录下新建 webpack.config.js 配置 webpack 选项后,即可通过 npm run server 运行 webpack 开发服务器,实时编译。webpack.config.js 的基本配置结构如下:
模式(Mode)
模式(mode)告诉 webpack 打包时如何优化,目前 webpack 支持 development 与 production 两种模式,不同的模式加载的插件不同。设置 mode 后会将对应的值设置给 process.env.NODE_ENV 。
入口(Entry)
入口(entry)用来设置 webpack 从哪个文件开始编译,可以是一个字符串、数组、对象或函数。
出口(Output)
出口(Output)用来设置 webpack 输出到什么位置去以及一些输出时的配置,是一个对象。注意:虽然可以设置多个入口起点,但只能有一个输出配置!
加载器(Loaders)
webpack 默认只编译 js 或 json 文件,对于其他文件需要通过专门的加载器(Loader)进行处理,加载器从右到左(或从下到上)进行处理。其常用配置如下:
安装
使用加载器(loader)前需要使用 npm 命令安装对应的 Loader ,比如:
配置
module.rules 中配置各个加载器:
module.rules 中可以设置多个加载器,每种加载器的配置方式略有不同。
- test:字符串,设置要处理的文件格式,可使用正则匹配;
- use:数组,包含多个加载器的详细配置
- include:字符串或数组,指定 test 处理那些文件或文件夹下的内容
- exclude:字符串或数组,禁止 test 处理那些文件或文件夹下的内容
- loader:字符串,指定要使用的单一加载器
- loaders:数组,指定要使用的多个加载器
常用的加载器有: - style-loader:将 css-loader 打包好的代码以<style>标签的形式插入到 HTML 文件中,不想插入到页面中的话可以考虑使用插件:mini-css-extract-plugin 处理一下
- css-loader:将 css 文件打包,然后交由 style-loader 处理
- sass-loader:将 sass 文件打包成 css 文件,然后交由 css-loader 与 style-loader 处理
- less-loader:将 less 文件打包成 css 文件,然后交由 css-loader 与 style-loader 处理
- babel-loader:编译 ES 语法的高级语言,然后打包成浏览器可识别的 JS 语言
- url-loader:将文件编码成 base64 通过 URL 直接打包到文件中,避免过多 HTTP 请求,内嵌 file-loader ,当文件超过 limit 大小时自动调用 file-loader 处理
- file-loader:修改打包后文件的路径,使之与实际使用路径一致
- html-loader:注意这个加载器不是用来处理 HTML 的,它是用来处理 HTML 中的 url 图片的
- vue-loader: 将 vue 文件进行打包处理,提取出其中的逻辑代码 script ,样式代码 style 以及 HTML 模板 template ,再分别将它们交给对应的loader去处理。注意需要配置 plugins !
更多加载器可访问>>>WebPack Loaders
插件(Plugins)
加载器(Loader)只能处理特定类型的模块,如果需要拓展更多功能,比如包优化、资源管理、注入环境变量等,则需要使用插件(Plugins)。
安装
使用插件(Plugins)之前需要使用 npm 命令安装指定插件,并通过 require() 引入到配置文件中。比如:
引入
配置
插件(Plugins)是一个数组,可以通过实例化对应的插件并配置所需的选项引入插件以拓展 webpack 更多的功能。
常用的插件有:
- html-webpack-plugin:生成一个 HTML 文件(不配置 template 则自动生成一个 HTML 结构的文件,否则根据 template 指向的模板生成 HTML 文件)并自动绑定其他打包好的内容,比如 JS、CSS
- mini-css-extract-plugin:将 CSS 单独抽离出来形成一个 css 文件
- optimize-css-assets-webpack-plugin:优化压缩 CSS 资源,使其体积更小
更多插件可访问>>>WebPack Plugins
解析(Resolve)
解析(Resolve)用于配置并告诉 webpack 如何解析各模块内容,比如我们可以配置将 @ 字符解析为 src/ 路径。
模块(module)
模块(module)用来设置 webpack 如何处理不同的模块,比如上面提到的加载器(Loader)就是在 module.rules 下配置的。
优化(Optimization)
优化(Optimization)用来帮助 webpack 用户自定义一些优化配置选项。
开发服务器(DevServer)
开发服务器(DevServer)里配置的一些内容将会影响 webpack-dev-server 工具的使用。对于开发过程中类似跨域无法发起请求等问题,我们可以通过配置该选项在开发阶段临时解决。
更多 WebPack 配置问题,建议访问官网查看文档:
- WebPack 英文文档
- WebPack 中文文档
- GitHub 源码地址