Webpack
- webpack 官网
- bundle
[ˈbʌndl]捆绑，收集，归拢，把…塞入
概述
webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)
webpack 是一个模块化方案（预编译）
webpack获取具有依赖关系的模块，并生成表示这些模块的静态资源
- 四个核心概念：入口(entry)、输出(output)、加载器loader、插件(plugins)
模块化方案: webpack 和 requirejs
webpack 预编译 (在开发阶段通过webpack进行模块化处理, 最终项目上线, 就不在依赖于 webpack)
requirejs 线上的编译( 代码运行是需要依赖与 requirejs 的 )
webpack起源
- webpack解决了现存模块打包器的两个痛点：
- 1 Code Spliting - 代码分离
- 2 静态资源的模块化处理方案
webpack 的目标
- 1 分离依赖树到chunks（块，文件），实现按需加载
- 2 保证初始化加载时间更短
- 3 每一个静态资源能够被当作一个模块处理
- 4 能够整合第三方包使其成为模块
- 5 能够定制模块打包的每一部分（环节）
- 6 适合大型项目
webpack与模块
在webpack看来：所有的静态资源都是模块
webpack 模块能够识别以下等形式的模块之间的依赖：
-
JS的模块化规范：
- ES2015
importexport - CommonJS
require()module.exports - AMD
define和require
- ES2015
-
非JS等静态资源：
- css/sass/less 文件中的
@import - 图片连接，比如：样式
url(...)或 HTML<img src=...> - 字体 等
- css/sass/less 文件中的
webpack能做什么
- 1 模块化
- 2 将
ES6、TypeScript、CoffeeScript等浏览器无法识别的语言转化为ES5 - 3 将
SCSS、LESS等预编译器创建的CSS转化为浏览器识别的CSS - 4 进行文件压缩、合并、拷贝
- 5 启动服务器，实现页面实时刷新，热加载
- 6 项目上线，通过配置生成项目目录，优化代码提升性能
webpack文档和资源
安装webpack
- 全局安装：
npm i -g webpack- 目的：在任何目录中通过CLI使用
webpack这个命令
- 目的：在任何目录中通过CLI使用
- 项目安装：
npm i -D webpack- 目的：执行当前项目的构建
webpack的基本使用
- 安装：
npm i -D webpack - webpack的两种使用方式：1 命令行 2 配置文件（
webpack.config.js）
命令行方式演示 - 案例：隔行变色
- 1 使用
npm init -y初始package.json，使用npm来管理项目中的包 - 2 新建
index.html和index.js，实现隔行变色功能 - 3 运行
webpack src/js/index.js dist/bundle.js进行打包构建，语法是：webpack 入口文件 输出文件 - 4 注意：需要在页面中引入 输出文件 的路径（此步骤可通过配置webpack去掉）
/*
src/js/index.js
*/
// 1 导入 jQuery
import $ from 'jquery'
// 2 获取页面中的li元素
const $lis = $('#ulList').find('li')
// 3 隔行变色
// jQuery中的 filter() 方法用来过滤jquery对象
$lis.filter(':odd').css('background-color', '#def')
$lis.filter(':even').css('background-color', 'skyblue')
配置文件方式（推荐）
/*
webpack.config.js
运行命令：webpack
entry 入口的配置说明：
https://doc.webpack-china.org/concepts/entry-points
*/
var path = require('path')
module.exports = {
// 入口文件
entry: path.join(__dirname, 'src/js/index.js'),
// 输出文件
output: {
path: path.join(__dirname, 'dist'), // 输出文件的路径
filename: 'bundle.js' // 输出文件的名称
}
}
webpack-dev-server
- 安装：
npm i -D webpack-dev-server - 作用：配合webpack，创建开发环境（服务器、自动编译、监视文件变化等），提高开发效率
- 注意：无法直接在终端中执行
webpack-dev-server，需要通过package.json的scripts实现 - 使用方式：
npm run dev
"scripts": {
"dev": "webpack-dev-server"
}
优势
1 开启服务器
2 监视文件的变化，重新编译打包，自动刷新浏览器
3 将输出的文件存储在内存中，提高编译和加载速度，效率更高
-
注意：webpack输出的文件被放到项目根目录中
webpack output is served from /- 在
index.html页面中需要通过/bundle.js来引入文件
配置说明 - CLI配置
-
--contentBase：主页面目录-
--contentBase ./：当前工作目录 -
--contentBase ./src：webpack-dev-server 启动的服务器，我们在浏览器中打开的时候会自动展示 ./src 中的 index.html 文件
-
-
--open：自动打开浏览器 -
--port：端口号 -
--hot：热更新，只加载修改的文件(按需加载修改的内容)，而非全部加载
/* package.json */
/* 运行命令：npm run dev */
{
"scripts": {
"dev": "webpack-dev-server --contentBase ./src --open --port 8888 --hot"
}
}
配置说明 - webpack.config.js
const webpack = require('webpack')
devServer: {
// 服务器的根目录 Tell the server where to serve content from
// https://webpack.js.org/configuration/dev-server/#devserver-contentbase
contentBase: path.join(__dirname, './'),
// 自动打开浏览器
open: true,
// 端口号
port: 8888,
// --------------- 1 热更新 -----------------
hot: true,
// 解决打开页面出现 /undefined bug
//openPage: ''
},
plugins: [
// ---------------- 2 启用热更新插件 ----------------
new webpack.HotModuleReplacementPlugin()
]
html-webpack-plugin 插件
- 安装：
npm i -D html-webpack-plugin - 作用：根据模板，自动生成html页面
- 优势：页面存储在内存中，自动引入
bundle.js、css等文件
/* webpack.config.js */
const htmlWebpackPlugin = require('html-webpack-plugin')
// ...
plugins: [
new htmlWebpackPlugin({
// 模板页面路径
template: path.join(__dirname, './index.html'),
// 在内存中生成页面路径，默认值为：index.html
filename: 'index.html'
})
]
webpack
Loaders（加载器）
webpack enables use of loaders to preprocess files. This allows you to bundle any static resource way beyond JavaScript.
- webpack只能处理JavaScript资源
- webpack通过loaders处理非JavaScript静态资源
CSS打包
- 1 CSS打包文件（加载）
- 2 SASS打包文件（编译为CSS）
使用webpack打包CSS
- 安装：
npm i -D style-loader css-loader - 注意：use中模块的顺序不能颠倒，加载顺序：从右向左加载
/* index.js */
// 导入 css 文件
import './css/app.css'
/* webpack.config.js */
// 配置各种资源文件的loader加载器
module:{
// 配置匹配规则
rules:[
// test 用来配置匹配文件规则（正则）
// use 是一个数组，按照从后往前的顺序执行加载
{test: /\.css$/, use: ['style-loader', 'css-loader']},
]
}
使用webpack打包sass文件
- 安装：
npm i -D sass-loader node-sass - 注意：
sass-loader依赖于node-sass模块
/* webpack.config.js */
// 参考：https://webpack.js.org/loaders/sass-loader/#examples
// "style-loader" ：creates style nodes from JS strings 创建style标签
// "css-loader" ：translates CSS into CommonJS 将css转化为CommonJS代码
// "sass-loader" ：compiles Sass to CSS 将Sass编译为css
module:{
rules:[
{test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader']},
]
}
图片和字体打包
- 安装：
npm i -D url-loader file-loader -
file-loader：加载并重命名文件（图片、字体 等） -
url-loader：将图片或字体转化为base64编码格式的字符串，嵌入到样式文件中
/* webpack.config.js */
module:{
rules:[
// 打包 图片文件
{ test: /\.(jpg|png|gif|jpeg)$/, use: 'url-loader' },
// 打包 字体文件
{ test: /\.(woff|woff2|eot|ttf|otf)$/, use: 'file-loader' }
]
}
图片打包注意点
- 1 默认将图片转为base64编码格式
- 2
limit参数的作用：- 限制图片的文件大小，单位为：字节(byte)
- 文件重命名为哈希值，保证文件不会重复。例如：一张图片拷贝一个副本，这两个图片实际是同一个
- 3 规则：
- 当图片文件大小（字节）
小于指定的limit时，图片被转化为base64编码格式 - 当图片文件大小（字节）
大于等于指定的limit时，图片被重命名，不使用base64编码，此时，需要file-loader来加载图片
- 当图片文件大小（字节）
/* webpack.config.js */
module: {
rules: [
// {test: /\.(jpg|png|gif|jpeg)$/, use: 'url-loader?limit=100'},
{
test: /\.(jpg|png|gif|jpeg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}
]
}
字体文件打包说明
- 1 可以使用
url-loader或者file-loader - 2
url-loader会将字体文件解析为 base64编码格式的字符串，嵌入到CSS样式中 - 3
file-loader以文件形式加载字体文件
ES6语法 - class关键字
- ES6以前，JS是没有class概念的，而是通过构造函数+原型的方式来实现的
- 注意：ES6中的class仅仅是一个语法糖，并不是真正的类，与Java等服务端语言中的类是有区别的
- ES6 - 文档
class Person {
// 静态属性
static testName = '静态属性'
static age = 20
constructor() {
// 实例属性
this.isLoading = true
}
}
console.log(Person.testName)
静态属性和实例属性
- 静态属性：直接通过类名就可以访问到，不需要创建类的实例就能访问
- 实例属性：必须先创建类的实例对象，然后，通过实例对象访问
- 说明：由于webpack不识别
static关键字，需要借助于babel-loader来处理ES6语法
在webpack中配置babel-loader
- babel全家桶
- 安装：
npm i -D babel-core babel-loader babel-plugin-transform-runtime - 安装：
npm i -D babel-preset-es2015 babel-preset-stage-0 - 安装：
npm i -S babel-runtime- 注意：stage-0 依赖于 es2015
- ES6 -> ES7 过程中要经历：4个阶段（0-3），并且 stage-* 的语法比ES6更新
基本使用（两步）
- 第一步：
/* webpack.config.js */
module: {
rules: [
// exclude 排除，不需要编译的目录，提高编译速度
{test: /\.js$/, use: 'babel-loader', exclude: /node_modules/}
]
}
- 第二步：在项目根目录中新建
.babelrc配置文件
/* .babelrc */
// 将来babel-loader运行的时候，会检查这个配置文件，并读取相关的语法和插件配置
{
"presets": ["es2015", "stage-0"],
"plugins": ["transform-runtime"]
}
babel的说明
babel-core
把 js 代码分析成 ast (抽象语法树, 是源代码的抽象语法结构的树状表现形式)，方便各个插件分析语法进行相应的处理。有些新语法在低版本 js 中是不存在的，如箭头函数，rest 参数，函数默认值等，这种语言层面的不兼容只能通过将代码转为 ast，再通过`语法转换器`分析其语法后转为低版本 js。
Bable AST： http://www.zcfy.cc/article/347
代码转AST： https://astexplorer.net/
babel原理： https://zhuanlan.zhihu.com/p/27289600
babel-preset-*
Babel通过语法转换器，能够支持最新版本的JavaScript语法
- 作用：将浏览器无法识别的新语法转化为ES5代码
-
ES6语法提案的批准流程
- ES2015 也就是 ES6, 下一个要发布的ES7, 从 ES6 到 ES7之间经历了 5 个阶段
- 一般进入到 stage 4 就可以认为是下一个版本的语法了!
Stage 0 - Strawman（展示阶段）
Stage 1 - Proposal（征求意见阶段）
Stage 2 - Draft（草案阶段）
Stage 3 - Candidate（候选人阶段）
Stage 4 - Finished（定案阶段）
Stage 0 is "i've got a crazy idea",
stage 1 is "this idea might not be stupid",
stage 2 is "let's use polyfills and transpilers to play with it",
stage 3 is "let's let browsers implement it and see how it goes",
stage 4 is "now it's javascript".
babel-polyfill 和 transform-runtime
- 作用：实现浏览器对不支持API的兼容（兼容旧环境、填补）
- polyfill
- transform-runtime
- 命令：
npm i -S babel-polyfill - 命令：
npm i -D babel-plugin-transform-runtime和npm i -S babel-runtime
区别：
polyfill 污染全局环境、支持实例方法
runtime 不污染全局环境、不支持实例方法
polyfill：如果想要支持全局对象（比如：`Promise`）、静态方法（比如：`Object.assign`）或者**实例方法**（比如：`String.prototype.padStart`）等，那么就需要使用`babel-polyfill`
babel-runtime ：提供了兼容旧环境的helper函数，使用的时候，需要我们自己手动引入
比如：const Promise = require('babel-runtime/core-js/promise')
说明：
1 手动引入太繁琐
2 多个文件引入同一个helper（定义），造成代码重复，增加代码体积
3 安装该插件即可
babel-plugin-transform-runtime：
1 自动引入helper
2 babel-runtime提供定义，使用的位置引入这个helper，避免重复
3 babel-runtime包中的代码会被打包到你的代码中（-S）
4 依赖于 babel-runtime 插件
// 第一行引入
require("babel-polyfill")
var s = 'abc'.padStart(4)
console.log(s)
// webpack.config.js 配置
module.exports = {
entry: ['babel-polyfill', './app/js']
}
总结:
babel-core 将新的JS语法解析为 抽象语法树(AST)
babel-preset-es2015 能够将 抽象语法树 转化为浏览器能够识别的语法
注意: 只能处理新的语法( static / 箭头函数 ) , 但是对于一些新的JS API 无法处理
transform-runtime / babel-polyfill 提供浏览器不识别的全局对象或者新的API的兼容实现，以达到兼容浏览器的目的
// 判断浏览器是否兼容 padStart 这个 API
if (!String.prototype.padStart) {
// 如果不兼容, 就自己模拟 padStart的功能实现一份
String.prototype.padStart = function padStart(targetLength,padString) {
}
}
