本文共 6987 字，大约阅读时间需要 23 分钟。
webpack系列博客中代码均在github上：
webpack是个啥呢？看官网的这段描述。
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)
在我以前做纯html、css、js(jQuery)开发的时候，我看了这句话之后的感受就是
先不管它是个啥了吧，心里把上面的那段描述默念3遍，就开始干活吧
1.本文档不包含node的安装和配置说明，因此安装webpack时需要确保电脑已正常安装node且可以正常运行npm命令。
2.本次安装和示例均基于webpack 4.x版本，不同webpack版本直接存在差异，若存在问题，请先检查webpack版本是否一致。
3.window 10 环境，命令行使用的是windows的PowerShell。
1.创建项目目录
在E:\MyStudy\下创建目录 webpackPractice
2.初始化目录
打开cmd命令行，使用npm init初始化目录
初始化完成后，根目录下会生成一个package.json文件
查看一下package.json文件的内容
可以看到该文件的内容就是我们在使用npm init 初始化项目的时候交互式命令输入的内容。
3.局部安装webpack
安装webpack需要在项目根目录下分别按照webpack和webpcak-cli。
备注：webpack4中，webpack和webpack-cli两个包是分开的，因此两个必须都同时安装。如果只安装了webpack，运行打包命令时会提示你需要安装webpack-cli。
（也可以直接使用npm install webpack webpack-cli --save-dev一次安装到位）
安装完成后，我们在看下生成的文件和package.json的变化
安装完成，我们测试一下是否安装成功：在项目根目录下执行webpack命令
emmmmm，这个错误提示webpack命令无法运行。其实原因也很简单，我们是局部安装webpack，webpack可执行的windows命令脚本在【E:\MyStudy\webpackPractice\node_modules\.bin】目录下：
注意：windows PowerShell命令行工具运行的脚本是以.ps1结尾的webpack.ps1。以.cmd结尾的是window cmd命令行可运行的脚本
所以想要webpack命令可正常执行，第一种办法就是换到该目录下，这种办法亲测可用，只是后续打包指定目标文件时会存在一些文件路径设置的问题，所以这种办法不推荐。
第二种方法呢，就是将【E:\MyStudy\webpackPractice\node_modules\.bin】添加到path环境变量中，这里偷个懒就不演示了。添加完成后在执行webpack命令：
无法加载webpack.ps1(这个提示也验证了前面的说法：powershell运行的脚本是webpack.ps1)这个又是什么妖怪，按照错误提示访问了链接https://go.microsoft.com/fwlink/?LinkId=135170，看了下文档发现是因为PowerShell处于安全考虑对执行脚本做了限制。然后搜罗了一番找到了解决办法：在PowerShell中执行Set-ExecutionPolicy -ExecutionPolicy Undefined -Scope LocalMachine（具体是啥意思也不是很清楚，总之就是放开这个不能执行脚本的限制）。
然后在执行webpack这个命令：
成功！！！
到现在我们按照好了webpack的环境，然而还是不知道webpack是个what，没关系，我们继续可以带着这个疑问继续往下看。
我们先使用webpack打包一个简单的文件。
1.第一步：先创建一个index.js文件
2.第二步：在index.js中写入代码
function helloWebpack(){ alert('hello,webpack!');}helloWebpack();
3.第三步：打包index.js文件
可以看到我们的打包命令为：webpack index.js -o index.bundle.js --mode=development
我们分两部分简单解释一下这个命令。
第一部分：webpack index.js -o index.bundle.js
index.js表示我们打包的入口文件，本次我们只有一个js文件，因此直接指定为index.js
-o 表示输出信息，后面紧接着的参数为要输出的文件路径和文件名，这里我们指定为index.bundle.js
备注：关于命令行接口的用法可
第二部分：--mode=development
使用--mode可以指定webpack使用那种模式去做内置优化。
为了方便看清楚打包后的内容，我们本次打包指定的模式为开发模式
备注：关于模式的内容可
打包完成后，可以看到项目根目录下生成了一个index.bundle.js文件
我们看一下这个index.bundle.js文件的内容（如果打包时模式指定的是production，则函数命令、变量命令均会简化，文件以压缩在一行展示）
/******/ (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 helloWebpack(){\r\n\talert('hello,webpack!');\r\n}\r\nhelloWebpack();\n\n//# sourceURL=webpack:///./index.js?");/***/ })/******/ }); 我们可以看到打包后的文件内容和源文件差异很大，只有最后几行的内容和源文件内容相关。不过现在还没有必要研究打包后的文件内容都是什么意思。
我们都知道index.js文件如果被一个html引用，则会弹窗提示hello，webpack。那我们尝试将打包后的index.bundle.js引入一个html文件中，看下会有什么结果。
4.第四步：将打包后的index.bundle.js引入html页面中
首先我们得新建一个index.html
在index.html编写代码并将index.bundle.js引入
先入个门
我们使用浏览器打开index.html,查看结果
到此，关于webpack的简单入门就结束了。
我们演示了webpack的安装，并使用webpack提供的cli打包一个简单的index.js文件，对于最后的index.js仅仅是一个演示，实际项目中并不会有这样的情况和操作。
后续我们会边总结边往实际项目中去应用。
转载地址：http://swrzz.baihongyu.com/