学习Webpack（一）之初识webpack

webpack简介

在官网中说，webpack是一个现代javaScript应用程序的静态模块打包器。他可以分为入口（entry）、出口（output）、转换器（loader）、插件（plugins）四个模块。通过这四个部分，webpack将前端静态资源按照不同的类型分成不同的模块，并进行资源的压缩和转换。在前端开发中，webpack是我们的开发变得高效、有序。

项目开始

1、初始化

在项目文件夹中打开终端，输入下面命令：

npm init

之后一直按回车键，直到运行结束即可。此时文件夹中会被创建一个package.json文件，它是一个npm配置文件，目录如下：

{
  "name": "webpack-study", //项目名称
  "version": "1.0.0",   // 版本号
  "description": "",    // 项目描述
  "main": "webpack-config.js", // 入口js
  "scripts": {  // 终端中npm执行的脚本
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "", // 作者
  "license": "ISC" 
}

2、安装webpack

npm i webpack -g // 全局安装webpack
npm i webpack -D // 安装开发依赖

通过以上命令完成webapck依赖的安装.
对于依赖的安装，可能初学的同学容易把依赖环境给搞混。这里我给大家解释一下，依赖环境可以分为开发依赖（devDependencies）和生产环境依赖（dependencies）。简单的说就是，如果是打包后用不到的依赖，我们就将他安装到开发依赖环境中，例如webpack、url-loader、css-loader等；如果是打包后需要依赖的，我们就将它安装到生产依赖环境中，例如在vue项目中的vue、vue-router等；

3、使用webpack

首先在项目中创建一个index.js文件，作为我们要压缩的文件。
话不多说，配置如下：
index.js

function hellow（）{
    alert('hellow word');
}

创建好文件后，在项目目录中打开命令行，在命令行中输入指令：

webpack index.js

执行之后，项目文件中会多出来一个dist文件夹，文件夹中的main.js就是我们打包后的代码。

!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t){}]);

这是一段压缩后的代码，因为webpack在压缩的时候，默认选择的环境为生产者环境，也就是说，在生产者环境中，代码会被压缩成一行。这种环境下的代码虽然简洁，但是不易读。还有一种环境叫做开发这环境，这种环境下打包的代码如下：

/******/ (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;
/******/
/******/ 	// define getter function for harmony exports
/******/ 	__webpack_require__.d = function(exports, name, getter) {
/******/ 		if(!__webpack_require__.o(exports, name)) {
/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ 		}
/******/ 	};
/******/
/******/ 	// define __esModule on exports
/******/ 	__webpack_require__.r = function(exports) {
/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ 		}
/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
/******/ 	};
/******/
/******/ 	// create a fake namespace object
/******/ 	// mode & 1: value is a module id, require it
/******/ 	// mode & 2: merge all properties of value into the ns
/******/ 	// mode & 4: return value when already ns object
/******/ 	// mode & 8|1: behave like require
/******/ 	__webpack_require__.t = function(value, mode) {
/******/ 		if(mode & 1) value = __webpack_require__(value);
/******/ 		if(mode & 8) return value;
/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ 		var ns = Object.create(null);
/******/ 		__webpack_require__.r(ns);
/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ 		return ns;
/******/ 	};
/******/
/******/ 	// 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 = "./index.js");
/******/ })
/************************************************************************/
/******/ ({

/***/ "./index.js":
/*!******************!*\  
  !*** ./index.js ***!
  \******************/
/*! no static exports found */
/***/ (function(module, exports) {
// 打包后的代码
eval("function hellow (){\n    alert('hellow word')\n}\n\n//# sourceURL=webpack:///./index.js?");

/***/ })

/******/ });

由此可见，生产环境下的代码没有开发环境下的代码可读性高，但是生产环境打包的代码的大小比开发环境的小很多。因此，如果我们是在开发阶段，我们可以使用开发这环境进行打包，在上线阶段我们就可以使用生产环境打包项目。

webpack打包命令

1、 webpack 《文件名》
直接打包项目，默认出口为/dist/main.js,且打包环境为生产环境；
2、 webpack 《文件名》《出口名》
webpack通过指定的文件名打包为指定的文件
3、 webpack <文件名> <出口名> --mode 《环境》
–mode为指定打包环境的命令后面跟这环境的名称，development为开发环境，production为生产环境
4、 webpack <文件名文件名 …> -o <出口名出口名 …> --mode development
这个命令是打包多个文件到多个文件中，也可以将出口写成一个。-o即表示出口文件的指令的简写，全拼为–output；入口文件表示指令为–entry，可以省略不写。
5、其他指令
–watch 监听指令，简写为 -w
–hot 热替换指令

webpack中遇到的问题

1、在webpack打包中，如果出现：

One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
 - webpack-cli (https://github.com/webpack/webpack-cli)
   The original webpack full-featured CLI.
We will use "npm" to install the CLI via "npm install -D".
Do you want to install 'webpack-cli' (yes/no):

那么你需要安装一下webpack-cli

npm install webpack-cli -D

如果在安装webpack-cli中报错：

+ [email protected]
updated 1 package in 4.777s
{ Error: Cannot find module 'webpack-cli'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:580:15)
    at Function.Module._load (internal/modules/cjs/loader.js:506:25)
    at Module.require (internal/modules/cjs/loader.js:636:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at runCommand.then (/usr/local/lib/node_modules/webpack/bin/webpack.js:142:5)
    at process._tickCallback (internal/process/next_tick.js:68:7) code: 'MODULE_NOT_FOUND' }

这样的话，你需要全局安装一下webpack-cli：

npm i webpack-cli -g

如果是mac电脑，可能会报一个error：

npm ERR! path /usr/local/lib/node_modules/webpack-cli/node_modules/wrap-ansi
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall access
npm ERR! enoent ENOENT: no such file or directory, access '/usr/local/lib/node_modules/webpack-cli/node_modules/wrap-ansi'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent 

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/kuntao/.npm/_logs/2018-12-20T15_04_35_284Z-debug.log

这是因为你的权限不够，无法全局安装，只需要在安装命令前加一个sudo就好了。

sudo npm install webpack-cli -g

执行后，你在打包时，你会发现webpack可以正常打包了。

2、在使用第一条命令打包时，有的同学可能会碰到打包信息后面跟一串黄色的警告信息：

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

这是因为你没有指定打包的环境，只需要在后面加上 --mode 《环境名称》就可以了。
加上指令后在运行，就不会再出现那种信息了。

结语

这一篇我们就先简单的了解一下webpack，能够通过命令行打包文件，随后我们会继续深入webpack的世界。
个人总结，喜欢的请点个赞，或者转发。不喜勿喷，谢谢配合！！
如果文中有讲述错误的欢迎评论指出，谢谢各位大神。