先 npm init 创建 package.json

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

装webpack webpack-cli

image.png

index.js

/**
 * index.js webpack 入口文件
 * 
 * 打包指令  开发：webpack ./src/index.js -o ./build --mode=development
 *           webpack 会以 ./src/index.js 为入口文件开始打包，打包后会输出到./build  打包环境是开发环境
 

*  打包指令  开发：webpack ./src/index.js -o ./build --mode=production
 *           webpack 会以 ./src/index.js 为入口文件开始打包，打包后会输出到./build/built.js  打包环境是生产环境
 * 
 * 
 * **/

function add(x, y) {
    return x + y;
}

console.log(add(1,2));

webpack ./src/index.js -o ./build --mode=development
生成 build/main.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__ = ({

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

eval("/**\r\n * index.js webpack 入口文件\r\n * \r\n * 打包指令  开发：webpack ./src/index.js -o ./build/built.js --mode=development\r\n *           webpack 会以 ./src/index.js 为入口文件开始打包，打包后会输出到./build/built.js  打包环境是开发环境\r\n \r\n\r\n*  打包指令  开发：webpack ./src/index.js -o ./build/built.js --mode=production\r\n *           webpack 会以 ./src/index.js 为入口文件开始打包，打包后会输出到./build/built.js  打包环境是生产环境\r\n * \r\n * \r\n * **/\r\n\r\nfunction add(x, y) {\r\n    return x + y;\r\n}\r\n\r\nconsole.log(add(1,2));\n\n//# sourceURL=webpack://webpack_test/./src/index.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__["./src/index.js"]();
/******/    
/******/ })()
;

webpack ./src/index.js -o ./build --mode=production
生成 build/main.js

console.log(3);

解析json资源

image.png

/**
 * index.js webpack 入口文件
 * 
 * 打包指令  开发：webpack ./src/index.js -o ./build --mode=development
 *           webpack 会以 ./src/index.js 为入口文件开始打包，打包后会输出到./build  打包环境是开发环境
 

*  打包指令  开发：webpack ./src/index.js -o ./build --mode=production
 *           webpack 会以 ./src/index.js 为入口文件开始打包，打包后会输出到./build/built.js  打包环境是生产环境
 * 
 * 
 * **/

function add(x, y) {
    return x + y;
}

console.log(add(1, 2));

// webpack 能解析json 资源
import data from './data.json'
console.log(data)

输出

image.png

无法解析css资源

image.png

index.js

function add(x, y) {
    return x + y;
}

console.log(add(1, 2));

// webpack 能解析json 资源
import data from './data.json'
console.log(data)

// 无法解析css资源
import './index.css';

打包后报错

image.png

结论：

webpack 可以打包js/json

不能打包css/图片等