webpack一：專案初始化、安裝webpack/webpack-cli、第一次打包、webpack本身只能處理js/json檔案、webpack作用總結

深藍冰河發表於2020-12-19

一、專案初始化、安裝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程式碼。

webpack（5）webpack處理css檔案
2021-07-11
WebCSS
webpack學習（一）專案中安裝webpack
2019-05-22
Web
webpack打包bundle檔案解析
2020-02-22
Web
webpack打包分析工具（webpack-bundle-analyzer）安裝
2019-07-22
Web
webpack4配置(1)-打包一個js檔案
2019-04-15
WebJS
webpack結合reactjs、vuejs專案中圖片處理
2018-06-29
WebReactJSVue
【Vue專案總結】webpack常規打包優化方案
2019-06-06
VueWeb優化
webpack（6）webpack處理圖片
2021-07-11
Web
webpack練手專案之easySlide（一）：初探webpack
2015-11-30
WebIDE
webpack解惑：多入口檔案打包策略
2016-10-10
Web
antd專案各種webpack打包方案
2018-01-15
Web
webpack踩坑無法解析jquery及webpack-cli
2020-04-16
WebjQuery
Webpack + Vue 多頁面專案升級 Webpack 4 以及打包優化
2019-02-16
WebVue優化
Webpack學習 – Webpack安裝及安裝
2018-05-13
Web
深入理解 webpack 檔案打包機制
2018-01-15
Web
webpack多入口檔案頁面打包配置
2018-01-09
Web
Vue SPA 專案webpack打包優化指南
2018-10-26
VueWeb優化
webpack總結
2019-02-22
Web
webpack watch模式產生*.hot-update.json檔案
2018-03-14
Web模式JSON
webpack 搭建 vue 專案
2017-12-27
WebVue
webpack4 系列教程(十一)：字型檔案處理
2018-10-10
Web
webpack 3 零基礎入門教程 #4 - webpack 的配置檔案 webpack.config.js
2017-12-01
WebJS
webpack打包vue檔案時報錯`Unexpected token:`
2017-05-09
WebVue
VUE-CLI webpack 專案打包部署上線
2017-10-28
VueWeb
webpack實戰（一）：真實專案中一個完整的webpack配置
2019-03-04
Web
webpack打包CSS
2018-10-14
WebCSS
Parceljs和Webpack在React專案上打包速度對比
2019-03-01
JSWebReact
webpack 獨立打包與快取處理
2017-03-27
Web快取
webpack心得總結
2018-07-08
Web
webpack4 系列教程(一): 打包JS
2019-02-16
WebJS
使用webpack搭建vue專案
2019-06-10
WebVue
webpack快速構建專案
2021-09-09
Web
webpack初步搭建Vue專案
2018-11-19
WebVue
Element原始碼:專案初始化和webpack配置
2021-04-14
原始碼Web
webpack2 專案構建一
2017-07-01
Web
webpack進階構建專案(一)
2016-06-11
Web
如何將webpack2專案升級到webpack3
2017-06-20
Web
webpack 搖樹處理
2019-03-18
Web

webpack一：專案初始化、安裝webpack/webpack-cli、第一次打包、webpack本身只能處理js/json檔案、webpack作用總結

一、專案初始化、安裝webpack/webpack-cli、第一次打包

1）專案初始化

2）安裝webpack和webpack-cli:全域性工具及專案開發依賴

2.1全域性安裝

2.2專案開發依賴安裝

3）編寫入口檔案src/index.js

4）開發環境打包development和生產環境打包production

開發打包程式碼：build/dev/main.js

生產打包如下build/pro/main.js：

二、webpack本身只能處理js/json檔案，其它如css/image都不能處理

1）建一個檔案data.json

2）引用json：index.js

3）再次打包

開發模式程式碼build/main.js

生產模式程式碼build/pro/main.js

如果引入了css檔案再打包就會報錯

總結：wp能做什麼

相關文章