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 以下是需要下载的插件
javascript
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 具体内容如下:
javascript
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",
// 注入js
inject: 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 具体的配置信息
javascript
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"),
// 注入js
inject: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中的命令
javascript
"scripts": {
1.用于执行webpack打包项目
"build": "npx webpack",
2.webpack4中使用用于开启webpack静态服务
"dev": "npx webpack-dev-server"
3.webpack5中使用用于开启静态服务，并且提供静态路径
"dev": "webpack serve --static"
}3.4 网页中的静态路径配置
javascript
public
img
css
src
views
app.js4. webpack5 配置实践
4.1 配置package.json
1.正在项目目录下执行npm init -y初始化文件。
2.编写package.json，配置依赖。
javascript
{
"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 准备内容
- 在项目目录下新建src和public文件夹。在src文件夹下新建一个index.js文件、一个components文件夹和stylus文件夹。在components文件夹下新建一个Box.js文件和Ball.js文件。
- 编写Box.js文件和和Ball.js文件。
javascript
Box.js文件：
export default class Box{
constructor(){
}
play(){
console.log("play");
}
}
javascript
Ball.js文件：
import Box from "./Box.js";
export default class Ball extends Box{
constructor(){
super()
}
run(){
console.log("run");
}
}- 编写index.js文件
javascript
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);
})- 在stylus文件夹下新建main.styl文件
css
w=150px;
set-block(w=50px,h=50px,c=red){
width w;
height: h;
background-color: c;
}
.div1
set-block(w,w)- 在public文件夹中新建一个css文件夹和html文件夹。在css文件夹新建一个a.css。在html文件夹新建一个indx.html文件。
css
a.css：
div{
color:white;
}
html
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
- 在根目录下新建一个webpack.config.js的文件。
javascript
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.js
output: {
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-plugin
plugins: [
new HTMLWebpackPlugin({
5.1 配置使用模板的路劲
template: path.join(path.resolve(), "./public/html/index.html"),
5.2 将刚才生成好的min.js注入到index.html
inject: 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中配置多个运行环境
javascript
{
....
"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"。
- 执行npm run dev 就在生成了dist文件夹。
-
运行npm run start 。
-
访问地址：
