首先我们创建一个项目
npm init --yes
在项目里添加一个js文件
touch index.js
然后我们需要安装webpack和webpack-cli
npm i -D webpack webpack-cli
接着在项目根目录下创建一个webpack配置文件
touch webpack.config.js
webpack配置文件最简单只需要两个配置项即可，分别是模式和入口文件。
模式有development 和production 两种模式，表示开发环境和生产环境。
**入口起点(entry point)**指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。当webpack进入入口文件后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
export default {
mode: "development", // 模式 development or production
entry: "./index.js" // 入口文件
}
接下来到package.json的配置执行指令。另外，我们希望在项目中使用ESM，而不是其他模块化方案，因此我们需要在package.json中添加type字段，制定模块化使用ESM
// package.json
// ...
"scripts": {
"test": "echo \\"Error: no test specified\\" && exit 1",
"build": "webpack",
},
"type": "module" // 表明项目使用ES6模块方案
webpack指令是调用webpack进行打包，webpack会自动识别并使用根目录下的配置文件。默认情况下打包后的文件会输出到根目录的dist目录下，并且入口文件会被命名为main.js 。
接下来就运行一下看看
$ npm run build
$ webpack
asset main.js 2.01 KiB [compared for emit] (name: main)
runtime modules 274 bytes 1 module
./index.js 2 bytes [built] [code generated]
webpack 5.73.0 compiled successfully in 105 ms
Done in 1.05s.
可以看到代码已经被打包到dist目录下。