一、项目初始化、安装webpack/webpack-cli、第一次打包
1）项目初始化
npm init
输入项目名，其它默认即可
命令完成后会在项目下生成一个package.json:
package name: (webpack) webpack1
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to F:\Demo\webpack\package.json:
内容如下
{
"name": "webpack1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
2）安装webpack和webpack-cli:全局工具及项目开发依赖
2.1全局安装
cnpm i webpack webpack-cli -g
2.2项目开发依赖安装
cnpm i webpack webpack-cli -D
-D相当于：
--save-dev
命令完成后package.json增加了如下：
“devDependencies”: {
“webpack”: “^5.11.0”,
“webpack-cli”: “^4.2.0”
}
3）编写入口文件src/index.js
/*
入口文件：打包时以此为入口
*/
function add(a,b){
return a+b
}
console.log(add(1,2))
4）开发环境打包development和生产环境打包production
- 开发环境打包：
webpack ./src/index.js -o ./build --mode=development
含义：以index.js为入口文件，打包输出到./build/main.js，以开发模式- 生产环境打包：
webpack ./src/index.js -o ./builde/build.js --mode=production
含义：以index.js为入口文件，打包输出到build.js，以生产模式
开发环境打包：
webpack ./src/index.js -o ./build/dev --mode=development
生产环境打包：
webpack ./src/index.js -o ./build/pro --mode=production
运行效果：
F:\Demo\webpack\webpack1>webpack ./src/index.js -o ./build/production --mode=pro
duction
[webpack-cli] Compilation finished
asset main.js 15 bytes [emitted] [minimized] (name: main)
./src/index.js 422 bytes [built] [code generated]
webpack 5.11.0 compiled successfully in 327 ms
F:\Demo\webpack\webpack1>webpack ./src/index.js -o ./build/dev --mode=developmen
t
[webpack-cli] Compilation finished
asset main.js 1.18 KiB [emitted] (name: main)
./src/index.js 422 bytes [built] [code generated]
webpack 5.11.0 compiled successfully in 173 ms
开发打包代码：build/dev/main.js
/*
* ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
* This devtool is not 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
/*!**********************!*\
!*** ./src/index.js ***!
\**********************/
eval("/*1.开发环境打包：\r\n webpack ./src/index.js -o ./build --mode=development\r\n 含义：以index.js为入口文件，打包输出到./build/main.js，以开发模式\r\n2.生产环境打包：\r\n webpack ./src/index.js -o ./builde/build.js --mode=production\r\n 含义：以index.js为入口文件，打包输出到build.js，以生产模式\r\n*/\r\n\r\nfunction add(a,b){\r\n return a+b\r\n}\r\n\r\nconsole.log(add(1,2))\n\n//# sourceURL=webpack://webpack1/./src/index.js?");
/******/ })()
;
生产打包如下build/pro/main.js：
console.log(3)
二、webpack本身只能处理js/json文件，其它如css/image都不能处理
1）建一个文件data.json
{
"name":"小明",
"age":18,
"sex":"女"
}
2）引用json：index.js
import data from './data.json'
console.log(data)
3）再次打包
开发模式打包直接入到build根目录：
webpack ./src/index.js -o ./build --mode=development
生产模式打包：
webpack ./src/index.js -o ./build/pro --mode=production
开发模式代码build/main.js
/*
* ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
* This devtool is not 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
/******/ "use strict";
/******/ var __webpack_modules__ = ({
/***/ "./src/data.json":
/*!***********************!*\
!*** ./src/data.json ***!
\***********************/
/***/ ((module) => {
eval("module.exports = JSON.parse(\"{\\\"name\\\":\\\"小明\\\",\\\"age\\\":18,\\\"sex\\\":\\\"女\\\"}\");\n\n//# sourceURL=webpack://webpack1/./src/data.json?");
/***/ }),
/***/ "./src/index.js":
/*!**********************!*\
!*** ./src/index.js ***!
\**********************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _data_json__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./data.json */ \"./src/data.json\");\n/*入口文件：打包从此处开始\r\n\r\n1.开发环境打包：\r\n webpack ./src/index.js -o ./build --mode=development\r\n 含义：以index.js为入口文件，打包输出到./build/main.js，以开发模式\r\n2.生产环境打包：\r\n webpack ./src/index.js -o ./builde/build.js --mode=production\r\n 含义：以index.js为入口文件，打包输出到build.js，以生产模式\r\n*/\r\n\r\nfunction add(a,b){\r\n return a+b\r\n}\r\n\r\nconsole.log(add(1,2))\r\n\r\nconsole.log(_data_json__WEBPACK_IMPORTED_MODULE_0__)\n\n//# sourceURL=webpack://webpack1/./src/index.js?");
/***/ })
/******/ });
/************************************************************************/
/******/ // The module cache
/******/ var __webpack_module_cache__ = {
};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(__webpack_module_cache__[moduleId]) {
/******/ return __webpack_module_cache__[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = __webpack_module_cache__[moduleId] = {
/******/ // no module.id needed
/******/ // no module.loaded needed
/******/ exports: {
}
/******/ };
/******/
/******/ // Execute the module function
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/************************************************************************/
/******/ /* webpack/runtime/make namespace object */
/******/ (() => {
/******/ // define __esModule on exports
/******/ __webpack_require__.r = (exports) => {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, {
value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', {
value: true });
/******/ };
/******/ })();
/******/
/************************************************************************/
/******/ // startup
/******/ // Load entry module
/******/ __webpack_require__("./src/index.js");
/******/ // This entry module used 'exports' so it can't be inlined
/******/ })()
;
生产模式代码build/pro/main.js
(()=>{
"use strict";const e=JSON.parse('{"name":"小明","age":18,"sex":"女"}');console.log(3),console.log(e)})();
如果引入了css文件再打包就会报错
总结：wp能做什么
- webpack能处理js/json资源，不能处理css/img等其他资源
- 生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化~
- 生产环境比开发环境多一个压缩js代码。
转载：https://blog.csdn.net/u010132177/article/details/111401868
查看评论