初识webpack

r囧r小猫 2022-09-30 15:42 161阅读 0赞

第一次接触webpack，记录最简单的使用规范，加强记忆以备后用。

搭建webpack项目大致分为如下几步：

首先在本地建立一个工程，本次我在D盘建立webpackDemo。

![20170323111112366][]

进入工程目录后使用npm init命令进行初始化，生成package.json文件

![20170323111447344][]

第三步在工程目录下安装webpack，使用命令npm install webpack --save-dev

等待安装完成，出现如下界面

![20170323111931417][]

此时原本为空的工程目录下会出现如下两项

![20170323112316778][]

然后，我们需要在工程目录下补充文件目录，便于使用和管理。

![20170323113046741][]

接下来，在工程目录下建立webpack配置文件——webpack.config.js，相关的文档有[中文文档][Link 1]和[英文文档][Link 2]

举一个简单的栗子

![20170323115009237][]

注意，运行webpack之前，入口文件main.js必须提前建立好，此时目录是这个样子

![20170323115253699][]

运行webpack

![20170323120611845][]

查看目录

![20170323120643486][]

bundle.js已建立

打开bundle.js，结果是这样：

/******/ (function(modules) { // webpackBootstrap
    /******/ 	// The module cache
    /******/ 	var installedModules = {};
    /******/
    /******/ 	// The require function
    /******/ 	function __webpack_require__(moduleId) {
    /******/
    /******/ 		// Check if module is in cache
    /******/ 		if(installedModules[moduleId])
    /******/ 			return installedModules[moduleId].exports;
    /******/
    /******/ 		// Create a new module (and put it into the cache)
    /******/ 		var module = installedModules[moduleId] = {
    /******/ 			i: moduleId,
    /******/ 			l: false,
    /******/ 			exports: {}
    /******/ 		};
    /******/
    /******/ 		// Execute the module function
    /******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
    /******/
    /******/ 		// Flag the module as loaded
    /******/ 		module.l = true;
    /******/
    /******/ 		// Return the exports of the module
    /******/ 		return module.exports;
    /******/ 	}
    /******/
    /******/
    /******/ 	// expose the modules object (__webpack_modules__)
    /******/ 	__webpack_require__.m = modules;
    /******/
    /******/ 	// expose the module cache
    /******/ 	__webpack_require__.c = installedModules;
    /******/
    /******/ 	// identity function for calling harmony imports with the correct context
    /******/ 	__webpack_require__.i = function(value) { return value; };
    /******/
    /******/ 	// define getter function for harmony exports
    /******/ 	__webpack_require__.d = function(exports, name, getter) {
    /******/ 		if(!__webpack_require__.o(exports, name)) {
    /******/ 			Object.defineProperty(exports, name, {
    /******/ 				configurable: false,
    /******/ 				enumerable: true,
    /******/ 				get: getter
    /******/ 			});
    /******/ 		}
    /******/ 	};
    /******/
    /******/ 	// getDefaultExport function for compatibility with non-harmony modules
    /******/ 	__webpack_require__.n = function(module) {
    /******/ 		var getter = module && module.__esModule ?
    /******/ 			function getDefault() { return module['default']; } :
    /******/ 			function getModuleExports() { return module; };
    /******/ 		__webpack_require__.d(getter, 'a', getter);
    /******/ 		return getter;
    /******/ 	};
    /******/
    /******/ 	// Object.prototype.hasOwnProperty.call
    /******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
    /******/
    /******/ 	// __webpack_public_path__
    /******/ 	__webpack_require__.p = "";
    /******/
    /******/ 	// Load entry module and return exports
    /******/ 	return __webpack_require__(__webpack_require__.s = 0);
    /******/ })
    /************************************************************************/
    /******/ ([
    /* 0 */
    /***/ (function(module, exports) {
    
    function fn(){}  //这就是我在main.js中写入的内容
    
    
    /***/ })
    /******/ ]);

[20170323111112366]: /images/20220705/ff3a09f885cc442383229cb6aecec5f8.png
[20170323111447344]: /images/20220705/daa659f4e81640b69f2b52fc11ef94dc.png
[20170323111931417]: /images/20220705/f4c97af740ef4fd4a9c2c7fd58fdf07a.png
[20170323112316778]: /images/20220705/9d96beb96b5f4b239f42619723b1bb35.png
[20170323113046741]: /images/20220705/8ecdcb3c19084611a182519604a4974e.png
[Link 1]: http://webpackdoc.com/configuration.html
[Link 2]: http://webpack.github.io/docs/configuration.html
[20170323115009237]: /images/20220705/661e784d493141779dee08772d186634.png
[20170323115253699]: /images/20220705/658a0c162fb54be78999b03147b8b201.png
[20170323120611845]: /images/20220705/b2adeb9faaf143bf96a48193867c7f46.png
[20170323120643486]: /images/20220705/0c6ebd573c3641669a555b2db8d0ebdd.png