操作环境如下
macos: 12.4
node: v14.17.0
yarn: 1.22.18一、打包第一个文件
新建文件夹webpack-study
执行 npm init -y 生成package.json
安装webpack
yarn add webpack webpack-cli -D // -D 表示安装在开发环境npx webpack —version
- webpack: 5.75.0
- webpack-cli: 5.0.1
新建文件夹src > index.js
因为webpack的默认入口就是src/index.js
function helloworld(name) {
document.write(name || "hello webpack");
}
helloworld();执行./node_modules/.bin/webpack
因为webpack没有全局安装，这里我们先在node_module/.bin下运行webpack，这个时候会生成一个dist目录，里面有一个main.js,第一个项目就打包完成了
dist -> index.html
<script src="main.js"></script> // 引入打包后的文件查看index.html效果，不出意外的话我们的第一个应用就打包成功了
本章我们的目录结构如下
├── dist
│ └── main.js
│ └── index.html
├── node_modules
├── src
│ └── index.js
├── package.json
└── yarn.lock二、添加webpack.config.js
const path = require("path");
module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
},
};- entry是入口文件目录，多入口需要改为对象
- output 1. path: 指定了构建输出目录2. filename: 打包后的文件名 package.json中添加build命令
"scripts": {
"build": "webpack"
}npm run build本章我们的目录结构如下
├── dist
│ └── bundle.js
│ └── index.html
├── node_modules
├── src
│ └── index.js
├── package.json
└── webpack.config.js