序言：各种技术在研究过程中常常会出现在实际工作中难以实施的情况，于是就慢慢闲置，但学毕竟还是必须要学学的，就看能用到多少，至少开拓了眼界，谨以此安慰下那些学完又闲置的技术~
跑题结束，以下开始正式配置一个 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”