目录
1.webpack是什么?
本质上,webpack
是一个现代 JavaScript
应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。
2.webpack安装
webpack
是一个使用 Node.js
实现的一个模块化代码打包工具。所以,我们需要先安装 webpack,安装之前需要搭建好 Node.js
环境 。
npm install -D webpack webpack-cli
注:不推荐全局安装
webpack-cli
: 提供 webpack 命令、工具,类似create-react-app
webpack
: webpack 代码,类似react
3.webpack使用
注意:在window下查看命令需要使用反斜杠,否则会报错,不是内部或外部命令。
.\node_modules\.bin\webpack
// 查看版本
.\node_modules\.bin\webpack -v
也可以编辑 package.json
的 scripts
来简化输入 :
scripts 中可以自动定位到 ./node_modules/.bin/ 目录下;且只能匹配test
、start
、restart
、stop,不能自定义其他命令
注意package.json文件中最后一行不能以“,”结尾
// package.json
{
...,
"scripts": {
"start": "webpack" // scripts 中可以定位到 ./node_modules/.bin/ 目录下
// "start": "webpack -v"
}
}
scripts
中使用test
、start
、restart
、stop
命名的时候,可以在调用的时候省略run
,即直接npm start
。
当然,还可以使用更加方便的方式:
npx webpack
npx webpack -v
通过 npx
也可以帮助我们直接定位命令到 ./node_modules/.bin/
目录下 :
注:npm5.2+ 增加,如果没有,可以使用 npm i -g npx 来安装。
4.webpack打包模块
打包之前,我们需要了解一个概念,入口文件 。
4.1入口文件
入口文件就是我们项目中加载的第一个文件,比如上面的 main.js
文件,其它文件都是通过 import
等方式引入的,webpack
会从我们指定的入口文件开始分析所有需要依赖的文件,然后把打包成一个完整文件。
注意:所有的自定义文件必须放在src目录下。
4.2打包命令
webpack ./js/index.js
上面命令会使用 webpack
默认的一些配置对模块文件进行打包,并把打包后的文件输出到默认创建的 ./dist
目录下,打包后的文件名称默认为 main.js
。
模块文件打包以后,就可以在不支持 es6 模块语法的浏览器环境下引入使用了。
打包文件分析 :
-
把分散的模块文件打包到一个文件中,不需要外部引入了
-
内置了一个小型模块加载器(类似
requireJS
),实现了打包后的代码隔离与引用
以上就是 webpack 最基础的使用于基本原理,当然强大的 webpack
远远不止这些功能。
示例:
- 直接在package.json文件中设置入口文件;
- 或者直接使用命令.\node_modules\.bin\webpack入口文件;
使用webpack对模块进行打包,通常会对源代码的目录进行分类,如src。
项目路径:
index.html:
<body>
<script type="module" src="js/main.js"></script>
</body>
m1.js:
let a = 100;
export default a;
mian.js:
import a from './m1.js';
console.log(a);
执行命令:npm start ./js/main.js后报错
报错原因:没有指定打包的模式(开发环境/生产环境)
在package.json文件中修改入口文件及模式:
"start": "webpack src/js/main.js --mode=development"
再次执行命令后:在项目路径下自动生成了dist文件夹,且生成了打包后的main.js文件
并且将index.html中js文件,更改为打包生成后的main.js文件:在浏览器中打开页面打印正确值a为100。
<body>
<script type="module" src="../dist/main.js"></script>
</body>
默认打包后生成文件放在dist目录下,文件名为main.js 。
5.打包配置webpack.config.js
虽然,我们可以直接通过命令的来打包,但是推荐创建一个 webpack.config.js
的配置文件来实现更方便和强大的功能。
webpack
命令在运行的时候,默认会读取运行命令所在的目录下的 webpack.config.js
文件,通常我们会在项目的根目录下运行命令和创建配置文件。
我们也可以通过 —config
选项来指定配置文件路径:
webpack --config ./configs/my_webpack.config.js
通常情况下,我们的项目目录大致如下:
/
-- /dist - 项目打包后存放目录
-- /node_modules - 第三方模块
-- /src
------ css/
------ images/
------ js/
------ index.js
-- webpack.config.js
-- package.json
配置文件webpack.config.js
:
module.exports = {
... //配置项
}
6.webpack.config.js
核心配置
6.1mode——打包模式
模式 : "production" | "development" | "none"
。分别表示用于生产环境(打包文件会进行压缩),开发环境,不指定。
module.exports = {
mode: 'production'
}
6.2entry——入口文件形式
指定打包的入口文件,有三种不同的形式:string | object | array
- 一对一:一个入口文件、一个打包文件
module.exports = {
entry: './src/index.js'
}
- 多对一(数组方式):多个入口文件、一个打包文件
module.exports = {
entry: [
'./src/index1.js',
'./src/index2.js',
]
}
- 多对多(对象方式):多个入口、多打包文件
module.exports = {
entry: {
'index1': "./src/index1.js",
'index2': "./src/index2.js"
}
}
6.3output——打包后文件存放位置
打包后的文件位置 :
module.exports = {
...,
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
//多入口多出口(`entry` 为对象)
// filename: "[name].js"
}
}
- 可以指定一个固定的文件名称,如果是多入口多出口(
entry
为对象),则不能使用单文件出口,需要使用下面的方式 path表示输出文件路径
filename指定输出文件名
- 通过
webpack
内置的变量占位符:[name]
6.4使用webpack.config.js打包文件简单示例
如图:webpack.config.js必须在执行打包命令路径根目录下
m1.js:
let a = 2000;
export default a;
index.js:
import a from './m1';
console.log(a);
webpack.config.js:
const path = require("path");
module.exports = {
//模式 : "production" | "development" | "none"
mode:'production',
// //单个入口文件,单个出口文件
// //入口文件
// entry:'./src/js/index.js',
// output:{
// //指定打包后输出文件路径,会自动生成文件夹名
// //注意:由于使用了path模块,所以必须引入path模块
// path: path.resolve(__dirname, "dist"),
// //打包输出文件名
// filename:'[name]-test.js'
// }
// //多个入口文件(数组方式),单个出口文件(将两个入口文件合并到一个文件中)
// entry:[
// './src/js/index.js',
// './src/js/m1.js'
// ],
// output:{
// path: path.resolve(__dirname, "dist"),
// filename:'[name]-test.js'
// }
//多个入口文件,多个出口文件(要获得多个出口文件时,多个入口文件必须采用对象形式)
entry:{
index1: './src/js/index.js',
m1:'./src/js/m1.js'
},
output:{
path: path.resolve(__dirname, "dist"),
//多个入口多个出口文件时:[name]占位符为entry中的key
filename:'[name]-test.js'
}
}
7.深入——执行简要流程
在 webpack
中,有一个很重要的特性:模块不仅仅只是 js
的文件,webpack
可以把任意文件数据作为模块进行处理,包括:非 js 文本、css、图片等等 。
import txt from './a.txt';
console.log(txt);
但是 webpack
默认情况下只能处理 js
模块,如果需要处理其它类型的模块,则需要使用它提供的一些其它功能 。
执行简要流程:
- entry:加载要打包的文件
loaders
:webpack
中非常核心的内容之一,前面我们说的非 js 类型的模块处理就靠它了,不同类型的模块的解析就是依赖不同的loader
来实现的。需要使用的loaders必须先使用npm环境进行安装,如,npm install -D raw-loader。plugins
:webpack
中另外一个核心的内容,它主要是扩展webpack
本身的一些功能,它们会运行在各种模块解析完成以后的打包编译阶段,比如对解析后的模块文件进行压缩等。- output:输出文件
示例,需求:想引入一个txt文件。
m1.txt:
这个是txt文件。
index.js:注意引入非JS文件时必须加上后缀
import txt from './m1.txt';
console.log(txt);
webpack.config.js:
const path = require("path");
module.exports = {
mode:"production",
entry:'./src/static/index.js',
output:{
path:path.resolve(__dirname,"dist"),
filename:'[name]-txt.js'
}
}
index.html:
<body>
<script type="module" src="../dist/main-txt.js"></script>
</body>
此时还未使用raw-loader会报以下错误:
在webpack.config.js中加上modules:
const path = require("path");
module.exports = {
mode:"production",
entry:'./src/static/index.js',
output:{
path:path.resolve(__dirname,"dist"),
filename:'[name]-txt.js'
},
module: {
rules: [
{
test: /\.txt$/i,
use: 'raw-loader'
},
],
}
}
同时使用npm环境安装raw-loader:
npm install raw-loader --save-dev
注意此处不能写为:npm install -D raw-loader 会报处理不了txt错误,即raw-loader安装失败。如果安装成功会在node_modules下生成第三方raw-loader的库。
结果:
页面成功打印:这个是txt文件。
8.Loaders
module.exports = {
...,
module: {
rules:[
{
test:/\.xxx$/,
use:{
loader: 'xxx-load'
}
}
]
}
}
当 webpack
碰到不识别的模块的时候,webpack
会在配置的 module
中进行该文件解析规则的查找:
rules
就是我们为不同类型的文件定义的解析规则对应的 loader,它是一个数组- 每一种类型规则通过 test 选项来定义,通过正则进行匹配,通常我们会通过正则的方式来匹配文件后缀类型。如/\.css$/。
use
针对匹配到文件类型,调用对应的loader
进行处理
从一个简单的案例来了解 loader :
需求:想引入一个txt文件。
m1.txt:
这个是txt文件。
index.js:注意引入非JS文件时必须加上后缀
import txt from './m1.txt';
console.log(txt);
webpack.config.js:
const path = require("path");
module.exports = {
mode:"production",
entry:'./src/static/index.js',
output:{
path:path.resolve(__dirname,"dist"),
filename:'[name]-txt.js'
}
}
index.html:
<body>
<script type="module" src="../dist/main-txt.js"></script>
</body>
此时还未使用raw-loader会报以下错误:
默认情况下,webpack 会报错,因为 webpack 处理不了 txt 和 md 这样的非 js 的模块,但是我们可以通过不同的loader专门来处理纯文本内容(不同的 loader 有不同的作用) 。
在webpack.config.js中加上modules:
const path = require("path");
module.exports = {
mode:"production",
entry:'./src/static/index.js',
output:{
path:path.resolve(__dirname,"dist"),
filename:'[name]-txt.js'
},
module: {
rules: [
{
test: /\.txt$/i,
use: 'raw-loader'
},
],
}
}
同时使用npm环境安装raw-loader:
npm install raw-loader --save-dev
注意:如果安装成功会在node_modules下生成第三方raw-loader的库。
结果:页面成功打印:这个是txt文件。
8.1raw-loader
在 webpack 中通过 import 方式导入文件内容,loader 并不是 webpack 内置的,所以首先要安装 :
npm install --save-dev raw-loader
然后在 webpack.config.js 中进行配置 :
module.exports = {
...,
module: {
rules: [
{
test: /\.(txt|md)$/,
use: 'raw-loader'
}
]
}
}
8.2file-loader
把识别出的资源模块,移动到指定的输出目录,并且返回这个资源在输出目录的地址(字符串) 。
npm install --save-dev file-loader
rules: [
...,
{
test: /\.(png|jpe?g|gif)$/,
use: {
loader: "file-loader",
options: {
// placeholder 占位符 [name] 源资源模块的名称
// [ext] 源资源模块的后缀
name: "[name]_[hash].[ext]",
//打包后的存放位置
outputPath: "./images"
// 打包后文件的 url
publicPath: './images',
}
}
}
]
8.3url-loader
可以处理理 file-loader
所有的事情,但是遇到图片格式的模块,可以选择性的把图片转成 base64
格式的字符串,并打包到 js
中,对小体积的图片比较合适,大图不合适。
npm install --save-dev url-loader
rules: [
...,
{
test: /\.(png|jpe?g|gif)$/,
use: {
loader: "url-loader",
options: {
// placeholder 占位符 [name] 源资源模块的名称
// [ext] 源资源模块的后缀
name: "[name]_[hash].[ext]",
//打包后的存放位置
outputPath: "./images"
// 打包后文件的 url
publicPath: './images',
// 小于 100 字节转成 base64 格式
limit: 100
}
}
}
]
8.4css-loader
分析 css
模块之间的关系,并合成一个 css
。
npm install --save-dev css-loader
rules: [
...,
{
test: /\.css$/,
use: {
loader: "css-loader",
options: {
// 启用/禁用 url() 处理
url: true,
// 启用/禁用 @import 处理
import: true,
// 启用/禁用 Sourcemap
sourceMap: false
}
}
}
]
8.5style-loader
把 css-loader
生成的内容,用 style
标签挂载到 head
中
npm install --save-dev style-loader
rules: [
...,
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
同一个任务的 loader
可以同时挂载多个,处理顺序为:从右到左,也就是先通过 css-loader
处理,然后把处理后的 css
字符串交给 style-loader
进行处理。
rules: [
...,
{
test: /\.css$/,
use: [
{
loader: 'style-loader',
options: {}
},
'css-loader'
]
}
]
8.6sass-loader
把 sass
语法转换成 css
,依赖 node-sass
模块 。
npm install --save-dev sass-loader node-sass
9.Plugins
扩展 webpack
本身的一些功能,它们会运行在各种模块解析完成以后的打包编译阶段,比如对解析后的模块文件进行压缩等 。
9.1HtmlWebpackPlugin
在打包结束后,自动生成一个 html
文件,并把打包生成的 js 模块引入到该 html
中 。
npm install --save-dev html-webpack-plugin
// webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
...
plugins: [
new HtmlWebpackPlugin({
title: "My App",
filename: "app.html",
template: "./src/html/index.html"
})
]
};
在 html
模板中,可以通过 <%=htmlWebpackPlugin.options.XXX%>
的方式获取配置的值 :
<!--./src/html/index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><%=htmlWebpackPlugin.options.title%></title>
</head>
<body>
<h1>html-webpack-plugin</h1>
</body>
</html>
更多的配置 :
title
: 用来生成里面的title
元素filename
: 输出的HTML
文件名,默认是index.html
, 也可以直接配置子目录template
: 模板文件路径,支持加载器(loader
),例如html!./index.html
inject
:true | 'head' | 'body' | false
,注入所有的资源到特定的template
或者templateContent
中,如果设置为true
或者body
,所有的javascript
资源将被放置到body
元素的底部,'head'
将放置到head
元素中favicon
: 添加特定的favicon
路径到输出的HTML
文件中minify
:{} | false
, 传递html-minifier
选项给minify
输出hash
:true | false
,如果为true
,将添加webpack
编译生成的hash
到所有包含的脚本和CSS
文件,对于解除cache
很有用cache
:true | false
,如果为true
,这是默认值,仅在文件修改之后才会发布文件showErrors
:true | false
,如果为true
,这是默认值,错误信息会写入到HTML
里面chunks
: 允许只添加某些块 (例如,仅 unit test 块)chunksSortMode
: 允许控制块在添加到里面之前的排序方式,支持的值:'none' | 'default' |{function}-default:'auto'
excludeChunks
: 允许跳过某些块,(例如,跳过单元测试的块)
9.2clean-webpack-plugin
删除(清理)构建目录
npm install --save-dev clean-webpack-plugin
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
...
plugins: [
...,
new CleanWebpackPlugin(),
...
]
}
9.3mini-css-extract-plugin
提取 CSS
到一个单独的文件中
npm install --save-dev mini-css-extract-plugin
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
...,
module: {
rules: [
{
test: /\.s[ac]ss$/,
use: [
{
loader: MiniCssExtractPlugin.loader
},
'style-loader',
'css-loader',
'sass-loader'
]
}
]
},
plugins: [
...,
new MiniCssExtractPlugin({
filename: '[name].css'
}),
...
]
}
9.4sourceMap
我们实际运行在浏览器的代码是通过 webpack
打包合并甚至是压缩混淆过的代码,所生成的代码并不利于我们的调试和错误定位,我们可以通过 sourceMap
来解决这个问题,sourceMap
本质是一个记录了编译后代码与源代码的映射关系的文件,我们可以通过 webpack
的 devtool
选项来开启 sourceMap
。
module.exports = {
devtool: 'source-map',
...
}
首先,编译后会为每一个编译文件生成一个对应的 .map
文件,同时在编译文件中添加一段对应的 map
文件引入代码 。
...
//# sourceMappingURL=xx.js.map
...
/*# sourceMappingURL=xx.css.map*/
同时,现代浏览器都能够识别 sourceMap
文件,如 chrome
,会在 Sources
面板中显示根据编译文件与对应的 map
文件定位到源文件中,有利于我们的调试和错误定位。
10.WebpackDevServer
每次的代码修改都需要重新编译打包,刷新浏览器,特别麻烦,我们可以通过安装 webpackDevServer
来改善这方面的体验 。
npm install --save-dev webpack-dev-server
启动命令:
npx webpack-dev-server
或者,package.json
中添加 scripts
:
...,
"scripts": {
"server": "webpack-dev-server"
}
修改 webpack.config.js
:
生成的虚拟目录路径,新版已不再使用contentBase,而是static
module.exports = {
...,
devServer: {
// 生成的虚拟目录路径,新版已不再使用contentBase,而是static
//contentBase: "./dist",
static:'./dist',
// 自动开启浏览器
open: true,
// 端口
port: 8081
}
}
启动服务以后,webpack
不在会把打包后的文件生成到硬盘真实目录中了,而是直接存在了内存中(同时虚拟了一个存放目录路径),后期更新编译打包和访问速度大大提升。
11.Proxy
当下前端的开发都是前后端分离开发的,前端开发过程中代码会运行在一个服务器环境下(如当前的 WebpackDevServer
),那么在处理一些后端请求的时候通常会出现跨域的问题。WebpackDevServer
内置了一个代理服务,通过内置代理就可以把我们的跨域请求转发目标服务器上(WebpackDevServer
内置的代理发送的请求属于后端 - node
,不受同源策略限制),具体如下:
后端代码,以 node 为例 :
const Koa = require('koa');
const KoaRouter = require('koa-router');
const app = new Koa();
const router = new KoaRouter();
router.get('/api/info', async ctx => {
ctx.body = {
username: 'zMouse',
gender: 'male'
}
})
app.use( router.routes() );
app.listen(8787);
前端代码:
axios({
url: 'http://localhost:8787/api/info'
}).then(res => {
console.log('res',res.data);
})
默认情况下,该代码运行以后会出现跨域请求错误,修改 webpack
配置 :
module.exports = {
...,
devServer: {
// 生成的虚拟目录路径
contentBase: "./dist",
// 自动开启浏览器
open: true,
// 端口
port: 8081,
proxy: {
'/api': {
target: 'http://localhost:8787'
}
}
}
}
通过 proxy
设置,当我们在当前 WebpackDevServer
环境下发送以 /api
开头的请求都会被转发到 http://localhost:8787 目标服务器下。
修改前端代码 :
axios({
//url: 'http://locahost:8081/api/info',
url: '/api/info'
}).then(res => {
console.log('res',res.data);
})
注意 url
地址要填写 WebpackDevServer
域,比如当前 WebpackDevServer
开启的是 http://localhost:8081,也就是我们当前前端代码运行的环境,那么请求的 url
也必须发送到这里,当我们的请求满足了 proxy
中设置的 /api
开头,那么就会把请求转发到 target
,所以最后的实际请求是:http://lcoahost:8787/api/info 。
12.Hot Module Replacement
在之前当代码有变化,我们使用的 live reload
,也就是刷新整个页面,虽然这样为我们省掉了很多手动刷新页面的麻烦,但是这样即使只是修改了很小的内容,也会刷新整个页面,无法保持页面操作状态。HMR
随之就出现了,它的核心的局部(模块)更新,也就是不刷新页面,只更新变化的部分 。
module.exports = {
...,
devServer: {
// 生成的虚拟目录路径
contentBase: "./dist",
// 自动开启浏览器
open: true,
// 端口
port: 8081,
// 开启热更新
hot:true,
// 即使 HMR 不生效,也不去刷新整个页面(选择开启)
hotOnly:true,
proxy: {
'/api': {
target: 'http://localhost:8787'
}
}
}
}
开启 HMR
以后,当代码发生变化,webpack
即会进行编译,并通过 websocket
通知客户端(浏览器),我们需要监听处理来自 webpack
的通知,然后通过 HMR
提供的 API
来完成我们的局部更新逻辑 。
./fn1.js :
export default function() {
console.log('start1!');
}
index.js :
import fn1 from './fn1.js';
box1.onclick = fn1;
if (module.hot) {//如果开启 HMR
module.hot.accept('./fn1.js', function() {
// 更新逻辑
box1.onclick = fn1;
})
}
上面代码就是 当 ./fn1.js 模块代码发生变化的时候,把最新的 fn1 函数绑定到 box1.onclick 上
从上面就可以看到,HMR
其实就是以模块为单位,当模块代码发生修改的时候,通知客户端进行对应的更新,而客户端则根据具体的模块来更新我们的页面逻辑(这些逻辑需要自己去实现),好在当前一些常用的更新逻辑都有了现成的插件。
css热更新
样式热更新比较简单,style-loader
中就已经集成实现了,我们只需要在 use
中使用就可以了
react 热更新
-
react 脚手架中也有集成
vue 热更新
-
vue 脚手架中也有集成
10.演示案例
实现了打包txt,html文件,sourceMap,热更新(WebpackDevServer)
//webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
mode: 'development',
devtool: 'source-map',
devServer: {
// 生成的虚拟目录路径
static: "./dist",
// 自动开启浏览器
open: true,
// 开启热更新
hot:true,
// 即使 HMR 不生效,也不去刷新整个页面(选择开启)
hotOnly:true,
// 端口
port: 8081
},
entry: './src/main.js',
output: {
path: path.resolve(__dirname, "dist"),
filename: "test.js",
//多入口多出口(`entry` 为对象)
// filename: "[name].js"
},
module:{
rules: [
{
test: /\.(txt|md)$/,
use: 'raw-loader'
},
{
test: /\.html$/i,
loader: "html-loader",
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
],
},
plugins: [
new HtmlWebpackPlugin({
title: "My App",
filename: "app.html",
template: "./src/1.html"
})
]
}
目录结构: