1.初始化
首先創(chuàng)建一個(gè)文件夾存放我們的項(xiàng)目代碼
image.png
注意：文件夾名字不要使用關(guān)鍵字webpack哦钉寝，會(huì)造成報(bào)錯(cuò)
npm init -y
通過(guò)這個(gè)命令來(lái)初始化生成package.json文件
2.添加文件
foo.js
export default "foo";
index.js
// /* webpackChunkName: "foo"*/: 魔法字符串熔吗，設(shè)置打包后的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', // 標(biāo)識(shí)不同的環(huán)境，development 開(kāi)發(fā) | production 生產(chǎn)
devtool: 'hidden-nosources-source-map',
entry: './src/index.js', // 文件入口
output: {
path: resolve(__dirname, 'dist'), // 輸出目錄
filename: '[name].bundle.js', // 輸出文件名稱(chēng)
}
}
需要注意的是devtool在webpack5的情況下不能設(shè)置為‘none’，或‘’，會(huì)引起如下報(bào)錯(cuò)做祝。
image.png
5.打包
在package.json中添加如下命令
image.png
"build": "webpack"
現(xiàn)在在終端執(zhí)行 npm run build 就可以生成打包文件了。執(zhí)行完成后我們可以發(fā)現(xiàn)項(xiàng)目下新增了dist文件夾鸡岗。
image.png
6.查看打包結(jié)果
打開(kāi)index.html
image.png
可以看到我們?cè)趇ndex.js中打印的foo.js已經(jīng)打印在控制臺(tái)中了混槐。
