关键概念
-
Entry：入口文件（源代码入口）
-
Output：输出文件（分发代码）
-
Module：
import、css 中的@import、url(...)、<img src="..." />... -
Chunk：打包时生成的模块
-
Bundle：打包完成的代码
-
Mode：development / production
-
Loader：用于加载模块时预处理文件
-
Plugins：提供自动生成 html 页面、清理、模块热替换等功能
-
Configuration：
webpack.config.js -
Dependency graph：从入口文件开始递归构建出，并由此进行打包
-
Runtime 和 Manifest：连接模块所需的加载和解析逻辑和模块标识集合
-
Hot Module Replacement：只更新模块， 而不用重载整个页面
-
-
output.publicPath：项目中引用css、js、img等资源时候的一个基础路径 -
devServer.publicPath：打包后资源存放的位置
-
基本使用
安装
- webpack
- webpack-cli（对于 webpack 4+ 版本）
项目目录结构
webpack-demo
|- package.json
|- webpack.config.js
|- /dist
|- index.html
|- /src
|- index.js
-
webpack.config.js为 webpack 配置文件 -
/dist文件夹存放分发代码 -
/src文件夹存放源代码
基础配置
// webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js', // 入口文件
output: {
filename: 'bundle.js', // 打包后的bundle文件
path: path.resolve(__dirname, 'dist') // 分发代码存放的目录
}
};
Webpack 可以接受多个 entry，但只能指定一个 output。
加载资源
除 js 文件外，其他类型的文件需要使用额外的 loader 来加载。
加载CSS
- NPM 安装 style-loader 和 css-loader
- 修改配置文件
webpack 根据正则表达式，来确定应该查找哪些文件，并将其提供给指定的 loader。在这种情况下，以
.css结尾的全部文件，都将被提供给style-loader和css-loader。
使用上述方式打包时，CSS 文件将会被编译成含有 CSS 字符串的 <style> 标签，并插入到 html 文件的 <head> 中。当样式文件较大时可以利用 extract-text-webpack-plugin 插件将 CSS 打包成独立的文件。
加载图片
- NPM 安装 file-loader
- 修改配置文件
图像将被处理并添加到分发代码存放的目录中。
管理输出
入口分离
Webpack 接受多入口（例如多页面应用程序中），且可以配置根据入口起点名称动态生成 bundle 名称：
打包后会在 /dist 目录下生成 print.bundle.js 和 app.bundle.js 两个文件。
自动生成 index.html 并关联入口文件
- NPM 安装 html-webpack-plugin 插件
- 修改配置文件
title 属性用于指定生成的 index.html 中的<title>标签的内容。
配置该插件后则无需手动将各入口文件引入 index.html 中。
清理 /dist 文件夹
即清理掉未在项目中使用的文件。
- NPM 安装 clean-webpack-plugin 插件
- 修改配置文件
提取公共入口 chunk
当多个入口文件都引用了同样的模块时，可以利用 [splitChunks] (https://webpack.js.org/plugins/split-chunks-plugin/) 插件在打包将该模块作为一个公共模块提取出来。
-
cacheGroups中的每一个键值对为一个公共模块的配置 -
name属性为生成的公共模块的名字 -
chunks属性用于指定打包的 chunks 的类型（- 包含三个选项：
initial、async、all - 分别针对非动态加载的模块和动态加载的模块（使用
import()引入的模块）采用不同的打包方式
- 包含三个选项：
搭建开发环境
追踪源代码
使用JavaScript 提供的 source map 功能，将编译后的代码映射回原始源代码。
inline-source-map 适用于开发环境，source map 还有很多不同的选项，需根据生产/开发环境进行选择。
开发工具
-
观察模式
使用该模式后修改依赖图中任意一个文件被更新时代码都会重新编译打包，而无需手动再次构建。
- 添加脚本：
"watch": "webpack --watch"
- 添加脚本：
-
该依赖提供了一个 web 服务器来实现实时重新加载。
- NPM 安装 webpack-dev-server
- 修改配置文件（如下图）
- 添加脚本：
"start": "webpack-dev-server --open"
模块热替换
HMR 只影响包含 HMR 代码的模块。
如果一个模块没有 HMR 处理函数，更新会冒泡，即，某个模块更新时，所依赖的模块均会重新加载。
启用方法
-
修改配置文件
- 引入 webpack 对象
- 需要开启热替换的模块不应作为入口 js
- dev server 设置 hot 模式
- 引入
HotModuleReplacementPlugin
-
对模块应用 HMR 处理函数
如在使用
print.js模块的index.js中：
支持模块热替换的框架
配置多环境
-
为不同环境创建独立的配置文件
-
webpack.common.js：通用配置 -
webpack.dev.js：开发环境配置 -
webpack.prod.js：生产环境配置
可以使用
webpack-merge在不同环境的配置文件中引入通用配置。
-
-
配置 NPM 脚本
-
开发环境脚本
"start": "webpack-dev-server --open --config webpack.dev.js" -
生产环境脚本
"build": "webpack --config webpack.prod.js"
-
网友评论