概念
本 质上，webpack是一个现代 JavaScript 应用程序的 静态模块打包器(module bundler) 。
当 webpack 处理应用程序时，它会递归地构建一个 依 赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle 。
安装
确保安装了nodejs
项目文件环境
1cd mypack 2// 进入你的项目目录 mypack目录可以随意自己建立 3 4npm init 5// 初始化项目文件夹 会创建一个package.js
本地安装
1npm install --save-dev webpack 2npm install --save-dev webpack-cli
对于大多数项目，我们建议本地安装
准备文件
1-- dist 文件生成目录 2---- index.html 3 4-- index.js 主入口文件 5-- header.js 需要被index引入的文件
1# index.html 2<!DOCTYPE html> 3<html lang="cn"> 4<head> 5 <meta charset="UTF-8"> 6 <title>第一个webpack页面</title> 7</head> 8<body> 9 <script src="main.js"></script> 10</body> 11</html> 12<!--打包好的js名称默认是main.js--> 13 14 15# index.js 16import {header} from './header.js' 17document.body.append(header); 18 19 20# header.js 21var header =document.createElement("div"); 22header.innerHTML="你好webpack from header"; 23export {header};
执行命令 打开index.html
1npx webpack index.js 2// 在你的项目目录执行 这里的名称是 mypack 3 4然后打开你的dist/index.html 查看网页文件 5同时你会发现在 dist目录多个main.js这个打包生成好的js文件
使用配置文件
在项目目录 新建一个webpack.config.js
webpack默认配置文件
1const path = require('path') 2// 引入node的 path路径模块 3 4module.exports={ 5 entry:'./index.js', 6 // 指定文件的入口 7 output:{ 8 filename:'main.js', 9 // 定义文件名 10 path:path.resolve(__dirname,'dist') 11 // 定义文件夹 12 // __dirname获取当前目录 13 // path.resolve 方法将路径或路径片段的序列解析为绝对路径 14 } 15 // 指定打包好的出口 16} 17// module.export node中导出模块的意思 18 19# 以下为纯净版本 20const path = require('path') 21module.exports={ 22 entry:'./index.js', 23 output:{ 24 filename:'main.js', 25 path:__dirname+'/dist', 26 } 27}
执行命令npx webpack实现打包
配置 scripts
找到package.js 配置scripts
1"scripts":{ 2 start: "webpack" 3}
这样我们就可以执行
1npm run start 2// yarn start 3
配置模式
1const path = require('path') 2module.exports={ 3 mode:'development', //开发模式 4 // mode:'production',// 产品模式 5 entry:'./index.js', 6 output:{ 7 filename:'main.js', 8 path:path.resolve(__dirname,'dist') 9
产品模式打包的大小要比生产模式要小的多。
1 "scripts": { 2 "dev": "webpack --mode development", 3 "build": "webpack --mode production" 4 },
核 心概念：
- 入口(entry)
- 输出(output)