我又来了！！今天给大家带来的是关于webpack的学习，今天我们就来一起学习一下非常经典的前端打包的工具----webpack。
webpack的历史
介绍webpack之前我们先想想，什么是前端项目？html,css,javascript,图片，音频，视频，图标......
随着项目越来越大，我们在做项目的时候，如果是小项目的话，我们可以手动的通过一些标签来维护。比如:
<script src=""></script>来引入js文件，或者是通过<link rel="stylesheet" type="text/css" href="style.css">来引入css文件。
但是这样会出现很多问题，比如我们项目，资源等等越来越大，越来越复杂，越来越臃肿的时候，我们手动维护的时候会随着依赖的js,css文件越来越多而导致越来越难以维护，越来越臃肿。而且当文件间有复杂的依赖关系的时候，比如js2依赖js1的时候，我们可能要先写js1,再写js2，不然就会出现未定义的问题。我们在引入js的依赖的时候，需要严格按照依赖的顺序来书写，就非常难以维护。还有，如果我们想要引入Less,Sass,Scss这些css预编译器的时候，会难以接入。最后，我们在开发的时候，可能也会出现JS,图片，资源模型不一致的问题。
开始
既然有这些问题，我们来一起学习一下伟大的旧时代格局的破局者--webpack吧。
webpack本质上是一种编译打包工具。可以打包多份文件。
接下来我们开始使用webpack
使用
首先我们初始化一个项目。打开文件夹输入npm init -y初始化项目。这里我们采用npm包管理工具。
这句话其实就是初始一个package.json文件。用于配置一些属性或者是依赖。
当然我们在使用的时候可能会需要一些依赖，大家也可以参考我的package.json的配置
{
"name": "webpack-project",
"version": "1.0.0",
"description": "这是描述部分，这是一个Webpack的demo",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development",
"build": "webpack --mode production"
},
"keywords": [],
"author": "lyy",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.20.12",
"@babel/preset-env": "^7.20.2",
"babel-loader": "^9.1.2",
"html-webpack-plugin": "^5.5.0",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.11.1"
},
"dependencies": {
"css-loader": "^6.7.3",
"style-loader": "^3.3.1"
}
}
可以看到，这里我们依赖了"@babel/core,@babel/preset-env,babel-loader,html-webpack-plugin,webpack,webpack-cli,webpack-dev-server。css-loader,style-loader。
接下来我们创建一个webpack.config.js配置文件!!
我们可以尝试添加如下配置:
/**
* @type {import('webpack').Configuration}
*/
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/main.js',
output: {
filename: "[name].js",
path: path.join(__dirname,"./dist"),
},
mode:"development",
devServer: {
hot: true,
open: true
},
plugins: [new HTMLWebpackPlugin()],
// module: {
// rules:[{
// test: /\.less$/i,
// use: ['style-loader','css-loader','less-loader']
// }]
// }
module: {
rules:[{
test: /\.css$/,
use: ['style-loader','css-loader']
}]
}
}代码好长，我们来讲一讲，其实就是我们首先通过require来添加所需的依赖，比如path,插件'html-webpack-plugin'。然后我们开始写我们的入口文件，这里通过entry指定入口文件，接下来通过output来指定打包后的存储目录，通过mode来选择开发环境或者是生产环境，再通过devServer来实现一个热更新的效果。我们打包的时候需要自动生产html文件，所以这里我们指定插件。最后webpack只认识js，我们要处理css时候要指定规则。
开始操作
npm i 之后，我们创建如下目录。
最后演示一下各个文件
function createDiv() {
let body = document.querySelector('body');
while(body.firstChild) {
body.removeChild(body.firstChild);
}
let div = document.createElement("div");
div.append("哈哈");
body.append(div);
}
module.exports = createDiv;
createDiv.js中导出一个创建div的js函数，用于后续测试。
function add(a,b) {
return a+b;
}
module.exports = add;我们在fun.js中创建一个函数加法的函数，同样用于测试。
再创建一个css文件用于测试是否识别css文件
html,body {
width: 100%;
height: 100%;
margin: 0;
}
* {
color: brown;
background-color: aqua;
}
div {
width: 100px;
height: 100px;
background-color: cadetblue;
}
最后创建一个主入口
import './index.css';
const add = require('./fun');
const createForm = require("./createDiv");
console.log("Hello world");
console.log(add(1,2));
let body = document.querySelector('body');
let div = document.createElement("div");
div.append("你好");
body.appendChild(div);
createForm();这是main.js，导入了之前的js和css文件，我们测试一下效果。
npx webpack
打包后发现dist目录
最后我们npx webpack serve跑一下，成功。
看看效果
没什么问题，是预期效果。
