环境准备

全局安装webpack和webapck-cli

npm install --global webpack webpack-cli

查看版本

webpak -v
----------------------------------
webpack 5.37.1
webpack-cli 4.7.0

新建项目文件夹,并初始化

mkdir webpack-01
npm init
npm install webpack webpack-cli --save-dev

最终package.json

{
  "name": "webpack-01",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.37.1",
    "webpack-cli": "^4.7.0"
  }
}

新建一个hello.js, 并编译打包

function hello(str){
    alert(str)
}

编译打包

# ./hello.js是入口文件 --output-path ./ 指定输出文件夹,为当前文件夹(如果不指定该参数默认输出到dist文件夹) --output-filename bundle.js 指定输出文件的文件名称   --mode development 指定为开发模式, 注意 `./` 是必须的
webpack ./hello.js --output-path ./ --output-filename bundle.js --mode development
---------------------------------------------------------
asset bundle.js 1.2 KiB [compared for emit] (name: main)
./hello.js 39 bytes [built] [code generated]
webpack 5.37.1 compiled successfully in 66 ms

打包后的bundle.js内容

/*
 * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
 * This devtool is neither made for production nor for readable output files.
 * It uses "eval()" calls to create a separate source file in the browser devtools.
 * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
 * or disable the default devtool with "devtool: false".
 * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
 */
/******/ (() => { // webpackBootstrap
/******/    var __webpack_modules__ = ({

/***/ "./hello.js":
/*!******************!*\
  !*** ./hello.js ***!
  \******************/
/***/ (() => {

eval("function hello(str){\r\n    alert(str)\r\n}\n\n//# sourceURL=webpack://webpack-01/./hello.js?");

/***/ })

/******/    });
/************************************************************************/
/******/    
/******/    // startup
/******/    // Load entry module and return exports
/******/    // This entry module can't be inlined because the eval devtool is used.
/******/    var __webpack_exports__ = {};
/******/    __webpack_modules__["./hello.js"]();
/******/    
/******/ })()
;