webpack官网概念:
本质上,webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时,它会在内部从一个或多个入口点构建一个 依赖图(dependency graph),然后将你项目中所需的每一个模块组合成一个或多个 bundles,它们均为静态资源,用于展示你的内容。
开始:
首先确保安装了node.js
1.初始化、安装
创建一个文件夹,在文件夹地址栏输入 cmd
如图:
进入命令页:
//初始化
npm init -y
//安装
npm i webpack webpack-cli -D
2.配置文件
打开开发工具:
在文件根目录创建 webpack.config.js
webpack核心概念:
entry:入口
output:出口
plugin:插件
loader:加载器
mode:模式
devServer:本地服务器
开始配置:
创建一个src目录 在src下 创建 index.js 作为入口文件 在创建一个实验文件。测试是否打包成功,
# index.js
import elem from "./first.js";
document.body.appendChild(elem);
# first.js
let elem = document.createElement("div");
elem.innerHTML = "你好webpack5.0"
export default elem;
在 webpack.config.js中配置
module.exports = {
// webpack 概念入口,输出,插件,loader
entry: "./src/index.js", //定义入口文件
// 模式 产品,开发
mode: "production", //'可选:开发环境 development
// 输出
output: {
// 路径,__dirname 当前目录
path: __dirname + "/dist",
// 定义文件名
filename: 'main.js',
},
// 优化选项
optimization: {
},
// 模块
module: {
},
plugins: [
// 在webpack的运行过程中(运行过程(生命周期))做一些额外操作处理模板,清理
],
// 本地服务器配置
// npm i webpack-dev-server -D
// 安装本地服务
devServer: {
open: true, //自动打开浏览器
hot: true, //热更新
host: "localhost", //本地域名
port: 8080, //端口号
}
}
注意安装:本地服务:npm i webpack-dev-server -D
使用 npx webpack 命令打包
打包完成后会根据定义的出口输出至定义的文件夹下。生成定义文件名
打开后:
webpack将两个文件合并成功,打包成功