Webpack打包工程其实主要涉及3个配置：源码入口，使用哪些Loader加载资源，以及如何输出Bundle。这篇笔记我们以一个例子的形式，演示如何使用Webpack对一个工程进行打包。
我们的例子工程结构如下：
|_node_modules
|_dist
|_index.html
|_bundle.js
|_src
|_main.js
|_util.js
|_webpack.config.js
|_package.json
src文件夹下是我们的JavaScript源码，为了展示Webpack的打包功能，我们将其分为了两个文件，而dist/bundle.js就是Webpack打包输出的产物，这个JavaScript源代码文件在index.html中被引用。此外，webpack.config.js是Webpack工具的配置文件，其中配置了Webpack打包的入口和输出产物等信息。
index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="bundle.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
HTML代码中没有什么特别的，它引入了Webpack的输出产物bundle.js，此外代码中有一个ID为app的<div>标签，我们的例子代码会在其中显示一些信息。
main.js
import renderData from './util';
window.onload = () => {
const ele = document.querySelector('#app');
renderData(ele);
};
util.js
const renderData = (ele) => {
ele.innerHTML = '<h1>Hello, Webpack!</h1>';
};
export default renderData;
main.js是我们程序的入口文件，它通过ESM引入了另一个模块util.js。Webpack工具对ESM模块，CommonJS模块，AMD模块这三种常见的模块机制都进行了支持，而对于其它资源比如CSS等，则需要使用对应的Loader引入。
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/main.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, './dist')
}
};
webpack.config.js是Webpack的配置文件，其中entry指定了程序的入口文件，而output指定了输出文件名，以及输出到哪个文件夹。
package.json
{
"name": "demo-webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --mode production"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.84.0",
"webpack-cli": "^5.1.1"
}
}
package.json中，我们通过npm script执行Webpack命令进行打包，这里--mode production表示使用生产模式打包。
执行npm run build后，可以看到自动生成了bundle.js，我们可以观察其中的内容：
(()=>{"use strict";window.onload=()=>{(e=>{e.innerHTML="<h1>Hello, Webpack!</h1>"})(document.querySelector("#app"))}})();
上面代码我们可以看到，Webpack可以将多个源代码文件打包为一个文件，但bundle.js中的代码仍然是高版本的JavaScript语法。至今为止，低版本IE、Safari等这些古代浏览器仍然存在，出于浏览器兼容性考虑，将前端代码编译为ES5还是最稳妥的做法，这需要使用Babel工具和babel-loader。
npm install --save-dev babel-loader @babel/core @babel/preset-env
此时我们向Webpack配置文件中添加一些配置。
const path = require('path');
module.exports = {
entry: './src/main.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, './dist')
},
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
};
代码中，我们指定了对.js和.mjs文件使用babel-loader，presets配置的是Babel的预设，@babel/preset-env能够让我们使用最新的JavaScript语法。
此时我们再次执行npm run build，即可看到生成的bundle.js已经被转译为ES5代码了。
前面我们已经使用过babel-loader了，实际上Webpack有很多Loader可以使用，这里我们使用Loader来加载Less样式。首先我们需要安装对应的Loader依赖：
npm install --save-dev style-loader css-loader less-loader less
index.less
body {
background-color: #cbcbcb;
}
main.js
import './index.less';
在main.js中，我们使用类似引入ESM模块的方法引入Less源文件，这样Webpack就能识别到这个资源，并在打包过程中，将样式一并打包到bundle.js中。有关更多的Loader使用方法，我们可以参考官方文档：https://webpack.docschina.org/loaders/