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.jsmodule.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.jsimport 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.jsmodule.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()  ] // 压缩打包文件}