webpack的介绍

 

 

1. 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle

2. webpack 中有很多的 加载器(loader)。  用于兼容性。 比如 es6 的代码 可能就需要 向es5 兼容。 以便于浏览器可以识别。

3.  支持模块化

模块介绍

使用模块的目的就是，为了实现 文件资源的 异步加载。 不会说等着一个文件加载完成，再去加载另一个文件。
而是 向系统发一个命令， 然后系统去加载模块，但是不会影响程序的执行， 他会继续向下走 去加载另一个模块。
提高效率： 不让用户的页面出现  白屏的现象， 提高用户的体验。

 

前端中也是有模块的： 导入方式： 从es6 的module中出来的。(一种规范而已，无需深究，毕竟不是专业前端)
    import xxxx from 'index.js'    从  'index.js'   这个模块中 导入 xxxx  这个 variate  or  fn  or ...。

 下载：

npm install webpack@3.12.0 -g       下载3.12.0  并下载到全局

webpack的基本使用：

// es6 语法  module
let name = '张三';
// export 抛出   // import导入
export default name;



let age = 23;
export {age};   //作为一个 key 抛出


export var fav='鸡汤';



export function add() {
    alert('1111111')
}

 

import app from './app.js'

console.log(app);  // 这个app 就是 name 这个变量。 因为他是 default


// 一中引入方式
import {age, fav, add} from "./app.js";

console.log(age);
console.log(fav);
add();


// 另一种  都可以引入。 此时 o 就作为一个对象，整体引入进来了。
import * as o from "./app.js"
o.add();
console.log(o.age);

webpack   ./amain.js  ./bundle.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 = 1);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return age; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "d", function() { return fav; });
/* harmony export (immutable) */ __webpack_exports__["a"] = add;
// es6 语法  module
let name = '张三';
// export 抛出   // import导入
/* harmony default export */ __webpack_exports__["c"] = (name);



let age = 23;



var fav='鸡汤';



function add() {
    alert('1111111')
}




/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

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


console.log(__WEBPACK_IMPORTED_MODULE_0__app_js__["c" /* default */]);



console.log(__WEBPACK_IMPORTED_MODULE_0__app_js__["b" /* age */]);
console.log(__WEBPACK_IMPORTED_MODULE_0__app_js__["d" /* fav */]);
Object(__WEBPACK_IMPORTED_MODULE_0__app_js__["a" /* add */])()


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

<script type="text/javascript" src="./bundle.js"></script>

最终在  html  中，引入时， 引入bundle.js文件，就可以解决所有的问题。

 webpack的深入使用：

 

在项目中：  npm init --yes   初始化一下。

下载webpack:  npm  install webpack@3.12.0 -D

在项目的目录下： 创建一个  webpack.config.js 文件。 文件名不要错。

module.exports = {
    entry : {  // 入口
        main:'./amian.js'   // 键可以随便写，值就是自己项目中的那个入口文件
    },
    output:{  // 出口
        filename:'./bundle.js'   // 出口这里 键 不要随便写。  值 你想叫什么叫什么。
    }，
    watch:true   // 这个是用来监听使用的， 每当代码有更新的时候，就会自动运行一下
};

使用的时候，只需要在项目路径下， 执行 webpack

D:\es6\axios_lena>webpack
Hash: 974d0e4bb68a9df5f5cf
Version: webpack 3.12.0
Time: 471ms
      Asset    Size  Chunks                    Chunk Names
./bundle.js  361 kB       0  [emitted]  [big]  main
   [0] (webpack)/buildin/global.js 509 bytes {0} [built]
   [1] ./app.js 272 bytes {0} [built]
   [2] ./amian.js 469 bytes {0} [built]
    + 4 hidden modules

就会自动的，运行这个脚本。比 webpack   ./amain.js  ./bundle.js  这种方式要方便。 而且也不容易出错。

或者可以这样：

使用 npm init --yes 生成的   package.json  配置文件。 对这个进行配置， 就可以使用  npm run dev 这种命令
在  package.json  这文件配置一下：

{
  "name": "axios_lena",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack"   // 这里 要指向webpack这个命令
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.18.0",
    "install": "^0.12.2",
    "vue": "^2.6.10"
  },
  "devDependencies": {
    "webpack": "^3.12.0"
  }
}

运行一下：

> axios_lena@1.0.0 dev D:\es6\axios_lena
> webpack   // 它去调用了这个脚本

Hash: 974d0e4bb68a9df5f5cf
Version: webpack 3.12.0
Time: 489ms
      Asset    Size  Chunks                    Chunk Names
./bundle.js  361 kB       0  [emitted]  [big]  main
   [0] (webpack)/buildin/global.js 509 bytes {0} [built]
   [1] ./app.js 272 bytes {0} [built]
   [2] ./amian.js 469 bytes {0} [built]
    + 4 hidden modules

 此时这个程序会 夯 在这里。  因为 他在 watch 监听中。 一旦代码发生改变， 他就会重新编译一次。

css-loader

js文件的打包已经Ok 了。 再解决 css文件的打包。
css文件里面，也没有什么 对象 变量。 这些东西 所以就直接导入这个文件就好了。
但是 直接导入是不行的，  需要一个  loader (加载器)。去处理一下这个css 文件。

npm install css-loader -D   处理后缀名为  .css 文件的
npm install style-loader -D  这个会将处理之后的 css 文件。 在html文件里面， 生成一个 style 标签。插入到 html 的<head></head> 标签里面。

 

下载完成之后  package.json 里面，就会添加上这两个 loader

然后你需要让 webpack 去识别一下，这两loader：

 

module.exports = {
    entry : {  // 入口
        main:'./amian.js'
    },
    output:{  // 出口
        filename:'./bundle.js'
    },
    watch:true,
    module:{
        loaders:[
            {
                test:/\.css$/,   // 以 .css 后缀名结束的
                loader:'style-loader!css-loader'  // 使用这两个loader进行解析
                // 先使用 css-loader 解析所有的 .css 文件。 然后再使用 style-loader 生成style标签，插入到html 
            }
        ]
    }
};

 

这样 这个 .css 文件， 就会在页面上能使用了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
</head>
<body>
<div id="app"></div>

<script type="text/javascript" src="./bundle.js"></script>  // 只是这一句，就将所有的  js  css 文件全部都导入了。

</body>
</html>

 

style 标签也有了。

 这些 loader 可以对， css , json,  png,  jpg,  mp3,  mp4 es6的js代码，进行解析。 不同的配置就好了