webpack 介绍

文件减少，逻辑减少，我的项目的复杂度进步，模块化需要呈现
各个依赖文件的关系难以梳理，耦合程度较高，代码难以保护。
把所有依赖包都打包成为一个 js 文件（bundle.js）文件，会无效升高文件申请次数，肯定水平晋升性能。
逻辑多、文件多，我的项目复杂度进步

了解前端模块化

作用域 命名空间 模块化

运行时代码中变量，函数，对象的可拜访性，可见性

  初始状态时，变量默认挂载在全局作用域：如 var a = 1，即 window.a = 1
  function test() {var b = 2}
  此时 b 处于部分作用域中
  window.b  // undefined
  ------
  在 node 环境中，全局作用域是 global

应用函数作用域爱护外部变量

// 应用自执行函数包裹代码，从内部无法访问
  var SusanModule = (function() {
    var name = 'Susan'
    var sex = '女孩'
    return function tell() {console.log(name)
      console.log(sex)
    }
  })()
  console.log(SusanModule.name) // undefined
  console.log(SusanModule.tell()) // Susan 女孩 
// ---------------------------------
// 传入 window，把变量名写在模块外部
  // 规范模块化写法
  (function(window) {
    var name = 'Susan'
    var sex = '女孩'
    function tell() {console.log(name)
      console.log(sex)
    }
    window.SusanModule = {tell}
  })(window)

模块化的长处

• 作用域封装
• 可重用性
• 解除耦合

模块化标准

### AMD
Asynchronous Module Definition(异步模块定义)

/**
 * 模块名
 * 模块所须要的依赖
 * 模块内容
*/
define('getSum', ['math'], function(math) {return function(a, b) {console.log('sum：' + math.sum(a, b))
  }
})
// 模块的定义不会被绑定到全局对象上

### COMMONJS

// 通过 require 函数引入模块
const math = require('./math')
// 通过 exports 将模块导出
exports.getSum = function(a, b) {return a + b}

### ES6 MODULE

// import 导入
import math from './math'
// export 导出
export function sum(a, b) {return a + b}

webpack 打包机制

webpack 与立刻执行函数之间的关系

在执行打包后，被打包的模块会被作为参数传入 webpack 的办法里执行

 (function(modules) {var installedModules = {}
   // webpack 加载的外围办法
   function __webpack_require__(moduleId) {/* code */}
   // ...
   return __webpack_require__(0) // entry file
 })([/* modules array */])

webpack 打包的外围逻辑

function __webpack_require__(moduleId) {
  // 检测以后模块是否加载过，防止二次加载
  if(installedModules[moduleId]) {return installedModules[moduleId].exports
  }
  // 如果模块未曾加载过，那么为模块增加 id，退出待加载的列队
  var module = installedModules[moduleId] = {
    i: moduleId,
    l: false,
    exports: {}}
  // 将该模块的 this 指向导出后果, 并执行包装逻辑
  modules[moduleId].call(
    module.exports,
    module,
    module.exports,
    __webpack_require__
  )
  // 执行模块逻辑
  module.l = true
  return module.exports
}

webpack 打包过程中都做了什么

• 从入口文件开始, 剖析整个利用的依赖树
• 将每个依赖模块包装起来, 放到一个数组中期待调用
• 实现模块加载的办法, 并把他放到模块执行的环境中, 确保模块间能够互相调用
• 把执行入口文件的逻辑放在一个函数表达式, 并立刻执行这个函数

配置开发环境 –NPM 与包管理器

npm 是一个包治理库, 开发者能够上传分享本人的我的项目

了解包管理器

初始化一个我的项目

  npm init 

了解 npm” 仓库 ” 与 ” 依赖 ” 的概念

初始化一个我的项目之后会生成 package.json 文件

{
  "name": "demo", // 包名称
  "version": "1.0.0", // 版本号
  "description": "",  // 形容信息"main":"index.js", // 文件主入口"scripts": {
    // 运行脚本内容
    "test": "echo \"Error: no test specified\"&& exit 1"
  },
  "author": "", // 作者"license":"ISC", // 许可证"dependencies": { // 依赖项
  // 当应用 npm i xxx --save 的时候,npm 会将依赖项写在 dependencies 中 (npm5 之后 - s 是默认参数)
    "loadash": "^1.0.0"
  },
  // 执行 npm i -s- d 时生成, 示意开发环境的依赖项
  // 构建工具个别放在 devDependencies 当中, 如 Eslint 等
  "devDependencies": {}}

了解 npm” 语义化版本 ”

• “^version”: 中版本和小版本

  在 npm i 的时候 会指定装置大版本号下最新的中版本号和小版本号

• “~version”: 小版本

  指定装置小版本

• “version”: 特定版本
• 语义化版本的意义: 便于使包发布者把小版本推送到开发者手中

npm install 的过程

• 寻找包版本信息文件 (package.json) 进行装置
• 查看 package.json 的依赖, 并查看我的项目中其余的版本信息文件

• 如果发现呢新的包, 就更新版本信息文件

  npm i 出错的时候查看更新版本信息文件是否出错

webpack 外围个性

应用 webpack 构建简略工程

新建 webpack.config.js 文件，webpack 在打包的时候会默认优先走 webpack.config.js 文件的配置

// webpack.config.js
module.exports = {
  // 入口文件
  entry: './app.js',
  // 文件的进口地位
  output: {
    // __dirname 是 nodejs 中的全局变量，指向以后文件所在的门路
    path: path.join(__dirname, 'dist'),
    // 进口文件的文件名
    filename: 'app.bundle.js'
  },
    // dev 开发环境服务器
  devServer: {
    port: 3000,  // 服务端口
    publicPath: '/dist'
  }
}

webpack 中 loader 的配置利用

// app.js
import main from './main.js'
import './style/main.css'
// 以上引入了 css.. 这在 javascript 里是无奈解析的 然而应用了 webpack 后，只有有 loader 就能够解析 js 之外的文件类型

装置 css-loader

npm install css-loader --save-dev

webpack 中 loader 的配置利用

// webpack.config.js
module.exports = {entry: { /* ... */},
  output: {/* ... */},
  debServer: {/* ... */},
  // webpack4 配置 loader
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',  // style-loader, 使得 css 文件能够生成一个 style 标签加载在页面里
          'css-loader' // css-loader, 使得 webpack 能够加载 css 文件
          // 此处须要特地留神书写程序,webpack 加载 loader 的程序是从右向左, 要先加载 css-loader 之后能力生成 style 标签, 否则会报错
        ]
      }
    ]
  }
}

webpack 中 plugins 的配置和利用

plugins 和 loaders 的区别:
loaders 是文件夹加载器, 使 webpack 能够意识这些文件
plugins 次要用来监听编译过程中的一些事件, 去扭转编译后果
这里以压缩代码为举例
装置 uglifyjs

npm install uglifyjs-webpack-plugin --save-dev

// webpack.config.js
// 引入 uglifyjs
  const UglifyJSPlugin = require('uglify-webpack-plugin')
module.exports = {entry: { /* ... */},
  output: {/* ... */},
  debServer: {/* ... */},
  // webpack4 配置 loader
  module: {/* ... */},
  plugins: [new UglifyJSPlugin()
  ] // 压缩打包文件
}