>[danger][前置任务安装node及配置全局安装路径](https://www.kancloud.cn/a173512/node/2160974) 更新 npm `\npm install -g npm` 新建存放项目的app文件夹`D:\application`，位置随意我这里为了方便和node安装目录放一起了`D:\nodejs\application` 新建项目webpack-test `D:\nodejs\application\webpack-test` 窗口控制台定位到webpack-test位置，初始化项目生成package.json  ``` npm init ``` 紧接着使用 cnpm 全局安装 webpack（安装一次，以后就可以不用安装了）：  >[danger] 注意cnpm和npm不要混用否则或报错：# Error “Cannot find module 'import-local'”，出现此错时卸载项目重新用npm和cnpm按装 ``` npm install webpack webpack-cli -g 简写： npm i webpack webpack-cli -g ``` 然后在本地安装webpack和webpack-cli： 因为webpack是开发依赖（只在开发中用得到，所以后面加个 -D 它是 `--save-dev`的缩写）  ``` npm install webpack webpack-cli --save-dev 简写： npm i webpack webpack-cli -D ``` >[danger]可选 **打包含有html的文件** ~~~ npm i html-webpack-plugin -D ~~~ **打包含有css文件** 安装css-loader style-loader插件 ``` npm i css-loader style-loader -D ``` 下载less和less-loader插件 ``` npm i less less-loader -D ``` **打包含有图片资源** 下载url-loader、file-loader 由于打包图片资源一般都会引入使用css/html等所以以上的要安装 ``` npm i url-loader file-loader -D ``` 下载html-loader（当需要引入html时） ~~~ npm i html-loader -D ~~~ **打包含有其他文件** 创建项目的打包目录 `D:\nodejs\application\dist\` 创建项目源文件，并且内容如下： `D:\nodejs\application\webpack-test\src\index.js` ``` document.write("It works."); ``` ## **在此项目目录运行指令（包含开发环境指令和生成环境指令）** >[danger]开发环境指令和生成环境指令都是将ES6模块化编译成浏览器能识别的内容 开发环境指令 ``` webpack ./src/index.js -o ./dist/built.js --mode=development ```  built.js ```javascript /******/ (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 = "./src/index.js"); /******/ }) /************************************************************************/ /******/ ({ /***/ "./src/index.js": /*!**********************!*\ !*** ./src/index.js ***! \**********************/ /*! no static exports found */ /***/ (function(module, exports) { eval("document.write(\"It works.\");\n\n//# sourceURL=webpack:///./src/index.js?"); /***/ }) /******/ }); ``` 生成环境指令 ``` webpack ./src/index.js -o ./dist/built2.js --mode=production ```  built2.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){document.write("It works.")}]); ``` >[danger] 生成环境指令会压缩文件 ## **验证打包json文件** data.json ``` { 'name':'tom', 'age':18 } ``` `D:\nodejs\application\webpack-test\src\index.js` ``` import data from './data.json'; console.log(data); document.write("It works."); ``` 再次打包 生成环境指令 ``` webpack ./src/index.js -o ./dist/built3.js --mode=production ``` ## **打包css文件失败** >[danger]导入的css文件内容为空，会打包成功的，注意下！