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