一、webpack是什么
webpack 是一个用于今世 JavaScript 应用步调的静态模块化打包构建工具
Webpack的运行须要依赖Node.js，因此须要先安装Node.js。
[下载地点](Node.js 中文网 (nodejs.cn)
// 查察版本node - v // 比方 ：v16.13.1二、webpack快速使用
2.1 初始化package.json
npm init -y2.2 安装webpack干系依赖
npm i webpack webpack-cli -D2.3 写一点点测试代码
src目次下 创建 main.js,tools.js
public目次下 index.html 引入dist/main.js
tools.js
// 随意写的两个方法module.exports = { add:function(a,b) { return a+b }, jian:function(a,b) { return a-b }}main.js
// 引入 tools文件 const tools = require('./tools') console.log('tools',tools.add(4,6));2.4 在package.json中添加打包脚本
{ .... "scripts": { "build":"webpack" }, ... }2.5 编写webpack设置文件
编写webpack设置文件，让webpack实现灵活情况定制，如下：
//引入干系依赖const path=require('path')//创建一个webpak设置对象const config = { // 设置模式 mode:'development', //设置入口 entry:'./src/main.js', //设置出口 output: { //打包路径 path:path.resolve(__dirname,'dist'), // dist 打包后的文件名 //打包文件名 filename: 'js/bundle.js', //清理无用文件 clean:tru }}//抛出 module.exports = config2.5 安装webpack服务器
- 安装webpack-dev-server： npm i webpack-dev-server -D
- 设置webpack.config.js
{ .... //设置webpack服务器 devServer: { port: 9999, // '9999'自定义 //静态目次位置 static: { directory:'dist' } } ....} 3.设置package.json运行脚本
{ ... "scripts": { "build": "webpack", "serve": "webpack serve" }, ...}末了：使用下令打包
npm run build |
