day28JS+Node-JS打包工具Webpack
1. 什么是Webpack
在 Node.js 环境下使用的 Webpack 是一个基于 JavaScript 的 静态模块打包工具（Static Module Bundler），它运行在 Node.js 环境中，但主要用于构建和优化前端项目（如 React、Vue 等）。
Webpack 是一个 npm 包（通过 npm install webpack 安装），运行在 Node.js 环境中，但生成的是前端代码（如浏览器可运行的 JS、CSS、HTML）。
2. Webpack 的核心功能
-
将分散的前端模块（JS、CSS、图片等）打包成少数优化后的文件。
-
处理依赖关系、代码转译（如 Babel）、资源加载（如 CSS/图片）等。
3. Webpack基本配置
3.1 以下是需要下载的插件
1.webpage拷贝插件
"copy-webpack-plugin": "^6.4.1",2.webpack的html生成插件
"html-webpack-plugin": "^4.5.1",3.webpack插件
"webpack": "^4.46.0",4.webpack命令插件
"webpack-cli": "^3.3.12",5.webpack静态服务插件
"webpack-dev-server": "^3.11.2"6.art模板和模板加载插件
"art-template":"^4.13.2"
"art-template-loader":"^1.4.3"7.用于清除因配置hash名而产生上次生成的同样文件
"clean-webpack-plugin":"^3.0.0"8.用于对于js中import引入的css做解析
"css-loader":"^5.0.2"
"style-loader":"^1.3.0"9.页面用bootstrap框架"bootstrap": "^4.6.0",10. 基于jquery"jquery": "^3.5.1",11.前端页面使用的router路由 "sme-router": "^0.12.8"3.2 webpack4 具体的配置信息
先创建一个webpack.config.js ，webpack4 具体内容如下:
var path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");
var CopyPlugin = require("copy-webpack-plugin");
var {CleanWebpackPlugin}=require("clean-webpack-plugin");
module.exports = {1. 开发环境或者生产环境mode: "development",2. 生成map映射文件，当项目被打包后会压缩，// 有这个map文件就可以更精准的知道是哪个地方出现了错误devtool: "source-map",3. 限制打包文件内容过大performance: {hints: false},4. 入口，在整个html页面中执行的入口js文件//前面是编译过的地址，后面是编译前的地址entry: {"js/app": "./src/app.js"},5. 出口配置，自动生成压缩后的文件夹output: {// 输出路径path: path.join(__dirname, "./dist"),// 输出生成的js文件,在这里[name]是原文件名是什么就导出对应的名字//[hash:6] 自动增加尾缀hash值用来区分上一次的文件，减少因为缓存引入上次的文件问题filename: "[name]-[hash:6].js"},6.模块module: {rules: [//配置art-template-loader模块，用于加载所有.art的文件并且根据需求加载完成后解析{ test: /\.art$/, use: { loader: "art-template-loader" } },//配置CSS文件的import引入和解析{ test: /\.css$/i,use: ["style-loader", "css-loader"] }]},7. webpage提供的插件plugins: [// 用于自动构建html页面的插件new HtmlWebpackPlugin({// 网页源目录template: path.join(__dirname, "./public/index.html"),// 目标文件名app: "index.html",// 注入jsinject: true}),8. 用于复制源文件夹中指定的文件new CopyPlugin({// 插件配置 from从某文件夹复制，to到某文件夹patterns: [{ "from": "./public/img", "to": path.join(__dirname, "./dist/img/") },{ "from": "./public/css", "to": path.join(__dirname, "./dist/css/") },{ "from": "./public/js", "to": path.join(__dirname, "./dist/js/") },{ "from": "./public/fonts", "to": path.join(__dirname, "./dist/fonts/") }]}),9.清除上次因为使用hash名称产生的相同文件 "[name]-[hash:6].js"这里配置造成new CleanWebpackPlugin()],10. 设置服务配置，开启静态服务devServer: {// 目标静态服务器地址指向的文件夹contentBase: path.join(__dirname, "./dist"),// 端口号port: 4001,//设置代理服务，解决跨域问题proxy:{"/api":{target:"http://localhost:3000"}}}
}3.3 webpack5 具体的配置信息
webpack5具体配置如下:
import path from "path";
import HTMLWebpackPlugin from "html-webpack-plugin";
import {CleanWebpackPlugin} from "clean-webpack-plugin";
export default {1. 开发环境或者生产环境mode:"production",2.生成map映射文件，当项目被打包后会压缩，// 有这个map文件就可以更精准的知道是哪个地方出现了错误devtool:"source-map",3. 取消限制打包文件内容过大performance: {hints: false},4. 入口，在整个html页面中执行的入口js文件//前面是编译过的地址，后面是编译前的地址entry:{"./js/app":"./src/index.js"},5. 出口配置，自动生成压缩后的文件夹output:{// 输出路径path:path.join(path.resolve(),"./dist"),// 输出生成的js文件,在这里[name]是原文件名是什么就导出对应的名字//[hash:] 自动增加尾缀hash值用来区分上一次的文件，减少因为缓存引入上次的文件问题filename:"[name]-[fullhash].min.js"},module:{rules:[//配置解析stylus，并且导入{test:/\.styl$/i,use:["style-loader","css-loader","stylus-loader"]},//配置解析art{test:/\.art$/i,use:{loader:"art-template-loader"}},//配置解析svg格式文件{test:/\.svg$/i,type: 'asset'}]},plugins:[// 用于自动构建html页面的插件new HTMLWebpackPlugin({// 网页源目录template:path.join(path.resolve(),"./src/index.html"),// 注入jsinject:true}),6.清除上次因为使用hash名称产生的相同文件 "[name]-[fullhash].js"这里配置造成new CleanWebpackPlugin()],devServer:{7.创建静态服务资源static:{//静态资源路径directory:path.join(path.resolve(),"./public"),//服务器打开路径publicPath:path.join(path.resolve(),"./dist")},8.端口号port:5500,//代理//因为通信中可能要考虑向不同的服务器通信，因此在这里配置访问代理时//在路径中加入指向服务别名 http://localhost:5500/a/user/login//实际我们访问的应该是 http://localhost:4000/user/login//这里的a就是代表不同服务器的别名，访问5500端口号就会根据这个别名//指向对应的localhost:4000的地址，保留后面的/user/login路由proxy:{//设置代理服务，解决跨域问题"/a":{target:"http://localhost:4000",//把/a清除掉pathRewrite:{"/a":""}}}}
}3.3 配置script中的命令
"scripts": {1.用于执行webpack打包项目"build": "npx webpack",2.webpack4中使用用于开启webpack静态服务"dev": "npx webpack-dev-server"3.webpack5中使用用于开启静态服务，并且提供静态路径"dev": "webpack serve --static"}3.4 网页中的静态路径配置
publicimgcss
srcviewsapp.js4. webpack5 配置实践
4.1 配置package.json
1.正在项目目录下执行npm init -y 初始化文件。
2.编写package.json，配置依赖。
{"name": "0920","version": "1.0.0","description": "","main": "index.js","type": "module",2.配置启动命令"scripts": {"start": "cross-env mode=development webpack serve --static","dev": "cross-env mode=development webpack","des": "cross-env mode=production webpack"},"keywords": [],"author": "","license": "ISC","devDependencies": {5. 配置clean-webpack-plugin，用于在每次构建前清理/删除输出目录的 Webpack 插件，确保输出目录只包含当前构建生成的文件，避免旧文件残留。"clean-webpack-plugin": "^4.0.0","cross-env": "^7.0.3",7，配置解析css插件"css-loader": "^7.1.2",3. 配置html-webpack-plugin，是 Webpack 的一个核心插件，用于简化 HTML 文件的创建"html-webpack-plugin": "^5.6.0",6，配置解析style插件"style-loader": "^4.0.0","stylus": "^0.63.0","stylus-loader": "^8.1.1",1.配置webpack的依赖"webpack": "^5.94.0","webpack-cli": "^5.1.4",4，配置webpack-dev-server 是 Webpack 官方提供的开发服务器工具，它为前端开发提供了实时重新加载(live reloading)和模块热替换(HMR)等功能，极大提高了开发效率。"webpack-dev-server": "^5.1.0"},"dependencies": {"axios": "^1.7.7"}
}
执行npm i 下载依赖。
4.2 准备内容
3. 在项目目录下新建src和public文件夹。在src文件夹下新建一个index.js文件、一个components文件夹和stylus文件夹。在components文件夹下新建一个Box.js文件和Ball.js文件。
4. 编写Box.js文件和和Ball.js文件。
Box.js文件：
export default class Box{constructor(){}play(){console.log("play");}
}Ball.js文件：
import Box from "./Box.js";export default class Ball extends Box{constructor(){super()}run(){console.log("run");}
}5. 编写index.js文件
import Ball from "./components/Ball.js";
import axios from "axios";
import "./stylus/main.styl";
var b=new Ball();
b.play();
b.run();
console.log("c");axios.get("http://localhost:5200/a/users").then((result)=>{console.log(result);
})
7. 在stylus文件夹下新建main.styl文件
w=150px;
set-block(w=50px,h=50px,c=red){width w;height: h;background-color: c;
}
.div1set-block(w,w)8. 在public文件夹中新建一个css文件夹和html文件夹。在css文件夹新建一个a.css。在html文件夹新建一个indx.html文件。
a.css：div{color:white;
}index.html:<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="/css/a.css">
</head>
<body><div class="div1">页面</div>
</body>
</html>4.3 配置webpack.config.js
9. 在根目录下新建一个webpack.config.js的文件。
import path from "path";
4.引入html-webpack-plugin，用于简化 HTML 文件的创建
import HTMLWebpackPlugin from "html-webpack-plugin";
6.引入clean-webpack-plugin，用于每次构建前清理/删除上一次自动生成的文件。
import { CleanWebpackPlugin } from "clean-webpack-plugin";
export default {3. 配置是运行环境，否压缩内容，process是没有压缩的，development是压缩的，两种都配置需要在package.json文件中配置“script”mode: process.env.mode,8.定位文件中报错代码的位置，会在dist/js文件下生成一个.map的文件。devtool: "source-map",1.配置入口文件entry: {入口文件的key:入口文件路劲"./js/main": "./src/index.js"},2.将入口文件中的所有内容打包在根路径的dist文件路劲下，并取名为min.jsoutput: {path: path.join(path.resolve(), "./dist"),[name]：表示入口文件的key。[hash:6]：表示生成随机的6位哈希码。min：表示压缩filename: "[name]-[hash:6].min.js"}, 这样配置生成的文件应该在dist/js/main-6ba25a.main.js。6ba25a就是随机生成的6位哈希码，这样就保证了每次生成的文件名不一样。5.使用html-webpack-pluginplugins: [new HTMLWebpackPlugin({5.1 配置使用模板的路劲template: path.join(path.resolve(), "./public/html/index.html"),5.2 将刚才生成好的min.js注入到index.htmlinject: true}),7.使用clean-webpack-plugin自动清除new CleanWebpackPlugin()],8. 使用解析styl插件module: {rules: [{ test: /\.styl$/, use: ["style-loader", "css-loader", "stylus-loader"] }]},6. 使用的配置webpack-dev-server devServer: {端口号port: 5200,static: {配置静态资源目录的路劲directory: path.join(path.resolve(), "./public"),静态资源生成的位置publicPath: path.join(path.resolve(), "./dist")},配置代理proxy: [{ // 匹配需要代理的请求路径（所有以/a开头的请求）context: ['/a'],// 目标服务器地址（后端API地址）target: 'http://124.70.31.133:4000',// 路径重写规则：将请求路径中的/a替换为空字符串 pathRewrite: { '^/a': '' },}]}
}4.4 配置scripts
10.在package.json中配置多个运行环境
{...."scripts": {"start": "cross-env mode=development webpack serve --static","dev": "cross-env mode=development webpack","des": "cross-env mode=production webpack"},
....
}当启动项目是会根据启动的命令进行执行不同的启动环境。
例如：
npm run stsrt 启动的就是 "start": "cross-env mode=development webpack serve --static"。
npm run dev 启动的就是 "dev": "cross-env mode=development webpack"。
npm run des 启动的就是 "des": "cross-env mode=production webpack"。
11. 执行npm run dev 就在生成了dist文件夹。
12. 运行npm run start 。
13. 访问地址：
