webpack小妖精

@文章来源：拉钩大前端就业训练营-念念

模块化开发及标准规范

模块化

• CommonJS 是以同步模式加载模块

• AMD 规范 require.js

  • 使用起来相对复杂
  • 模块 JS 文件请求频繁

• ESmoudles 特性

  • ESM 自动采用严格模式，忽略'use strict'
  • 每个 ES module 都是运行在单独的私有作用域中
  • ESM 是通过 cors 的方式请求外部的 js 模块的
  • ESM 的 script 标签会延迟执行脚本

• ESmodule 导入导出

  • export 导出
    • export 导出的不是对象字面量的简写
    • export default 导出的可以是对象字面量
  • import xx from 'xx' 导入
    • 导出的是只读的
    • 只能出现在最外层作用域
    • 使用全局的 import()返回一个 promise
  • ployfill -- ESmodule load
    • 引入脚本文件到页面中
  • node 使用 esmodule
    • 修改后缀名为 mjs
    • node --experimental-modules xx.mjs

• ES module 载入 common.js 模块

  • ESmodule 可以载入 common.js 模块成 commonjs 只能载入默认成员，不能直接提取

• 新版本 package.json 添加 type:module

  • 如果要使用 commonjs 规范修改 cjs

• babel 实现兼容

模块化打包工具

• 模块化带来的问题
  • esmodules 存在环境兼容问题
  • 模块文件过多，网络请求频繁
  • 所以前端资源都需要模块化

webpack

• css-loader 将资源文件转换为 js 工作
• 文件资源加载器 file-loader
• webpack 工作模式
  • 生产模式下，自动优化打包结果；
  • 开发模式下，自动优化打包速度，添加一些调试过程中的辅助；
  • None 模式下，运行最原始的打包，不做任何额外处理；
• webpack 模块的加载方式
  • 遵循 ES Modules 标准的 import 声明
  • 遵循 CommonJS 标准的 require 函数
  • 遵循 AMD 标准的 define 函数和 require 函数
  • 样式代码中的 @import 指令和 url 函数
  • HTML 代码中图片标签的 src 属性
• webpack 插件及其用法见代码