WebPack 从安装到闲置

序言：各种技术在研究过程中常常会出现在实际工作中难以实施的情况，于是就慢慢闲置，但学毕竟还是必须要学学的，就看能用到多少，至少开拓了眼界，谨以此安慰下那些学完又闲置的技术~

跑题结束，以下开始正式配置一个 WebPack 环境，我会从安装开始，一直更新到一个项目正式跑起来的整个流程逐步说明：

1、安装各种环境

// 先安装基础包，安装完后就可以进行编译了，其他都是辅助。--save-dev表示安装信息和依赖会被配置到package.json文件中：

npm install --save-dev webpack

// 然后安装开发环境，这个服务器可以作为一个http测试服务使用，主要还是为了之后进行自动化编译：

npm install --save-dev webpack-dev-server

// 这是用来检测配置文件变化的，只要变化可以重启服务

npm install --save-dev nodemon

2、npm的编译配置

// 可以在packag.json的scripts中配置几个启动脚本，之后使用 npm run 指令即可执行指定的脚本

"scripts": {
  "srart": "webpack",
  "build": "webpack -p --env production",
  "server": "webpack-dev-server --env development",
  "dev": "nodemon --watch webpack.config.js --exec \"webpack-dev-server --env development\"",
}

start：是默认脚本，可以用命令“npm”直接执行，或用命令“npm start”，用其他命令需要加上“run”参数，例如：“npm run build”

build：编译项目并使用 -p 参数压缩混淆生成的 js

server：启动一个调试服务器，如果文件有更改会即时更新

dev：监控配置文件，如果有更改就立刻重启调试服务器

// 配置好就可以用 npm 去执行了，但是我们项目还是空的，什么都没有

3、安装开发编译过程中要用到的辅助插件（这步可以先忽略）

// 首先是css的处理插件

npm install --save-dev style-loader css-loader less-loader

// 处理页面中 URL

npm install --save-dev url-loader

4、现在应该编写几个ES6标准的js文件了：

// 先写一个 app.js 文件，作为我们程序的入口文件，是这个样子

import $u from './utils' //引入utils.js文件

$u.alert('lalala'); //调用utils中的方法

// 再写一个业务模块 utils.js

// 将方法发布出去
module.exports = {
	alert: function (msg) {
		window.alert(msg); // 业务逻辑
	}
}

// 来写 WebPack 的配置文件吧，webpack.config.js 是默认配置文件，描述了编译的过程

module.exports = {
	//devtool: 'source-map', // 生成用于开发提示的map文件
	entry: __dirname + "/js/app.js", //指定主文件
	output: {
		path: __dirname + "/js", //指定输出文件的目录
		filename: "all.js" //指定输出文件的名称
	}
}　

// ok，可以执行了，在命令行窗口下输入：

webpack

// 路径不对？如果你npm install时没有使用 -g 参数，那么你可以加上路径：

node_modules/.bin/webpack

// 或者还记得之前我们配置过 npm 的 package.json 中的 scripts 吗？那你可以用：

npm run build

// 以上三个命令任选其一，如果执行成功，会提示：

Hash: 459517a0551a6161a74b
Version: webpack 3.3.0
Time: 127ms
 Asset     Size  Chunks             Chunk Names
all.js  13.9 kB       0  [emitted]  main
   [0] ./js/app.js 1.31 kB {0} [built]
   [1] ./js/utils.js 9.71 kB {0} [built]

// 这时去看目录，就会发现多了个 all.js 文件，就可以建立一个 index.html 文件，将 all.js 引入，在浏览器中访问，就会弹出对话框“lalala”，all.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;
/******/
/******/ 	// 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, __webpack_exports__, __webpack_require__) {

"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils__ = __webpack_require__(1);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__utils__);

__WEBPACK_IMPORTED_MODULE_0__utils___default.a.alert('lalala');

/***/ }),
/* 1 */
/***/ (function(module, exports) {

module.exports = {
	alert: function (msg) {
		window.alert(msg);
	}
}

/***/ })
/******/ ]);

// 可以看到没有加 -p 参数时 WebPack 生成了大量注释，并不会去掉我们js中的注释

// 注意的第二点是我们引入的 utils 模块名称随机分配了一个鬼畜的名字“__WEBPACK_IMPORTED_MODULE_0__utils___default.a”