Webpack 3.0 前端工程化(背景、模块化、环境准备)
2023-09-11 14:19:06 时间
(1)背景
作者受Google工具的模块分割 影响有了创作灵感
随着SPA的推广,前端应用复杂度快速提升。
MVC时代便有了模块化的初期思想
三大框架便将模块化概念推广普及开来。
而模块化的同时必须面对打包和相关新型语法转换的问题
上述可以看出HTML、CSS发展史,预处理语言Less、Sass等,怎么样写一份代码(新旧语法),可以在不同浏览器正常运行,这里便用到了构建工具
coffeeScript是由Ruby社区推出的js语法糖
去中心化:依赖包较为专注解决一个问题,较为零散
因为目前的3大主流框架都使用webpack作为默认构建工具
(2)导学
、
(3)模块化
JS模块化发展
1、命名空间(几年前较为流行),详见浅谈JavaScript 命名空间 2、Common.js诞生于node社区,应用于服务端,无法在客户端使用 3、AMD、CMD、UMD是后来应用于浏览器的模块化规范 4、ES6 module随着ES6普及,开始使用ES6模块化规范
弊端:需要记住完整的路径名,然后NameSpace.type.method
1、ES6模块导入使用import...from...,{}里存放导入的方法 2、可以一起导入,也可以分开导入 3、named as myName中的as为重命名 4、import * as mylib from 'src/lib' 把模块里定义导出的所有方法,绑定到mylib对象上 5、import 'src/mylib'代表只是把文件模块加载进来,没有调用相关方法
《1》暴露变量定义
《2》暴露方法定义
《3》暴露默认模块,可以是变量、函数、字符串、数字、匿名函数、类class等
《4》选择性暴露方法、导出时重命名
《5》导入后导出export...from...
注意:webpack新版本3+开始,便已经支持了ES6规范,不再需要babel
BEM风格代码案例:
(3)环境准备
命令行工具
安装Webpack全局工具
相关文章
- [转] webpack学习(七) -- 提取公共js代码
- Split your Webpack configuration for development and production
- webpack antd 按需加载
- 前端工具-webpack-sourceMap篇
- webpack loader plugin
- webpack前端性能优化
- webpack相关配置
- vue 3.0 项目搭建移动端 (五) 没有配合webpack的情况下 引入 sass
- webpack------>webpack 的本质
- Webpack 3.0 前端工程化(编译ES6/ES7、编译TypeScript、打包提取公共代码、代码分割和懒加载)
- 快速了解前端打包 webpack
- 【Webpack】webpack的基础使用详细总结 上(建议收藏)
- Vue2.0+Webpack项目环境构建到发布
- [js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上)
- leaflet-webpack 入门开发系列六矢量瓦片(附源码下载)
- 浅析前端一键换肤5种方案:css样式覆盖、实现多套css主题、css自定义变量实现、webpack-theme-color-replacer插件实现自定义主题色、UI框架自定义主题功能
- 浅析如何优化Webpack构建速度:使用可量化工具、配置include、配置缓存、配置多进程多实例thread-loader/parallel、硬件加速、noParse、IgnorePlugin、抽取公共代码、DllPlugin分包、开启webpack内置优化、babel配置优化、可视化分析针对性优化
- webpack高级概念Develoment 和 Production 不同环境的配置 (系列四)
- Web 前端 之 Webpack 的环境搭建,以及测试第一个webpack编译打包测试代码工程
- 10天掌握webpack 4.0 图片篇
- webpack (1)
- webpack初始化
- webpack中编写自定义loader和plugin,及如何调试(debug)webpack,vuecli等脚手架