1.初始化
首先创建一个文件夹存放我们的项目代码
image.png
注意：文件夹名字不要使用关键字webpack哦，会造成报错
npm init -y
通过这个命令来初始化生成package.json文件
2.添加文件
foo.js
export default "foo";
index.js
// /* webpackChunkName: "foo"*/: 魔法字符串，设置打包后的chunk名
import(/* webpackChunkName: "foo" */ "./foo").then((foo) => {
console.log(foo);
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack</title>
</head>
<body>
<script src="./dist/main.bundle.js"></script>
</body>
</html>
3、安装webpack
本地
npm install webpack webpack-cli --save-dev
全局
npm install webpack --global
安装完成后查看package.json 文件可以看到添加了如下代码
{
...
+ "devDependencies": {
+ "webpack": "^5.51.1",
+ "webpack-cli": "^4.8.0"
+ }
...
}
4.添加配置文件
新增webpack.config.js文件
image.png
webpack.config.js
const { resolve } = require('path');
module.exports = {
mode: 'development', // 标识不同的环境，development 开发 | production 生产
devtool: 'hidden-nosources-source-map',
entry: './src/index.js', // 文件入口
output: {
path: resolve(__dirname, 'dist'), // 输出目录
filename: '[name].bundle.js', // 输出文件名称
}
}
需要注意的是devtool在webpack5的情况下不能设置为‘none’，或‘’，会引起如下报错。
image.png
5.打包
在package.json中添加如下命令
image.png
"build": "webpack"
现在在终端执行 npm run build 就可以生成打包文件了。执行完成后我们可以发现项目下新增了dist文件夹。
image.png
6.查看打包结果
打开index.html
image.png
可以看到我们在index.js中打印的foo.js已经打印在控制台中了。
