全局安装 webapck 和 Webpack-cli

npm i webpack webpack-cli -g

安装完后，输入 webpack -v，能看到正确的版本就对了

webpack -v

# webpack-cli 4.2.0
# webpack 5.6.0

初始化一个项目

初始化项目，生成一个 package.json，新增一条 npm 脚本 build

npm init -y

{
  "name": "previwe-image-plagin",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

配置 Webpack

新建 webpack.config.js

const { resolve } = require('path')
const config = {
	mode: 'production',
	entry: './index.js', // 入口文件路径
	output: {
		filename: 'index.js', // 输出文件名
		path: resolve(__dirname, 'dist')  // 输出文件路径
	}
}

module.exports = config

运行打包

直接在终端输入 npm run build 就可了，打包成功后，会生成一个 dist 文件夹，里面的文件就是打包后的代码