├── 2. 常用扩展 ├── 2-2. 自动生成页面 │ ├── src │ │ ├── a.js │ │ └── index.js │ ├── 课件.md │ ├── package.json │ ├── public │ │ └── index.html │ ├── dist │ │ ├── a.html │ │ └── home.html │ └── webpack.config.js ├── 2-1. 清除输出目录 │ ├── 课件.md │ ├── src │ │ └── index.js │ ├── webpack.config.js │ └── package.json ├── 2-3. 复制静态资源 │ ├── 课件.md │ ├── src │ │ └── index.js │ ├── dist │ │ ├── img │ │ │ └── webpack.png │ │ └── index.html │ ├── public │ │ ├── img │ │ │ └── webpack.png │ │ └── index.html │ ├── package.json │ └── webpack.config.js ├── 2-8. [练习]区域查询 │ ├── 静态页面 │ │ ├── img │ │ │ └── china.jpg │ │ ├── css │ │ │ ├── detail.css │ │ │ ├── list.css │ │ │ └── reset.css │ │ └── detail.html │ ├── 工程 │ │ ├── public │ │ │ ├── img │ │ │ │ └── china.jpg │ │ │ ├── css │ │ │ │ ├── detail.css │ │ │ │ ├── list.css │ │ │ │ └── reset.css │ │ │ ├── detail.html │ │ │ └── list.html │ │ ├── webpack.prod.js │ │ ├── webpack.dev.js │ │ ├── src │ │ │ ├── util │ │ │ │ └── areaService.js │ │ │ ├── detail │ │ │ │ └── index.js │ │ │ └── list │ │ │ │ └── index.js │ │ ├── webpack.config.js │ │ ├── package.json │ │ └── webpack.base.js │ └── api.md ├── 2-5. 普通文件处理 │ ├── src │ │ ├── assets │ │ │ ├── webpack.png │ │ │ └── sub │ │ │ │ └── webpack.png │ │ └── index.js │ ├── dist │ │ ├── imgs │ │ │ └── webpack.ba6ae.png │ │ └── index.html │ ├── 课件.md │ ├── package.json │ ├── public │ │ └── index.html │ └── webpack.config.js ├── 2-6. 解决路径问题 │ ├── src │ │ ├── assets │ │ │ ├── webpack.png │ │ │ └── sub │ │ │ │ └── webpack.png │ │ └── index.js │ ├── dist │ │ ├── imgs │ │ │ └── webpack.ba6ae.png │ │ └── html │ │ │ └── index.html │ ├── 课件.md │ ├── package.json │ ├── public │ │ └── index.html │ └── webpack.config.js ├── 2-4. 开发服务器 │ ├── src │ │ └── index.js │ ├── package.json │ ├── public │ │ └── index.html │ ├── webpack.config.js │ └── 课件.md └── 2-7. webpack内置插件 │ ├── src │ └── index.js │ ├── package.json │ ├── webpack.config.js │ └── 课件.md ├── 1. webpack核心功能 ├── 1-6. 配置文件 │ ├── 123.js │ ├── src │ │ └── main.js │ ├── webpack.config.js │ ├── package.json │ └── 课件.md ├── 1-11. loader │ ├── src │ │ ├── a.js │ │ └── index.js │ ├── loaders │ │ ├── loader1.js │ │ ├── loader2.js │ │ ├── loader3.js │ │ ├── loader4.js │ │ └── test-loader.js │ ├── assets │ │ ├── 2020-01-13-09-28-52.png │ │ ├── 2020-01-13-09-29-08.png │ │ ├── 2020-01-13-09-35-44.png │ │ ├── 2020-01-13-10-29-54.png │ │ └── 2020-01-13-10-39-24.png │ ├── package.json │ ├── webpack.config.js │ └── 课件.md ├── 1-16. 区分环境 │ ├── src │ │ └── index.js │ ├── webpack.pro.js │ ├── webpack.dev.js │ ├── webpack.base.js │ ├── package.json │ ├── webpack.config.js │ ├── 课件.md │ └── dist │ │ └── scripts │ │ └── main-b1728.js ├── 1-15. [练习]添加文件列表 │ ├── src │ │ ├── a.js │ │ └── index.js │ ├── dist │ │ ├── 文件列表.md │ │ └── filelist.txt │ ├── webpack.config.js │ ├── package.json │ └── plugins │ │ └── FileListPlugin.js ├── 1-17. 其他细节配置 │ ├── src │ │ ├── index.js │ │ ├── other.js │ │ └── a │ │ │ └── b │ │ │ └── c │ │ │ └── d.js │ ├── abc │ │ └── jquery.js │ ├── webpack.config.js │ ├── package.json │ └── dist │ │ └── index.html ├── 1-9. 入口和出口 │ ├── src │ │ ├── a.js │ │ └── index.js │ ├── assets │ │ └── 2020-01-09-15-51-07.png │ ├── node │ │ ├── dirname.js │ │ ├── sub │ │ │ └── dirname.js │ │ └── pathtest.js │ ├── package.json │ ├── 课件.md │ ├── target │ │ └── index.html │ └── webpack.config.js ├── 1-1. 如何在浏览器端实现模块化 │ ├── modules │ │ ├── test.txt │ │ ├── a.js │ │ ├── b.js │ │ └── index.js │ ├── assets │ │ └── 2020-01-07-05-06-11.png │ ├── package.json │ ├── index.html │ ├── package-lock.json │ └── 课件.md ├── 1-14. plugin │ ├── src │ │ └── index.js │ ├── assets │ │ ├── 2020-01-15-12-45-16.png │ │ └── 2020-01-15-12-49-26.png │ ├── webpack.config.js │ ├── plugins │ │ └── MyPlugin.js │ ├── package.json │ └── 课件.md ├── 1-4. [练习]酷炫的数字查找特效 │ ├── src │ │ ├── index.js │ │ ├── util │ │ │ ├── radColor.js │ │ │ ├── isPrime.js │ │ │ └── number.js │ │ └── page │ │ │ ├── event.js │ │ │ └── appendNumber.js │ ├── package.json │ └── dist │ │ └── index.html ├── 1-8. 编译过程 │ ├── src │ │ ├── b.js │ │ ├── a.js │ │ └── index.js │ ├── webpack.config.js │ ├── assets │ │ ├── 2020-01-09-10-26-15.png │ │ ├── 2020-01-09-10-53-28.png │ │ ├── 2020-01-09-11-54-08.png │ │ ├── 2020-01-09-12-32-38.png │ │ ├── 2020-01-09-12-35-05.png │ │ ├── 2020-01-09-12-39-16.png │ │ ├── 2020-01-09-12-43-52.png │ │ ├── 2020-01-09-12-47-43.png │ │ ├── 2020-01-09-12-54-34.png │ │ └── 2020-01-09-15-51-07.png │ ├── package.json │ └── 课件.md ├── 1-2. webpack的安装和使用 │ ├── src │ │ ├── a.js │ │ ├── b.js │ │ ├── index.js │ │ └── c.js │ ├── dist │ │ └── index.html │ ├── package.json │ └── 课件.md ├── 1-7. devtool配置 │ ├── src │ │ ├── index.js │ │ └── a.js │ ├── webpack.config.js │ ├── assets │ │ ├── 2020-01-08-16-38-26.png │ │ ├── 2020-01-08-16-58-06.png │ │ └── 2020-01-08-17-01-13.png │ ├── dist │ │ ├── index.html │ │ └── main.js │ ├── package.json │ └── 课件.md ├── 1-5. 编译结果分析 │ ├── src │ │ ├── a.js │ │ └── index.js │ ├── dist │ │ ├── abc.js │ │ ├── index.html │ │ ├── main.js │ │ └── my-main.js │ └── package.json ├── 1-12. [练习]处理样式 │ ├── src │ │ ├── assets │ │ │ └── index.css │ │ └── index.js │ ├── webpack.config.js │ ├── loaders │ │ └── style-loader.js │ ├── dist │ │ └── index.html │ └── package.json ├── 1-3. 模块化兼容性 │ ├── src │ │ ├── commonjsa.js │ │ ├── es6a.js │ │ └── index.js │ ├── assets │ │ ├── 2020-01-07-07-50-09.png │ │ ├── 2020-01-07-07-53-45.png │ │ ├── 2020-01-07-07-54-25.png │ │ └── 2020-01-07-07-55-54.png │ ├── package.json │ └── 课件.md ├── 1-13. [练习]处理图片 │ ├── dist │ │ ├── img-1dd36.png │ │ └── index.html │ ├── src │ │ ├── assets │ │ │ └── webpack.png │ │ └── index.js │ ├── package.json │ ├── webpack.config.js │ └── loaders │ │ └── img-loader.js └── 1-10. 入口和出口的最佳实践 │ ├── assets │ ├── 2020-01-10-12-00-28.png │ ├── 2020-01-10-12-38-03.png │ └── 2020-01-10-12-44-13.png │ └── 课件.md ├── 3. css工程化 ├── 3-6. 预编译器less │ ├── css │ │ ├── abc.css │ │ ├── theme.less │ │ ├── index.css │ │ ├── var.less │ │ ├── index.less │ │ ├── common.less │ │ ├── index copy 2.less │ │ └── index copy.less │ ├── assets │ │ ├── 2020-02-03-11-48-45.png │ │ └── 2020-02-03-11-50-05.png │ ├── package.json │ ├── test.html │ └── 课件.md ├── 3-2. 利用webpack拆分css │ ├── src │ │ ├── banner │ │ │ ├── styles │ │ │ │ ├── banner.css │ │ │ │ └── other.css │ │ │ └── index.js │ │ ├── assets │ │ │ ├── pager.css │ │ │ ├── bg.png │ │ │ └── banner.css │ │ └── index.js │ ├── webpack.config.js │ ├── package.json │ └── 课件.md ├── 3-10. 抽离css文件 │ ├── src │ │ ├── other.js │ │ ├── assets │ │ │ ├── b.css │ │ │ ├── a.css │ │ │ ├── img │ │ │ │ └── china.jpg │ │ │ └── index.css │ │ └── index.js │ ├── public │ │ └── index.html │ ├── package.json │ ├── 课件.md │ └── webpack.config.js ├── 3-8. PostCss │ ├── .browserslistrc │ ├── css │ │ ├── out.css │ │ ├── source.pcss │ │ ├── source copy 2.pcss │ │ ├── source copy 3.pcss │ │ ├── source copy.pcss │ │ └── source copy 4.pcss │ ├── .stylelintrc │ ├── assets │ │ ├── postcss-workflow.png │ │ ├── 2020-02-04-14-31-33.png │ │ ├── 2020-02-04-14-37-51.png │ │ └── 2020-02-05-14-37-11.png │ ├── postcss.config.js │ ├── package.json │ └── test.html ├── 3-7. 在webpack中使用less │ ├── src │ │ ├── assets │ │ │ ├── a.css │ │ │ └── index.less │ │ └── index.js │ ├── public │ │ └── index.html │ ├── package.json │ └── webpack.config.js ├── 3-9. 在webpack中使用postcss │ ├── .browserslistrc │ ├── src │ │ ├── index.js │ │ └── assets │ │ │ └── index.pcss │ ├── .stylelintrc │ ├── postcss.config.js │ ├── public │ │ └── index.html │ ├── webpack.config.js │ └── package.json ├── 3-5. css module │ ├── src │ │ ├── assets │ │ │ ├── style2.css │ │ │ └── style1.css │ │ └── index.js │ ├── assets │ │ ├── 2020-01-31-13-54-37.png │ │ ├── 2020-01-31-14-00-56.png │ │ ├── 2020-01-31-14-04-11.png │ │ └── 2020-01-31-14-08-49.png │ ├── public │ │ └── index.html │ ├── package.json │ ├── webpack.config.js │ └── 课件.md ├── 3-3. BEM │ ├── assets │ │ └── 2020-01-31-09-53-31.png │ ├── 课件.md │ ├── index.css │ └── index.html ├── 3-4. css-in-js │ ├── scripts │ │ ├── css │ │ │ ├── common.js │ │ │ └── util.js │ │ └── index.js │ ├── index.html │ └── 课件.md └── 3-1. css工程化概述 │ └── 课件.md ├── 5. 性能优化 ├── 5-4. 热替换 │ ├── src │ │ ├── a.js │ │ ├── index.css │ │ └── index.js │ ├── assets │ │ ├── 2020-02-21-14-20-49.png │ │ ├── 2020-02-21-14-22-32.png │ │ └── 2020-02-21-14-34-05.png │ ├── public │ │ └── index.html │ ├── webpack.config.js │ ├── package.json │ └── 课件.md ├── 5-6. 自动分包 │ ├── src │ │ ├── common.js │ │ ├── page1.css │ │ ├── common.css │ │ ├── page2.css │ │ ├── page1.js │ │ └── page2.js │ ├── assets │ │ └── 2020-02-24-17-19-47.png │ ├── public │ │ └── index.html │ ├── package.json │ └── webpack.config.js ├── 5-7. 代码压缩 │ ├── src │ │ ├── index.css │ │ └── index.js │ ├── index.js │ ├── package.json │ ├── webpack.config.js │ └── 课件.md ├── 5-8. tree shaking │ ├── src │ │ ├── common.js │ │ ├── index.css │ │ ├── index.js │ │ └── myMath.js │ ├── public │ │ └── index.html │ ├── package.json │ ├── webpack.config.js │ └── 课件.md ├── 5-9. 懒加载 │ ├── src │ │ ├── util.js │ │ └── index.js │ ├── public │ │ └── index.html │ ├── webpack.config.js │ └── package.json ├── 5-12. gzip │ ├── src │ │ ├── util.js │ │ └── index.js │ ├── assets │ │ ├── 2020-02-28-15-37-26.png │ │ └── 2020-02-28-15-41-44.png │ ├── 课件.md │ ├── webpack.config.js │ └── package.json ├── 5-2. 减少模块解析 │ ├── src │ │ ├── index.js │ │ └── test.js │ ├── assets │ │ ├── 2020-02-13-16-26-41.png │ │ └── 2020-02-13-16-28-10.png │ ├── webpack.config.js │ ├── package.json │ └── 课件.md ├── 5-3. 优化loader性能 │ ├── .browserslistrc │ ├── test.js │ ├── assets │ │ └── 2020-02-21-13-32-36.png │ ├── src │ │ ├── index.js │ │ └── loader.js │ ├── .babelrc │ ├── webpack.config.js │ ├── md │ │ ├── custom.less │ │ └── parser.js │ ├── package.json │ └── 课件.md ├── 5-10. ESLint │ ├── src │ │ └── index.js │ ├── .eslintrc.json │ ├── package.json │ └── 课件.md ├── 5-11. bundle analyzer │ ├── src │ │ ├── util.js │ │ └── index.js │ ├── webpack.config.js │ └── package.json ├── 性能优化.xmind ├── 5-5. 手动分包 │ ├── assets │ │ └── 2020-02-24-13-24-57.png │ ├── src │ │ ├── index.js │ │ └── other.js │ ├── dll │ │ ├── jquery.manifest.json │ │ └── lodash.manifest.json │ ├── public │ │ └── index.html │ ├── package.json │ ├── webpack.dll.config.js │ └── webpack.config.js └── 5-1. 性能优化概述 │ ├── assets │ └── 2020-02-12-09-53-01.png │ └── 课件.md ├── 6. 补充和案例 ├── 6-1. [扩展]不确定的动态依赖 │ ├── src │ │ ├── utils │ │ │ ├── 1.css │ │ │ ├── d.js │ │ │ ├── a.js │ │ │ ├── b.js │ │ │ ├── c.js │ │ │ └── index.js │ │ └── index.js │ ├── webpack.config.js │ └── package.json ├── 6-6. 搭建全栈应用 │ └── 说明.md ├── 6-3. [扩展]搭建vue单页应用 │ └── 说明.md ├── 6-4. [扩展]搭建React单页应用 │ └── 说明.md ├── 6-2. 搭建多页应用 │ └── 说明.md └── 6-5. [扩展]搭建Node应用 │ └── 说明.md ├── .eslintignore ├── 4. js兼容性 ├── 4-1. babel的安装和使用 │ ├── js │ │ ├── a.js │ │ └── b.js │ ├── .babelrc │ ├── assets │ │ ├── 2020-02-07-10-12-01.png │ │ ├── 2020-02-07-10-25-56.png │ │ └── 2020-02-07-10-27-30.png │ ├── package.json │ └── 课件.md ├── 4-2. babel预设 │ ├── js │ │ └── index.js │ ├── .browserslistrc │ ├── .babelrc │ ├── package.json │ └── 课件.md ├── 4-3. babel插件 │ ├── .browserslistrc │ ├── js │ │ ├── index.js │ │ ├── index copy.js │ │ ├── index copy 2.js │ │ └── index copy 3.js │ ├── .babelrc │ ├── package.json │ └── 课件.md ├── 4-4. 在webpack中使用babel │ ├── .browserslistrc │ ├── .babelrc │ ├── src │ │ └── index.js │ ├── webpack.config.js │ └── package.json ├── 4-6. [扩展]async和await的转换 │ ├── source.js │ ├── package.json │ ├── package-lock.json │ └── target.js └── 4-5. [扩展]对类的转换 │ └── source.js └── .gitignore /2. 常用扩展/2-2. 自动生成页面/src/a.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /1. webpack核心功能/1-6. 配置文件/123.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /1. webpack核心功能/1-11. loader/src/a.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /1. webpack核心功能/1-16. 区分环境/src/index.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /3. css工程化/3-6. 预编译器less/css/abc.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /1. webpack核心功能/1-15. [练习]添加文件列表/src/a.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /1. webpack核心功能/1-17. 其他细节配置/src/index.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /1. webpack核心功能/1-17. 其他细节配置/src/other.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /5. 性能优化/5-4. 热替换/src/a.js: -------------------------------------------------------------------------------- 1 | export default "d" -------------------------------------------------------------------------------- /6. 补充和案例/6-1. [扩展]不确定的动态依赖/src/utils/1.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | **/dist/**/*.js 2 | node_modules -------------------------------------------------------------------------------- /2. 常用扩展/2-1. 清除输出目录/课件.md: -------------------------------------------------------------------------------- 1 | clean-webpack-plugin -------------------------------------------------------------------------------- /2. 常用扩展/2-2. 自动生成页面/课件.md: -------------------------------------------------------------------------------- 1 | html-webpack-plugin -------------------------------------------------------------------------------- /2. 常用扩展/2-3. 复制静态资源/课件.md: -------------------------------------------------------------------------------- 1 | copy-webpack-plugin -------------------------------------------------------------------------------- /4. js兼容性/4-1. babel的安装和使用/js/a.js: -------------------------------------------------------------------------------- 1 | const a = 2; -------------------------------------------------------------------------------- /1. webpack核心功能/1-9. 入口和出口/src/a.js: -------------------------------------------------------------------------------- 1 | console.log("aaaa") -------------------------------------------------------------------------------- /2. 常用扩展/2-1. 清除输出目录/src/index.js: -------------------------------------------------------------------------------- 1 | console.log("ac") -------------------------------------------------------------------------------- /3. css工程化/3-6. 预编译器less/css/theme.less: -------------------------------------------------------------------------------- 1 | @danger: red; -------------------------------------------------------------------------------- /4. js兼容性/4-1. babel的安装和使用/js/b.js: -------------------------------------------------------------------------------- 1 | const a = 1; 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | cache 4 | .DS_Store -------------------------------------------------------------------------------- /1. webpack核心功能/1-15. [练习]添加文件列表/src/index.js: -------------------------------------------------------------------------------- 1 | require("./a") -------------------------------------------------------------------------------- /1. webpack核心功能/1-9. 入口和出口/src/index.js: -------------------------------------------------------------------------------- 1 | console.log("index") -------------------------------------------------------------------------------- /3. css工程化/3-2. 利用webpack拆分css/src/banner/styles/banner.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /3. css工程化/3-2. 利用webpack拆分css/src/banner/styles/other.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /5. 性能优化/5-6. 自动分包/src/common.js: -------------------------------------------------------------------------------- 1 | module.exports = "common" -------------------------------------------------------------------------------- /1. webpack核心功能/1-17. 其他细节配置/src/a/b/c/d.js: -------------------------------------------------------------------------------- 1 | require("@/other") -------------------------------------------------------------------------------- /1. webpack核心功能/1-6. 配置文件/src/main.js: -------------------------------------------------------------------------------- 1 | console.log("index") 2 | -------------------------------------------------------------------------------- /2. 常用扩展/2-2. 自动生成页面/src/index.js: -------------------------------------------------------------------------------- 1 | console.log("asdfasdfasfd") -------------------------------------------------------------------------------- /2. 常用扩展/2-3. 复制静态资源/src/index.js: -------------------------------------------------------------------------------- 1 | console.log("asdfasdfasfd") -------------------------------------------------------------------------------- /3. css工程化/3-10. 抽离css文件/src/other.js: -------------------------------------------------------------------------------- 1 | import "./assets/b.css" -------------------------------------------------------------------------------- /6. 补充和案例/6-1. [扩展]不确定的动态依赖/src/utils/d.js: -------------------------------------------------------------------------------- 1 | module.exports = "d"; -------------------------------------------------------------------------------- /1. webpack核心功能/1-1. 如何在浏览器端实现模块化/modules/test.txt: -------------------------------------------------------------------------------- 1 | asdfasdfasfasfas -------------------------------------------------------------------------------- /1. webpack核心功能/1-14. plugin/src/index.js: -------------------------------------------------------------------------------- 1 | console.log("aasdfasfasdf") -------------------------------------------------------------------------------- /1. webpack核心功能/1-17. 其他细节配置/abc/jquery.js: -------------------------------------------------------------------------------- 1 | module.exports = "jquery" -------------------------------------------------------------------------------- /1. webpack核心功能/1-4. [练习]酷炫的数字查找特效/src/index.js: -------------------------------------------------------------------------------- 1 | import "./page/event" -------------------------------------------------------------------------------- /5. 性能优化/5-6. 自动分包/src/page1.css: -------------------------------------------------------------------------------- 1 | .red { 2 | color: red; 3 | } 4 | -------------------------------------------------------------------------------- /5. 性能优化/5-7. 代码压缩/src/index.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background: #000; 3 | } -------------------------------------------------------------------------------- /5. 性能优化/5-8. tree shaking/src/common.js: -------------------------------------------------------------------------------- 1 | var n = Math.random(); 2 | -------------------------------------------------------------------------------- /5. 性能优化/5-9. 懒加载/src/util.js: -------------------------------------------------------------------------------- 1 | export { chunk } from "lodash-es"; 2 | -------------------------------------------------------------------------------- /3. css工程化/3-10. 抽离css文件/src/assets/b.css: -------------------------------------------------------------------------------- 1 | .b{ 2 | color: green; 3 | } -------------------------------------------------------------------------------- /4. js兼容性/4-2. babel预设/js/index.js: -------------------------------------------------------------------------------- 1 | async function Test(){ 2 | 3 | } -------------------------------------------------------------------------------- /5. 性能优化/5-12. gzip/src/util.js: -------------------------------------------------------------------------------- 1 | export { chunk } from "lodash-es"; 2 | -------------------------------------------------------------------------------- /5. 性能优化/5-6. 自动分包/src/common.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #000; 3 | } 4 | -------------------------------------------------------------------------------- /5. 性能优化/5-6. 自动分包/src/page2.css: -------------------------------------------------------------------------------- 1 | .green { 2 | color: green; 3 | } 4 | -------------------------------------------------------------------------------- /5. 性能优化/5-7. 代码压缩/index.js: -------------------------------------------------------------------------------- 1 | var a=1;"boolean"==typeof a&&console.log("a"); -------------------------------------------------------------------------------- /6. 补充和案例/6-1. [扩展]不确定的动态依赖/src/utils/a.js: -------------------------------------------------------------------------------- 1 | 2 | module.exports = "a"; 3 | -------------------------------------------------------------------------------- /6. 补充和案例/6-1. [扩展]不确定的动态依赖/src/utils/b.js: -------------------------------------------------------------------------------- 1 | 2 | module.exports = "b"; 3 | -------------------------------------------------------------------------------- /6. 补充和案例/6-1. [扩展]不确定的动态依赖/src/utils/c.js: -------------------------------------------------------------------------------- 1 | 2 | module.exports = "c"; 3 | -------------------------------------------------------------------------------- /6. 补充和案例/6-6. 搭建全栈应用/说明.md: -------------------------------------------------------------------------------- 1 | 见：https://github.com/yjisme/node-vue-webpack -------------------------------------------------------------------------------- /1. webpack核心功能/1-8. 编译过程/src/b.js: -------------------------------------------------------------------------------- 1 | console.log("b") 2 | module.exports = "b"; -------------------------------------------------------------------------------- /3. css工程化/3-2. 利用webpack拆分css/src/banner/index.js: -------------------------------------------------------------------------------- 1 | import "./styles/banner.css" -------------------------------------------------------------------------------- /3. css工程化/3-8. PostCss/.browserslistrc: -------------------------------------------------------------------------------- 1 | last 3 version 2 | > 1% 3 | not ie <= 8 -------------------------------------------------------------------------------- /3. css工程化/3-8. PostCss/css/out.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #f40; 3 | } 4 | -------------------------------------------------------------------------------- /4. js兼容性/4-2. babel预设/.browserslistrc: -------------------------------------------------------------------------------- 1 | last 3 version 2 | > 1% 3 | not ie <= 8 -------------------------------------------------------------------------------- /4. js兼容性/4-3. babel插件/.browserslistrc: -------------------------------------------------------------------------------- 1 | last 3 version 2 | > 1% 3 | not ie <= 8 -------------------------------------------------------------------------------- /5. 性能优化/5-2. 减少模块解析/src/index.js: -------------------------------------------------------------------------------- 1 | import $ from "./test" 2 | console.log($); -------------------------------------------------------------------------------- /5. 性能优化/5-3. 优化loader性能/.browserslistrc: -------------------------------------------------------------------------------- 1 | last 3 version 2 | > 1% 3 | not ie <= 8 -------------------------------------------------------------------------------- /6. 补充和案例/6-3. [扩展]搭建vue单页应用/说明.md: -------------------------------------------------------------------------------- 1 | 见：https://github.com/yjisme/vue-webpack 2 | -------------------------------------------------------------------------------- /3. css工程化/3-7. 在webpack中使用less/src/assets/a.css: -------------------------------------------------------------------------------- 1 | .abc { 2 | color: green; 3 | } -------------------------------------------------------------------------------- /3. css工程化/3-8. PostCss/css/source.pcss: -------------------------------------------------------------------------------- 1 | body { 2 | background: #f40; 3 | } 4 | -------------------------------------------------------------------------------- /4. js兼容性/4-3. babel插件/js/index.js: -------------------------------------------------------------------------------- 1 | class A { 2 | method() { 3 | 4 | } 5 | } -------------------------------------------------------------------------------- /5. 性能优化/5-10. ESLint/src/index.js: -------------------------------------------------------------------------------- 1 | var foo = Math.random(); 2 | if (foo) foo++; 3 | -------------------------------------------------------------------------------- /5. 性能优化/5-11. bundle analyzer/src/util.js: -------------------------------------------------------------------------------- 1 | export { chunk } from "lodash-es"; 2 | -------------------------------------------------------------------------------- /5. 性能优化/5-2. 减少模块解析/src/test.js: -------------------------------------------------------------------------------- 1 | import $ from "jquery" 2 | 3 | export default $; -------------------------------------------------------------------------------- /6. 补充和案例/6-4. [扩展]搭建React单页应用/说明.md: -------------------------------------------------------------------------------- 1 | 见：https://github.com/yjisme/react-webpack 2 | -------------------------------------------------------------------------------- /1. webpack核心功能/1-2. webpack的安装和使用/src/a.js: -------------------------------------------------------------------------------- 1 | require("./b") 2 | console.log("module a") -------------------------------------------------------------------------------- /1. webpack核心功能/1-2. webpack的安装和使用/src/b.js: -------------------------------------------------------------------------------- 1 | import "./c" 2 | 3 | console.log("module a") -------------------------------------------------------------------------------- /1. webpack核心功能/1-7. devtool配置/src/index.js: -------------------------------------------------------------------------------- 1 | require("./a") 2 | console.log("index module") -------------------------------------------------------------------------------- /3. css工程化/3-9. 在webpack中使用postcss/.browserslistrc: -------------------------------------------------------------------------------- 1 | last 3 version 2 | > 1% 3 | not ie <= 8 -------------------------------------------------------------------------------- /4. js兼容性/4-1. babel的安装和使用/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [], 3 | "plugins": [] 4 | } -------------------------------------------------------------------------------- /4. js兼容性/4-3. babel插件/js/index copy.js: -------------------------------------------------------------------------------- 1 | class A { 2 | method() { 3 | 4 | } 5 | } -------------------------------------------------------------------------------- /4. js兼容性/4-4. 在webpack中使用babel/.browserslistrc: -------------------------------------------------------------------------------- 1 | last 3 version 2 | > 1% 3 | not ie <= 8 -------------------------------------------------------------------------------- /1. webpack核心功能/1-5. 编译结果分析/src/a.js: -------------------------------------------------------------------------------- 1 | 2 | console.log("module a") 3 | module.exports = "a"; -------------------------------------------------------------------------------- /1. webpack核心功能/1-8. 编译过程/src/a.js: -------------------------------------------------------------------------------- 1 | require("./b") 2 | console.log("a") 3 | module.exports = "a" -------------------------------------------------------------------------------- /3. css工程化/3-2. 利用webpack拆分css/src/assets/pager.css: -------------------------------------------------------------------------------- 1 | .pager{ 2 | text-align: center; 3 | } -------------------------------------------------------------------------------- /4. js兼容性/4-3. babel插件/js/index copy 2.js: -------------------------------------------------------------------------------- 1 | class A { 2 | method() { 3 | 4 | } 5 | } -------------------------------------------------------------------------------- /4. js兼容性/4-3. babel插件/js/index copy 3.js: -------------------------------------------------------------------------------- 1 | class A { 2 | method() { 3 | 4 | } 5 | } -------------------------------------------------------------------------------- /5. 性能优化/5-3. 优化loader性能/test.js: -------------------------------------------------------------------------------- 1 | var cpus = require("os").cpus(); 2 | console.log(cpus.length) -------------------------------------------------------------------------------- /5. 性能优化/5-4. 热替换/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | color: #fff; 3 | background: brown; 4 | } 5 | -------------------------------------------------------------------------------- /5. 性能优化/性能优化.xmind: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/5. 性能优化/性能优化.xmind -------------------------------------------------------------------------------- /6. 补充和案例/6-2. 搭建多页应用/说明.md: -------------------------------------------------------------------------------- 1 | 见：https://github.com/yjisme/multi-static-pages-webpackproj 2 | -------------------------------------------------------------------------------- /1. webpack核心功能/1-11. loader/src/index.js: -------------------------------------------------------------------------------- 1 | // 未知数 a = 1; 2 | // 未知数 b = 3 3 | require("./a"); 4 | -------------------------------------------------------------------------------- /1. webpack核心功能/1-2. webpack的安装和使用/src/index.js: -------------------------------------------------------------------------------- 1 | require("./a") 2 | console.log("hello webpack"); -------------------------------------------------------------------------------- /1. webpack核心功能/1-7. devtool配置/src/a.js: -------------------------------------------------------------------------------- 1 | var obj = null; 2 | obj.abc(); 3 | console.log("a module") -------------------------------------------------------------------------------- /1. webpack核心功能/1-8. 编译过程/src/index.js: -------------------------------------------------------------------------------- 1 | console.log("index") 2 | require("./a"); 3 | require("./b") -------------------------------------------------------------------------------- /3. css工程化/3-10. 抽离css文件/src/assets/a.css: -------------------------------------------------------------------------------- 1 | @import "./b.css"; 2 | 3 | .a{ 4 | color: red; 5 | } -------------------------------------------------------------------------------- /3. css工程化/3-6. 预编译器less/css/index.css: -------------------------------------------------------------------------------- 1 | @import "abc.css"; 2 | .test { 3 | color: red; 4 | } 5 | -------------------------------------------------------------------------------- /1. webpack核心功能/1-12. [练习]处理样式/src/assets/index.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background: #333; 3 | color: #fff; 4 | } -------------------------------------------------------------------------------- /1. webpack核心功能/1-15. [练习]添加文件列表/dist/文件列表.md: -------------------------------------------------------------------------------- 1 | 【main.js】 2 | 大小：4.076KB 3 | 4 | 【main.js.map】 5 | 大小：3.7KB -------------------------------------------------------------------------------- /1. webpack核心功能/1-3. 模块化兼容性/src/commonjsa.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | a: 1, 3 | b: 2, 4 | c: 3 5 | } -------------------------------------------------------------------------------- /3. css工程化/3-2. 利用webpack拆分css/src/index.js: -------------------------------------------------------------------------------- 1 | require("./assets/banner.css") 2 | 3 | console.log(result) 4 | -------------------------------------------------------------------------------- /3. css工程化/3-6. 预编译器less/css/var.less: -------------------------------------------------------------------------------- 1 | @info: #333; 2 | @danger: #f40; 3 | @success: green; 4 | @warn: brown; -------------------------------------------------------------------------------- /1. webpack核心功能/1-1. 如何在浏览器端实现模块化/modules/a.js: -------------------------------------------------------------------------------- 1 | import b from "./b.js" 2 | console.log("a") 3 | export default "a" -------------------------------------------------------------------------------- /1. webpack核心功能/1-15. [练习]添加文件列表/dist/filelist.txt: -------------------------------------------------------------------------------- 1 | 【main.js】 2 | 大小：4.076KB 3 | 4 | 【main.js.map】 5 | 大小：3.7KB -------------------------------------------------------------------------------- /3. css工程化/3-9. 在webpack中使用postcss/src/index.js: -------------------------------------------------------------------------------- 1 | import styles from "./assets/index.pcss"; 2 | console.log(styles) -------------------------------------------------------------------------------- /1. webpack核心功能/1-16. 区分环境/webpack.pro.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | mode: "production", 3 | devtool: "none" 4 | } -------------------------------------------------------------------------------- /1. webpack核心功能/1-12. [练习]处理样式/src/index.js: -------------------------------------------------------------------------------- 1 | var content = require("./assets/index.css") 2 | 3 | console.log(content); //css的源码字符串 -------------------------------------------------------------------------------- /1. webpack核心功能/1-16. 区分环境/webpack.dev.js: -------------------------------------------------------------------------------- 1 | 2 | module.exports = { 3 | mode: "development", 4 | devtool: "source-map" 5 | } -------------------------------------------------------------------------------- /1. webpack核心功能/1-5. 编译结果分析/src/index.js: -------------------------------------------------------------------------------- 1 | console.log("index module") 2 | var a = require("./a") 3 | a.abc(); 4 | console.log(a) -------------------------------------------------------------------------------- /1. webpack核心功能/1-8. 编译过程/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | mode: "development", 3 | devtool: "source-map" 4 | } -------------------------------------------------------------------------------- /5. 性能优化/5-7. 代码压缩/src/index.js: -------------------------------------------------------------------------------- 1 | import "./index.css"; 2 | 3 | const a = "abc"; 4 | const b = "bcd"; 5 | const c = a + b; 6 | -------------------------------------------------------------------------------- /1. webpack核心功能/1-7. devtool配置/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | mode: "production", 3 | devtool: "hidden-source-map" 4 | } -------------------------------------------------------------------------------- /2. 常用扩展/2-3. 复制静态资源/dist/img/webpack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/2. 常用扩展/2-3. 复制静态资源/dist/img/webpack.png -------------------------------------------------------------------------------- /2. 常用扩展/2-8. [练习]区域查询/静态页面/img/china.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/2. 常用扩展/2-8. [练习]区域查询/静态页面/img/china.jpg -------------------------------------------------------------------------------- /3. css工程化/3-7. 在webpack中使用less/src/assets/index.less: -------------------------------------------------------------------------------- 1 | @color: #f40; 2 | 3 | .main { 4 | color: @color; 5 | font-size: 2em; 6 | } -------------------------------------------------------------------------------- /1. webpack核心功能/1-2. webpack的安装和使用/src/c.js: -------------------------------------------------------------------------------- 1 | console.log("es6 module c") 2 | import $ from "jquery" 3 | console.log($); 4 | export default "c"; -------------------------------------------------------------------------------- /2. 常用扩展/2-3. 复制静态资源/public/img/webpack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/2. 常用扩展/2-3. 复制静态资源/public/img/webpack.png -------------------------------------------------------------------------------- /2. 常用扩展/2-5. 普通文件处理/src/assets/webpack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/2. 常用扩展/2-5. 普通文件处理/src/assets/webpack.png -------------------------------------------------------------------------------- /2. 常用扩展/2-6. 解决路径问题/src/assets/webpack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/2. 常用扩展/2-6. 解决路径问题/src/assets/webpack.png -------------------------------------------------------------------------------- /2. 常用扩展/2-8. [练习]区域查询/工程/public/img/china.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/2. 常用扩展/2-8. [练习]区域查询/工程/public/img/china.jpg -------------------------------------------------------------------------------- /3. css工程化/3-8. PostCss/.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "stylelint-config-standard", 3 | "rules": { 4 | "indentation": 4 5 | } 6 | } -------------------------------------------------------------------------------- /1. webpack核心功能/1-11. loader/loaders/loader1.js: -------------------------------------------------------------------------------- 1 | module.exports = function(sourceCode){ 2 | console.log("loader1"); 3 | return sourceCode; 4 | } -------------------------------------------------------------------------------- /1. webpack核心功能/1-11. loader/loaders/loader2.js: -------------------------------------------------------------------------------- 1 | module.exports = function(sourceCode){ 2 | console.log("loader2"); 3 | return sourceCode; 4 | } -------------------------------------------------------------------------------- /1. webpack核心功能/1-11. loader/loaders/loader3.js: -------------------------------------------------------------------------------- 1 | module.exports = function(sourceCode){ 2 | console.log("loader3"); 3 | return sourceCode; 4 | } -------------------------------------------------------------------------------- /1. webpack核心功能/1-11. loader/loaders/loader4.js: -------------------------------------------------------------------------------- 1 | module.exports = function(sourceCode){ 2 | console.log("loader4"); 3 | return sourceCode; 4 | } -------------------------------------------------------------------------------- /1. webpack核心功能/1-13. [练习]处理图片/dist/img-1dd36.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/1. webpack核心功能/1-13. [练习]处理图片/dist/img-1dd36.png -------------------------------------------------------------------------------- /1. webpack核心功能/1-5. 编译结果分析/dist/abc.js: -------------------------------------------------------------------------------- 1 | var a = 1; 2 | var b = 2; 3 | var c = 3; 4 | eval("var d = null;\nd.abc();//# sourceURL=webpack:///./src/a.js") -------------------------------------------------------------------------------- /2. 常用扩展/2-5. 普通文件处理/dist/imgs/webpack.ba6ae.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/2. 常用扩展/2-5. 普通文件处理/dist/imgs/webpack.ba6ae.png -------------------------------------------------------------------------------- /2. 常用扩展/2-5. 普通文件处理/src/assets/sub/webpack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/2. 常用扩展/2-5. 普通文件处理/src/assets/sub/webpack.png -------------------------------------------------------------------------------- /2. 常用扩展/2-6. 解决路径问题/dist/imgs/webpack.ba6ae.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/2. 常用扩展/2-6. 解决路径问题/dist/imgs/webpack.ba6ae.png -------------------------------------------------------------------------------- /2. 常用扩展/2-6. 解决路径问题/src/assets/sub/webpack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/2. 常用扩展/2-6. 解决路径问题/src/assets/sub/webpack.png -------------------------------------------------------------------------------- /3. css工程化/3-10. 抽离css文件/src/assets/img/china.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/3. css工程化/3-10. 抽离css文件/src/assets/img/china.jpg -------------------------------------------------------------------------------- /3. css工程化/3-2. 利用webpack拆分css/src/assets/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/3. css工程化/3-2. 利用webpack拆分css/src/assets/bg.png -------------------------------------------------------------------------------- /3. css工程化/3-5. css module/src/assets/style2.css: -------------------------------------------------------------------------------- 1 | /* article的样式 */ 2 | 3 | .c1 { 4 | color: blue; 5 | } 6 | 7 | .c2 { 8 | background: brown; 9 | } -------------------------------------------------------------------------------- /3. css工程化/3-6. 预编译器less/css/index.less: -------------------------------------------------------------------------------- 1 | @import "common.less"; 2 | @import "theme.less"; 3 | @import "abc.css"; 4 | .test { 5 | color: @danger; 6 | } -------------------------------------------------------------------------------- /5. 性能优化/5-4. 热替换/assets/2020-02-21-14-20-49.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/5. 性能优化/5-4. 热替换/assets/2020-02-21-14-20-49.png -------------------------------------------------------------------------------- /5. 性能优化/5-4. 热替换/assets/2020-02-21-14-22-32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/5. 性能优化/5-4. 热替换/assets/2020-02-21-14-22-32.png -------------------------------------------------------------------------------- /5. 性能优化/5-4. 热替换/assets/2020-02-21-14-34-05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/5. 性能优化/5-4. 热替换/assets/2020-02-21-14-34-05.png -------------------------------------------------------------------------------- /5. 性能优化/5-5. 手动分包/assets/2020-02-24-13-24-57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/5. 性能优化/5-5. 手动分包/assets/2020-02-24-13-24-57.png -------------------------------------------------------------------------------- /5. 性能优化/5-5. 手动分包/src/index.js: -------------------------------------------------------------------------------- 1 | import $ from "jquery" 2 | import _ from "lodash" 3 | 4 | const result = _.isArray($(".red")) 5 | console.log(result); -------------------------------------------------------------------------------- /5. 性能优化/5-5. 手动分包/src/other.js: -------------------------------------------------------------------------------- 1 | import $ from "jquery" 2 | import _ from "lodash" 3 | 4 | const result = _.isArray($(".red")) 5 | console.log(result); -------------------------------------------------------------------------------- /5. 性能优化/5-6. 自动分包/assets/2020-02-24-17-19-47.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/5. 性能优化/5-6. 自动分包/assets/2020-02-24-17-19-47.png -------------------------------------------------------------------------------- /6. 补充和案例/6-1. [扩展]不确定的动态依赖/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | mode: "development", 3 | devtool: "source-map", 4 | watch: true, 5 | }; 6 | -------------------------------------------------------------------------------- /3. css工程化/3-3. BEM/assets/2020-01-31-09-53-31.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/3. css工程化/3-3. BEM/assets/2020-01-31-09-53-31.png -------------------------------------------------------------------------------- /3. css工程化/3-8. PostCss/assets/postcss-workflow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/3. css工程化/3-8. PostCss/assets/postcss-workflow.png -------------------------------------------------------------------------------- /5. 性能优化/5-1. 性能优化概述/assets/2020-02-12-09-53-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/5. 性能优化/5-1. 性能优化概述/assets/2020-02-12-09-53-01.png -------------------------------------------------------------------------------- /5. 性能优化/5-12. gzip/assets/2020-02-28-15-37-26.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/5. 性能优化/5-12. gzip/assets/2020-02-28-15-37-26.png -------------------------------------------------------------------------------- /5. 性能优化/5-12. gzip/assets/2020-02-28-15-41-44.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/5. 性能优化/5-12. gzip/assets/2020-02-28-15-41-44.png -------------------------------------------------------------------------------- /5. 性能优化/5-2. 减少模块解析/assets/2020-02-13-16-26-41.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/5. 性能优化/5-2. 减少模块解析/assets/2020-02-13-16-26-41.png -------------------------------------------------------------------------------- /5. 性能优化/5-2. 减少模块解析/assets/2020-02-13-16-28-10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/5. 性能优化/5-2. 减少模块解析/assets/2020-02-13-16-28-10.png -------------------------------------------------------------------------------- /1. webpack核心功能/1-13. [练习]处理图片/src/assets/webpack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/1. webpack核心功能/1-13. [练习]处理图片/src/assets/webpack.png -------------------------------------------------------------------------------- /2. 常用扩展/2-8. [练习]区域查询/api.md: -------------------------------------------------------------------------------- 1 | 请求地址：http://yuanjin.tech:5100/api/local 2 | 3 | method：GET 4 | 5 | query： 6 | 7 | - parentId: 可选，若不填，则查询所有省份，若填写省份id，则查询省份下的所有城市 -------------------------------------------------------------------------------- /3. css工程化/3-7. 在webpack中使用less/src/index.js: -------------------------------------------------------------------------------- 1 | import styles from "./assets/index.less" 2 | var div = document.getElementById("app"); 3 | div.className = styles.main; -------------------------------------------------------------------------------- /3. css工程化/3-8. PostCss/assets/2020-02-04-14-31-33.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/3. css工程化/3-8. PostCss/assets/2020-02-04-14-31-33.png -------------------------------------------------------------------------------- /3. css工程化/3-8. PostCss/assets/2020-02-04-14-37-51.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/3. css工程化/3-8. PostCss/assets/2020-02-04-14-37-51.png -------------------------------------------------------------------------------- /3. css工程化/3-8. PostCss/assets/2020-02-05-14-37-11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/3. css工程化/3-8. PostCss/assets/2020-02-05-14-37-11.png -------------------------------------------------------------------------------- /3. css工程化/3-9. 在webpack中使用postcss/.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "stylelint-config-standard", 3 | "rules": { 4 | "indentation": 4 5 | } 6 | } -------------------------------------------------------------------------------- /3. css工程化/3-9. 在webpack中使用postcss/src/assets/index.pcss: -------------------------------------------------------------------------------- 1 | :root { 2 | --dangerColor: #f40; 3 | } 4 | 5 | .danger { 6 | color: var(--dangerColor); 7 | } 8 | -------------------------------------------------------------------------------- /1. webpack核心功能/1-6. 配置文件/webpack.config.js: -------------------------------------------------------------------------------- 1 | 2 | module.exports = { 3 | entry: "./src/main.js", 4 | output: { 5 | filename: "bundle.js" 6 | } 7 | } -------------------------------------------------------------------------------- /1. webpack核心功能/1-8. 编译过程/assets/2020-01-09-10-26-15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/1. webpack核心功能/1-8. 编译过程/assets/2020-01-09-10-26-15.png -------------------------------------------------------------------------------- /1. webpack核心功能/1-8. 编译过程/assets/2020-01-09-10-53-28.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/1. webpack核心功能/1-8. 编译过程/assets/2020-01-09-10-53-28.png -------------------------------------------------------------------------------- /1. webpack核心功能/1-8. 编译过程/assets/2020-01-09-11-54-08.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/1. webpack核心功能/1-8. 编译过程/assets/2020-01-09-11-54-08.png -------------------------------------------------------------------------------- /1. webpack核心功能/1-8. 编译过程/assets/2020-01-09-12-32-38.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/1. webpack核心功能/1-8. 编译过程/assets/2020-01-09-12-32-38.png -------------------------------------------------------------------------------- /1. webpack核心功能/1-8. 编译过程/assets/2020-01-09-12-35-05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/1. webpack核心功能/1-8. 编译过程/assets/2020-01-09-12-35-05.png -------------------------------------------------------------------------------- /1. webpack核心功能/1-8. 编译过程/assets/2020-01-09-12-39-16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/1. webpack核心功能/1-8. 编译过程/assets/2020-01-09-12-39-16.png -------------------------------------------------------------------------------- /1. webpack核心功能/1-8. 编译过程/assets/2020-01-09-12-43-52.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/1. webpack核心功能/1-8. 编译过程/assets/2020-01-09-12-43-52.png -------------------------------------------------------------------------------- /1. webpack核心功能/1-8. 编译过程/assets/2020-01-09-12-47-43.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/1. webpack核心功能/1-8. 编译过程/assets/2020-01-09-12-47-43.png -------------------------------------------------------------------------------- /1. webpack核心功能/1-8. 编译过程/assets/2020-01-09-12-54-34.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/1. webpack核心功能/1-8. 编译过程/assets/2020-01-09-12-54-34.png -------------------------------------------------------------------------------- /1. webpack核心功能/1-8. 编译过程/assets/2020-01-09-15-51-07.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/1. webpack核心功能/1-8. 编译过程/assets/2020-01-09-15-51-07.png -------------------------------------------------------------------------------- /3. css工程化/3-6. 预编译器less/assets/2020-02-03-11-48-45.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/3. css工程化/3-6. 预编译器less/assets/2020-02-03-11-48-45.png -------------------------------------------------------------------------------- /3. css工程化/3-6. 预编译器less/assets/2020-02-03-11-50-05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/3. css工程化/3-6. 预编译器less/assets/2020-02-03-11-50-05.png -------------------------------------------------------------------------------- /5. 性能优化/5-3. 优化loader性能/assets/2020-02-21-13-32-36.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/5. 性能优化/5-3. 优化loader性能/assets/2020-02-21-13-32-36.png -------------------------------------------------------------------------------- /1. webpack核心功能/1-1. 如何在浏览器端实现模块化/modules/b.js: -------------------------------------------------------------------------------- 1 | // import $ from "../node_modules/jquery/dist/jquery.js"; 2 | // require("jquery") 3 | console.log("b") 4 | export default "b"; -------------------------------------------------------------------------------- /1. webpack核心功能/1-11. loader/assets/2020-01-13-09-28-52.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/1. webpack核心功能/1-11. loader/assets/2020-01-13-09-28-52.png -------------------------------------------------------------------------------- /1. webpack核心功能/1-11. loader/assets/2020-01-13-09-29-08.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/1. webpack核心功能/1-11. loader/assets/2020-01-13-09-29-08.png -------------------------------------------------------------------------------- /1. webpack核心功能/1-11. loader/assets/2020-01-13-09-35-44.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/1. webpack核心功能/1-11. loader/assets/2020-01-13-09-35-44.png -------------------------------------------------------------------------------- /1. webpack核心功能/1-11. loader/assets/2020-01-13-10-29-54.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/1. webpack核心功能/1-11. loader/assets/2020-01-13-10-29-54.png -------------------------------------------------------------------------------- /1. webpack核心功能/1-11. loader/assets/2020-01-13-10-39-24.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/1. webpack核心功能/1-11. loader/assets/2020-01-13-10-39-24.png -------------------------------------------------------------------------------- /1. webpack核心功能/1-14. plugin/assets/2020-01-15-12-45-16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/1. webpack核心功能/1-14. plugin/assets/2020-01-15-12-45-16.png -------------------------------------------------------------------------------- /1. webpack核心功能/1-14. plugin/assets/2020-01-15-12-49-26.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/1. webpack核心功能/1-14. plugin/assets/2020-01-15-12-49-26.png -------------------------------------------------------------------------------- /1. webpack核心功能/1-3. 模块化兼容性/assets/2020-01-07-07-50-09.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/1. webpack核心功能/1-3. 模块化兼容性/assets/2020-01-07-07-50-09.png -------------------------------------------------------------------------------- /1. webpack核心功能/1-3. 模块化兼容性/assets/2020-01-07-07-53-45.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/1. webpack核心功能/1-3. 模块化兼容性/assets/2020-01-07-07-53-45.png -------------------------------------------------------------------------------- /1. webpack核心功能/1-3. 模块化兼容性/assets/2020-01-07-07-54-25.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/1. webpack核心功能/1-3. 模块化兼容性/assets/2020-01-07-07-54-25.png -------------------------------------------------------------------------------- /1. webpack核心功能/1-3. 模块化兼容性/assets/2020-01-07-07-55-54.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/1. webpack核心功能/1-3. 模块化兼容性/assets/2020-01-07-07-55-54.png -------------------------------------------------------------------------------- /1. webpack核心功能/1-9. 入口和出口/assets/2020-01-09-15-51-07.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/1. webpack核心功能/1-9. 入口和出口/assets/2020-01-09-15-51-07.png -------------------------------------------------------------------------------- /3. css工程化/3-5. css module/assets/2020-01-31-13-54-37.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/3. css工程化/3-5. css module/assets/2020-01-31-13-54-37.png -------------------------------------------------------------------------------- /3. css工程化/3-5. css module/assets/2020-01-31-14-00-56.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/3. css工程化/3-5. css module/assets/2020-01-31-14-00-56.png -------------------------------------------------------------------------------- /3. css工程化/3-5. css module/assets/2020-01-31-14-04-11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/3. css工程化/3-5. css module/assets/2020-01-31-14-04-11.png -------------------------------------------------------------------------------- /3. css工程化/3-5. css module/assets/2020-01-31-14-08-49.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/3. css工程化/3-5. css module/assets/2020-01-31-14-08-49.png -------------------------------------------------------------------------------- /4. js兼容性/4-1. babel的安装和使用/assets/2020-02-07-10-12-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/4. js兼容性/4-1. babel的安装和使用/assets/2020-02-07-10-12-01.png -------------------------------------------------------------------------------- /4. js兼容性/4-1. babel的安装和使用/assets/2020-02-07-10-25-56.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/4. js兼容性/4-1. babel的安装和使用/assets/2020-02-07-10-25-56.png -------------------------------------------------------------------------------- /4. js兼容性/4-1. babel的安装和使用/assets/2020-02-07-10-27-30.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/4. js兼容性/4-1. babel的安装和使用/assets/2020-02-07-10-27-30.png -------------------------------------------------------------------------------- /1. webpack核心功能/1-16. 区分环境/webpack.base.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: "./src/index.js", 3 | output: { 4 | filename: "scripts/[name]-[hash:5].js" 5 | } 6 | } -------------------------------------------------------------------------------- /1. webpack核心功能/1-7. devtool配置/assets/2020-01-08-16-38-26.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/1. webpack核心功能/1-7. devtool配置/assets/2020-01-08-16-38-26.png -------------------------------------------------------------------------------- /1. webpack核心功能/1-7. devtool配置/assets/2020-01-08-16-58-06.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/1. webpack核心功能/1-7. devtool配置/assets/2020-01-08-16-58-06.png -------------------------------------------------------------------------------- /1. webpack核心功能/1-7. devtool配置/assets/2020-01-08-17-01-13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/1. webpack核心功能/1-7. devtool配置/assets/2020-01-08-17-01-13.png -------------------------------------------------------------------------------- /5. 性能优化/5-2. 减少模块解析/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | mode: "development", 3 | devtool: "source-map", 4 | module: { 5 | noParse: /test/ 6 | } 7 | } -------------------------------------------------------------------------------- /1. webpack核心功能/1-1. 如何在浏览器端实现模块化/assets/2020-01-07-05-06-11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/1. webpack核心功能/1-1. 如何在浏览器端实现模块化/assets/2020-01-07-05-06-11.png -------------------------------------------------------------------------------- /1. webpack核心功能/1-10. 入口和出口的最佳实践/assets/2020-01-10-12-00-28.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/1. webpack核心功能/1-10. 入口和出口的最佳实践/assets/2020-01-10-12-00-28.png -------------------------------------------------------------------------------- /1. webpack核心功能/1-10. 入口和出口的最佳实践/assets/2020-01-10-12-38-03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/1. webpack核心功能/1-10. 入口和出口的最佳实践/assets/2020-01-10-12-38-03.png -------------------------------------------------------------------------------- /1. webpack核心功能/1-10. 入口和出口的最佳实践/assets/2020-01-10-12-44-13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DuYi-Edu/DuYi-Webpack/HEAD/1. webpack核心功能/1-10. 入口和出口的最佳实践/assets/2020-01-10-12-44-13.png -------------------------------------------------------------------------------- /1. webpack核心功能/1-3. 模块化兼容性/src/es6a.js: -------------------------------------------------------------------------------- 1 | // export var a = 1; 2 | // export var b = 2; 3 | // export default 3; 4 | 5 | export default { 6 | a: 1, 7 | b: 2, 8 | c: 3 9 | } -------------------------------------------------------------------------------- /2. 常用扩展/2-4. 开发服务器/src/index.js: -------------------------------------------------------------------------------- 1 | const url = `/api/student/findAll?appkey=demo13_1545210570249`; 2 | fetch(url).then(resp => resp.json()).then(resp => { 3 | console.log(resp) 4 | }) -------------------------------------------------------------------------------- /3. css工程化/3-10. 抽离css文件/src/assets/index.css: -------------------------------------------------------------------------------- 1 | .main{ 2 | width: 500px; 3 | height: 300px; 4 | background: url("./img/china.jpg"); 5 | background-size: 100% 100%; 6 | } -------------------------------------------------------------------------------- /5. 性能优化/5-3. 优化loader性能/src/index.js: -------------------------------------------------------------------------------- 1 | import _ from "lodash"; 2 | 3 | const obj = { 4 | 0: "a", 5 | 1: "b" 6 | }; 7 | 8 | const result = _.isArray(obj); 9 | console.log(result); -------------------------------------------------------------------------------- /4. js兼容性/4-2. babel预设/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["@babel/preset-env", { 4 | "useBuiltIns": "usage", 5 | "corejs": 3 6 | }] 7 | ] 8 | } -------------------------------------------------------------------------------- /5. 性能优化/5-4. 热替换/src/index.js: -------------------------------------------------------------------------------- 1 | import a from "./a"; 2 | import "./index.css" 3 | console.log(a); 4 | 5 | if (module.hot) { 6 | // 是否开启了热更新 7 | module.hot.accept(); // 接受热更新 8 | } 9 | -------------------------------------------------------------------------------- /5. 性能优化/5-3. 优化loader性能/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["@babel/preset-env", { 4 | "useBuiltIns": "usage", 5 | "corejs": 3 6 | }] 7 | ] 8 | } -------------------------------------------------------------------------------- /3. css工程化/3-10. 抽离css文件/src/index.js: -------------------------------------------------------------------------------- 1 | import styles from "./assets/index.css"; 2 | 3 | var div = document.createElement("div"); 4 | div.className = styles.main; 5 | document.body.appendChild(div); -------------------------------------------------------------------------------- /4. js兼容性/4-4. 在webpack中使用babel/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["@babel/preset-env", { 4 | "useBuiltIns": "usage", 5 | "corejs": 3 6 | }] 7 | ] 8 | } -------------------------------------------------------------------------------- /5. 性能优化/5-12. gzip/src/index.js: -------------------------------------------------------------------------------- 1 | import $ from "jquery"; 2 | $(".red").click(async function() { 3 | const {chunk} = await import("./util") 4 | console.log(chunk([1, 3, 4, 67], 2)); 5 | }); 6 | -------------------------------------------------------------------------------- /5. 性能优化/5-6. 自动分包/src/page1.js: -------------------------------------------------------------------------------- 1 | import $ from "jquery" 2 | import _ from "lodash" 3 | import common from "./common" 4 | import "./common.css" 5 | import "./page1.css" 6 | 7 | console.log("page1") -------------------------------------------------------------------------------- /5. 性能优化/5-6. 自动分包/src/page2.js: -------------------------------------------------------------------------------- 1 | import $ from "jquery" 2 | import _ from "lodash" 3 | import common from "./common" 4 | import "./common.css" 5 | import "./page2.css" 6 | 7 | console.log("page2") -------------------------------------------------------------------------------- /1. webpack核心功能/1-13. [练习]处理图片/src/index.js: -------------------------------------------------------------------------------- 1 | var src = require("./assets/webpack.png") 2 | console.log(src); 3 | var img = document.createElement("img") 4 | img.src = src; 5 | document.body.appendChild(img); -------------------------------------------------------------------------------- /5. 性能优化/5-11. bundle analyzer/src/index.js: -------------------------------------------------------------------------------- 1 | import $ from "jquery"; 2 | $(".red").click(async function() { 3 | const {chunk} = await import("./util") 4 | console.log(chunk([1, 3, 4, 67], 2)); 5 | }); 6 | -------------------------------------------------------------------------------- /2. 常用扩展/2-5. 普通文件处理/src/index.js: -------------------------------------------------------------------------------- 1 | //希望导入的模块结果是一个可用的资源路径 2 | import png from "./assets/webpack.png" 3 | console.log(png) 4 | var img = document.createElement("img"); 5 | img.src = png; 6 | document.body.appendChild(img); -------------------------------------------------------------------------------- /2. 常用扩展/2-6. 解决路径问题/src/index.js: -------------------------------------------------------------------------------- 1 | //希望导入的模块结果是一个可用的资源路径 2 | import png from "./assets/webpack.png" 3 | console.log(png) 4 | var img = document.createElement("img"); 5 | img.src = png; 6 | document.body.appendChild(img); -------------------------------------------------------------------------------- /2. 常用扩展/2-7. webpack内置插件/src/index.js: -------------------------------------------------------------------------------- 1 | // console.log(PI); 2 | // console.log(VERSION); 3 | // console.log(DOMAIN); 4 | 5 | var r1 = $('#item'); // <= 起作用 6 | var r2 = _.drop([1, 2, 3], 2); // <= 起作用 7 | console.log(r1, r2); -------------------------------------------------------------------------------- /5. 性能优化/5-3. 优化loader性能/src/loader.js: -------------------------------------------------------------------------------- 1 | function loader(source){ 2 | return `new source` 3 | } 4 | 5 | loader.pitch = function(filePath){ 6 | // 可返回可不返回 7 | // 如果返回，返回源代码 8 | } 9 | 10 | module.exports = loader; -------------------------------------------------------------------------------- /1. webpack核心功能/1-14. plugin/webpack.config.js: -------------------------------------------------------------------------------- 1 | var MyPlugin = require("./plugins/MyPlugin") 2 | 3 | module.exports = { 4 | mode: "development", 5 | watch: true, 6 | plugins: [ 7 | new MyPlugin() 8 | ] 9 | } -------------------------------------------------------------------------------- /3. css工程化/3-2. 利用webpack拆分css/src/assets/banner.css: -------------------------------------------------------------------------------- 1 | @import "./pager.css"; 2 | 3 | .red { 4 | color: "#f40"; 5 | background: url("./bg.png"); 6 | width: 1000px; 7 | height: 1000px; 8 | border: 2px solid; 9 | } -------------------------------------------------------------------------------- /5. 性能优化/5-8. tree shaking/src/index.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background: #333; 3 | color: #fff; 4 | } 5 | 6 | h1{ 7 | font-size: 4em; 8 | } 9 | 10 | .red{ 11 | color: red; 12 | } 13 | 14 | .green{ 15 | color: green; 16 | } -------------------------------------------------------------------------------- /2. 常用扩展/2-8. [练习]区域查询/工程/webpack.prod.js: -------------------------------------------------------------------------------- 1 | //生产环境 2 | const { CleanWebpackPlugin } = require("clean-webpack-plugin") 3 | module.exports = { 4 | mode: "production", 5 | plugins: [ 6 | new CleanWebpackPlugin(), 7 | ] 8 | } -------------------------------------------------------------------------------- /4. js兼容性/4-4. 在webpack中使用babel/src/index.js: -------------------------------------------------------------------------------- 1 | const func = () => { 2 | console.log("abc"); 3 | } 4 | 5 | func(); 6 | 7 | new Promise(resolve => { 8 | resolve(); 9 | }) 10 | 11 | async function method(){ 12 | 13 | } -------------------------------------------------------------------------------- /1. webpack核心功能/1-9. 入口和出口/node/dirname.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | ./ : 4 | 1. 模块化代码中，比如require("./")，表示当前js文件所在的目录 5 | 2. 在路径处理中，"./"表示node运行目录 6 | 7 | __dirname: 所有情况下，都表示当前运行的js文件所在的目录，它是一个绝对路径 8 | 9 | */ 10 | 11 | console.log(__dirname) -------------------------------------------------------------------------------- /1. webpack核心功能/1-9. 入口和出口/node/sub/dirname.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | ./ : 4 | 1. 模块化代码中，比如require("./")，表示当前js文件所在的目录 5 | 2. 在路径处理中，"./"表示node运行目录 6 | 7 | __dirname: 所有情况下，都表示当前运行的js文件所在的目录，它是一个绝对路径 8 | 9 | */ 10 | 11 | console.log(__dirname) -------------------------------------------------------------------------------- /3. css工程化/3-5. css module/src/index.js: -------------------------------------------------------------------------------- 1 | import style1 from "./assets/style1.css" 2 | import style2 from "./assets/style2.css" 3 | 4 | console.log(style1) 5 | 6 | const div1 = document.getElementById("div1"); 7 | div1.className = style2.c1; -------------------------------------------------------------------------------- /1. webpack核心功能/1-9. 入口和出口/node/pathtest.js: -------------------------------------------------------------------------------- 1 | //该对象提供了大量路径处理的函数 2 | 3 | var path = require("path") //导出了一个对象 4 | 5 | // var result = path.resolve("./", "child", "abc", "123"); 6 | 7 | var result = path.resolve(__dirname, "src"); 8 | console.log(result); -------------------------------------------------------------------------------- /4. js兼容性/4-4. 在webpack中使用babel/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | mode: "development", 3 | devtool: "source-map", 4 | module: { 5 | rules: [ 6 | { test: /\.js$/, use: "babel-loader" } 7 | ] 8 | } 9 | } -------------------------------------------------------------------------------- /3. css工程化/3-8. PostCss/css/source copy 2.pcss: -------------------------------------------------------------------------------- 1 | .a { 2 | color: red; 3 | & .b { 4 | color: green; 5 | } 6 | 7 | & > .b { 8 | color: blue; 9 | } 10 | 11 | &:hover { 12 | color: #000; 13 | } 14 | } -------------------------------------------------------------------------------- /3. css工程化/3-6. 预编译器less/css/common.less: -------------------------------------------------------------------------------- 1 | @info: #333; 2 | @danger: #f40; 3 | @success: green; 4 | @warn: brown; 5 | 6 | .center(@type:absolute){ 7 | position: @type; 8 | left: 50%; 9 | top: 50%; 10 | transform: translate(-50%, -50%); 11 | } -------------------------------------------------------------------------------- /3. css工程化/3-9. 在webpack中使用postcss/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | map: false, //关闭source-map 3 | plugins: { 4 | "postcss-preset-env": { 5 | stage: 0, //哪怕是处于草案阶段的语法，也需要转换 6 | preserve: false 7 | } 8 | } 9 | } -------------------------------------------------------------------------------- /1. webpack核心功能/1-15. [练习]添加文件列表/webpack.config.js: -------------------------------------------------------------------------------- 1 | var FileListPlugin = require("./plugins/FileListPlugin") 2 | 3 | module.exports = { 4 | mode: "development", 5 | devtool: "source-map", 6 | plugins: [ 7 | new FileListPlugin("文件列表.md") 8 | ] 9 | } -------------------------------------------------------------------------------- /3. css工程化/3-8. PostCss/css/source copy 3.pcss: -------------------------------------------------------------------------------- 1 | :root { 2 | --center: { 3 | position: absolute; 4 | left: 50%; 5 | top: 50%; 6 | transform: translate(-50%, -50%); 7 | } 8 | } 9 | 10 | .item { 11 | @apply --center; 12 | } 13 | -------------------------------------------------------------------------------- /3. css工程化/3-4. css-in-js/scripts/css/common.js: -------------------------------------------------------------------------------- 1 | export const redBg = { 2 | backgroundColor: "#f40", 3 | color: "#fff", 4 | } 5 | 6 | export function border(width = 2, color = "#333") { 7 | return { 8 | border: `${width}px solid ${color}` 9 | } 10 | } -------------------------------------------------------------------------------- /3. css工程化/3-5. css module/src/assets/style1.css: -------------------------------------------------------------------------------- 1 | /* 处理banner的样式 */ 2 | 3 | :global(.main){ 4 | background: lightblue; 5 | } 6 | 7 | .c1 { 8 | color: red 9 | } 10 | 11 | .c2 { 12 | color: green 13 | } 14 | 15 | 16 | 17 | h1{ 18 | font-weight: bold; 19 | } -------------------------------------------------------------------------------- /1. webpack核心功能/1-12. [练习]处理样式/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | mode: "development", 3 | devtool: "source-map", 4 | module: { 5 | rules: [{ 6 | test: /\.css$/, 7 | use: ["./loaders/style-loader"] 8 | }] 9 | } 10 | } -------------------------------------------------------------------------------- /2. 常用扩展/2-8. [练习]区域查询/静态页面/css/detail.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | width: 500px; 3 | margin: 20px auto; 4 | line-height: 2; 5 | } 6 | 7 | .title{ 8 | font-size: 2em; 9 | font-weight: bold; 10 | } 11 | 12 | dt{ 13 | font-weight: bold; 14 | font-size: 1.3em; 15 | } -------------------------------------------------------------------------------- /2. 常用扩展/2-8. [练习]区域查询/工程/public/css/detail.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | width: 500px; 3 | margin: 20px auto; 4 | line-height: 2; 5 | } 6 | 7 | .title{ 8 | font-size: 2em; 9 | font-weight: bold; 10 | } 11 | 12 | dt{ 13 | font-weight: bold; 14 | font-size: 1.3em; 15 | } -------------------------------------------------------------------------------- /3. css工程化/3-6. 预编译器less/css/index copy 2.less: -------------------------------------------------------------------------------- 1 | @height: 60px; 2 | //less注释 3 | /* 4 | css注释 5 | */ 6 | .header{ 7 | @height: 56px; 8 | 9 | height: @height; 10 | 11 | .menu{ 12 | height: @height; 13 | } 14 | } 15 | 16 | .abc{ 17 | height: @height; 18 | } -------------------------------------------------------------------------------- /5. 性能优化/5-4. 热替换/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /5. 性能优化/5-5. 手动分包/dll/jquery.manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jquery", 3 | "content": { 4 | "./node_modules/jquery/dist/jquery.js": { 5 | "id": 1, 6 | "buildMeta": { 7 | "providedExports": true 8 | } 9 | } 10 | } 11 | } -------------------------------------------------------------------------------- /5. 性能优化/5-8. tree shaking/src/index.js: -------------------------------------------------------------------------------- 1 | import { add } from "./myMath"; 2 | import "./common"; 3 | import "./index.css"; 4 | 5 | const div = document.createElement("div"); 6 | div.innerText = "myDiv"; 7 | div.className = "red"; 8 | document.body.appendChild(div); 9 | console.log(add(1, 2)); 10 | -------------------------------------------------------------------------------- /5. 性能优化/5-10. ESLint/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es6": true 5 | }, 6 | "extends": "eslint:recommended", 7 | "parserOptions": { 8 | "ecmaVersion": 2018, 9 | "sourceType": "module" 10 | }, 11 | "rules": { 12 | "curly": "off" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /5. 性能优化/5-6. 自动分包/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /1. webpack核心功能/1-12. [练习]处理样式/loaders/style-loader.js: -------------------------------------------------------------------------------- 1 | module.exports = function (sourceCode) { 2 | var code = `var style = document.createElement("style"); 3 | style.innerHTML = \`${sourceCode}\`; 4 | document.head.appendChild(style); 5 | module.exports = \`${sourceCode}\``; 6 | return code; 7 | } -------------------------------------------------------------------------------- /5. 性能优化/5-9. 懒加载/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /1. webpack核心功能/1-14. plugin/plugins/MyPlugin.js: -------------------------------------------------------------------------------- 1 | module.exports = class MyPlugin { 2 | apply(compiler) { 3 | //在这里注册事件，类似于window.onload $(function(){}) 4 | compiler.hooks.done.tap("MyPlugin-done", function(compilation){ 5 | //事件处理函数 6 | console.log("编译完成"); 7 | }) 8 | } 9 | } -------------------------------------------------------------------------------- /5. 性能优化/5-5. 手动分包/dll/lodash.manifest.json: -------------------------------------------------------------------------------- 1 | {"name":"lodash","content":{"./node_modules/lodash/lodash.js":{"id":3,"buildMeta":{"providedExports":true}},"./node_modules/webpack/buildin/global.js":{"id":4,"buildMeta":{"providedExports":true}},"./node_modules/webpack/buildin/module.js":{"id":5,"buildMeta":{"providedExports":true}}}} -------------------------------------------------------------------------------- /3. css工程化/3-8. PostCss/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | map: false, //关闭source-map 3 | plugins: { 4 | "postcss-preset-env": { 5 | stage: 0, //哪怕是处于草案阶段的语法，也需要转换 6 | preserve: false 7 | }, 8 | "postcss-apply": {}, 9 | "postcss-color-function": {} 10 | } 11 | } -------------------------------------------------------------------------------- /5. 性能优化/5-12. gzip/课件.md: -------------------------------------------------------------------------------- 1 | # gzip {ignore} 2 | 3 | gzip是一种压缩文件的算法 4 | 5 | # B/S结构中的压缩传输 6 | 7 | ![](assets/2020-02-28-15-37-26.png) 8 | 9 | 优点：传输效率可能得到大幅提升 10 | 11 | 缺点：服务器的压缩需要时间，客户端的解压需要时间 12 | 13 | # 使用webpack进行预压缩 14 | 15 | 使用`compression-webpack-plugin`插件对打包结果进行预压缩，可以移除服务器的压缩时间 16 | 17 | ![](assets/2020-02-28-15-41-44.png) -------------------------------------------------------------------------------- /5. 性能优化/5-8. tree shaking/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

10 | Lorem ipsum dolor sit. 11 |

12 | 13 | -------------------------------------------------------------------------------- /2. 常用扩展/2-1. 清除输出目录/webpack.config.js: -------------------------------------------------------------------------------- 1 | var { CleanWebpackPlugin } = require("clean-webpack-plugin") 2 | 3 | module.exports = { 4 | mode: "development", 5 | devtool: "source-map", 6 | output: { 7 | filename: "[name].[chunkhash:5].js" 8 | }, 9 | plugins: [ 10 | new CleanWebpackPlugin() 11 | ] 12 | } -------------------------------------------------------------------------------- /1. webpack核心功能/1-1. 如何在浏览器端实现模块化/modules/index.js: -------------------------------------------------------------------------------- 1 | // import a from "./a.js" 2 | 3 | // console.log("index") 4 | var fs = require("fs"); //内置模块fs，文件处理var path = require("path"); 5 | var abPath = path.resolve(__dirname, "./test.txt"); 6 | 7 | var content = fs.readFileSync(abPath, { 8 | encoding: "utf-8" 9 | }) 10 | 11 | console.log(content); -------------------------------------------------------------------------------- /3. css工程化/3-10. 抽离css文件/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /3. css工程化/3-6. 预编译器less/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "less-test", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "less": "^3.10.3" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /1. webpack核心功能/1-1. 如何在浏览器端实现模块化/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "chapter1", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "jquery": "^3.4.1" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /6. 补充和案例/6-1. [扩展]不确定的动态依赖/src/utils/index.js: -------------------------------------------------------------------------------- 1 | // 导出当前目录中所有的模块 2 | 3 | const context = require.context("./", true, /\.js$/); 4 | for (const key of context.keys()) { 5 | if (key !== "./index.js") { 6 | let filename = key.substr(2); 7 | filename = filename.substr(0, filename.length - 3); 8 | exports[filename] = context(key); 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /3. css工程化/3-9. 在webpack中使用postcss/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /4. js兼容性/4-6. [扩展]async和await的转换/source.js: -------------------------------------------------------------------------------- 1 | function A() { 2 | return new Promise(resolve => { 3 | setTimeout(() => { 4 | resolve(3); 5 | }, 1000); 6 | }) 7 | } 8 | 9 | async function B() { 10 | const b = await A(); 11 | const c = await A(); 12 | return b + c; 13 | } 14 | 15 | 16 | B().then(data => console.log(data)); -------------------------------------------------------------------------------- /5. 性能优化/5-9. 懒加载/webpack.config.js: -------------------------------------------------------------------------------- 1 | const HtmlWebpackPlugin = require("html-webpack-plugin"); 2 | const { CleanWebpackPlugin } = require("clean-webpack-plugin"); 3 | 4 | module.exports = { 5 | mode: "production", 6 | plugins: [ 7 | new HtmlWebpackPlugin({ 8 | template: "./public/index.html" 9 | }), 10 | new CleanWebpackPlugin() 11 | ] 12 | }; 13 | -------------------------------------------------------------------------------- /2. 常用扩展/2-8. [练习]区域查询/工程/webpack.dev.js: -------------------------------------------------------------------------------- 1 | //开发环境 2 | 3 | module.exports = { 4 | mode: "development", 5 | devServer: { 6 | open: true, 7 | openPage: "list.html", 8 | proxy: { 9 | "/api": { 10 | target: "http://yuanjin.tech:5100/", 11 | changeOrigin: true 12 | } 13 | } 14 | } 15 | } -------------------------------------------------------------------------------- /3. css工程化/3-2. 利用webpack拆分css/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | mode: "development", 3 | devtool: "source-map", 4 | watch: true, 5 | module: { 6 | rules: [ 7 | { test: /\.css$/, use: ["style-loader", "css-loader"] }, 8 | { 9 | test: /\.png$/, use: "file-loader" 10 | } 11 | ] 12 | } 13 | } -------------------------------------------------------------------------------- /5. 性能优化/5-10. ESLint/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "5-10.-eslint", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "dependencies": {}, 7 | "devDependencies": { 8 | "eslint": "^6.8.0" 9 | }, 10 | "scripts": { 11 | "test": "echo \"Error: no test specified\" && exit 1" 12 | }, 13 | "author": "", 14 | "license": "ISC" 15 | } 16 | -------------------------------------------------------------------------------- /1. webpack核心功能/1-12. [练习]处理样式/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /1. webpack核心功能/1-13. [练习]处理图片/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /1. webpack核心功能/1-5. 编译结果分析/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /1. webpack核心功能/1-7. devtool配置/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /1. webpack核心功能/1-9. 入口和出口/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "webpack": "^4.41.5", 13 | "webpack-cli": "^3.3.10" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /4. js兼容性/4-1. babel的安装和使用/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "@babel/cli": "^7.8.4", 13 | "@babel/core": "^7.8.4" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /5. 性能优化/5-5. 手动分包/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /6. 补充和案例/6-1. [扩展]不确定的动态依赖/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "webpack": "^4.43.0", 13 | "webpack-cli": "^3.3.11" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /1. webpack核心功能/1-14. plugin/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "webpack": "^4.41.5", 13 | "webpack-cli": "^3.3.10" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /1. webpack核心功能/1-15. [练习]添加文件列表/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "webpack": "^4.41.5", 13 | "webpack-cli": "^3.3.10" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /1. webpack核心功能/1-2. webpack的安装和使用/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /1. webpack核心功能/1-7. devtool配置/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "webpack": "^4.41.5", 13 | "webpack-cli": "^3.3.10" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /1. webpack核心功能/1-11. loader/loaders/test-loader.js: -------------------------------------------------------------------------------- 1 | var loaderUtils = require("loader-utils") 2 | 3 | module.exports = function(sourceCode){ 4 | //sourceCode : 变量 a = 1; 5 | console.log("test-loader运行了") 6 | var options = loaderUtils.getOptions(this) 7 | console.log(options) 8 | var reg = new RegExp(options.changeVar, "g"); 9 | return sourceCode.replace(reg, "var"); 10 | } -------------------------------------------------------------------------------- /1. webpack核心功能/1-4. [练习]酷炫的数字查找特效/src/util/radColor.js: -------------------------------------------------------------------------------- 1 | var colors = ["#f26395", "#62efab", "#ef7658", "#ffe868", "#80e3f7", "#d781f9"]; 2 | export function getRandom(min, max) { 3 | return Math.floor(Math.random() * (max - min) + min); 4 | } 5 | /** 6 | * 返回一个随机的颜色 7 | */ 8 | export default function () { 9 | var index = getRandom(0, colors.length); 10 | return colors[index]; 11 | } -------------------------------------------------------------------------------- /1. webpack核心功能/1-8. 编译过程/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "webpack.config.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "webpack": "^4.41.5", 13 | "webpack-cli": "^3.3.10" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /2. 常用扩展/2-8. [练习]区域查询/工程/src/util/areaService.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 得到所有的省份 3 | */ 4 | export async function getProvinces() { 5 | return await fetch("/api/local").then(resp => resp.json()) 6 | } 7 | 8 | /** 9 | * 根据省份id得到所有的城市 10 | */ 11 | export async function getCities(parentId) { 12 | const url = `/api/local?parentId=${parentId}`; 13 | return await fetch(url).then(resp => resp.json()) 14 | } -------------------------------------------------------------------------------- /1. webpack核心功能/1-1. 如何在浏览器端实现模块化/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /2. 常用扩展/2-8. [练习]区域查询/工程/src/detail/index.js: -------------------------------------------------------------------------------- 1 | import { getCities } from "@/util/areaService" 2 | import qs from "query-string" 3 | import $ from "jquery" 4 | 5 | const parsed = qs.parse(location.search); 6 | 7 | $(".title").text(parsed.name) 8 | const dl = $("dl"); 9 | 10 | getCities(parsed.id).then(cs=>{ 11 | for(const c of cs){ 12 | $("
").text(c.simpleName).appendTo(dl) 13 | } 14 | }) -------------------------------------------------------------------------------- /5. 性能优化/5-2. 减少模块解析/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "jquery": "^3.4.1", 13 | "webpack": "^4.41.6", 14 | "webpack-cli": "^3.3.11" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /1. webpack核心功能/1-16. 区分环境/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "webpack", 8 | "prod": "webpack --env.prod" 9 | }, 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "webpack": "^4.41.5", 14 | "webpack-cli": "^3.3.10" 15 | } 16 | } -------------------------------------------------------------------------------- /2. 常用扩展/2-7. webpack内置插件/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "author": "", 6 | "license": "ISC", 7 | "devDependencies": { 8 | "webpack": "^4.41.5", 9 | "webpack-cli": "^3.3.10" 10 | }, 11 | "description": "", 12 | "dependencies": { 13 | "jquery": "^3.4.1", 14 | "lodash": "^4.17.15" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /1. webpack核心功能/1-11. loader/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "loader-utils": "^1.2.3", 13 | "webpack": "^4.41.5", 14 | "webpack-cli": "^3.3.10" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /1. webpack核心功能/1-12. [练习]处理样式/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "loader-utils": "^1.2.3", 13 | "webpack": "^4.41.5", 14 | "webpack-cli": "^3.3.10" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /1. webpack核心功能/1-13. [练习]处理图片/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "loader-utils": "^1.2.3", 13 | "webpack": "^4.41.5", 14 | "webpack-cli": "^3.3.10" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /2. 常用扩展/2-1. 清除输出目录/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "clean-webpack-plugin": "^3.0.0", 13 | "webpack": "^4.41.5", 14 | "webpack-cli": "^3.3.10" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /3. css工程化/3-7. 在webpack中使用less/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 | Lorem ipsum dolor sit amet. 12 |
13 | 14 | -------------------------------------------------------------------------------- /1. webpack核心功能/1-4. [练习]酷炫的数字查找特效/src/util/isPrime.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 判断n是否是素数 3 | * 素数：仅能被1和自身整除 4 | * 6 2，5 5 | * @param {*} n 6 | */ 7 | export default function (n) { 8 | if (n < 2) { 9 | return false; 10 | } 11 | for (let i = 2; i <= n - 1; i++) { 12 | if (n % i === 0) { 13 | //发现，2到n-1之间，有一个数能整除n 14 | return false; 15 | } 16 | } 17 | return true; 18 | } -------------------------------------------------------------------------------- /3. css工程化/3-8. PostCss/css/source copy.pcss: -------------------------------------------------------------------------------- 1 | @custom-selector :--heading h1, h2, h3, h4, h5, h6; 2 | @custom-selector :--enter :focus,:hover; 3 | 4 | /* a:focus,a:hover */ 5 | a:--enter{ 6 | color: #f40; 7 | } 8 | 9 | /* h1,h2,h3,h4,h5,h6 */ 10 | :--heading{ 11 | font-weight:bold; 12 | } 13 | 14 | /* h1.active,h2.active,h3.active,h4.active,h5.active,h6.active */ 15 | :--heading.active{ 16 | font-weight:bold; 17 | } -------------------------------------------------------------------------------- /4. js兼容性/4-6. [扩展]async和await的转换/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "source.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "core-js": "^2.0.0", 13 | "regenerator-runtime": "^0.13.3" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /5. 性能优化/5-11. bundle analyzer/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { CleanWebpackPlugin } = require("clean-webpack-plugin"); 2 | const WebpackBundleAnalyzer = require("webpack-bundle-analyzer") 3 | .BundleAnalyzerPlugin; 4 | 5 | module.exports = { 6 | mode: "production", 7 | optimization: { 8 | splitChunks: { 9 | chunks: "all" 10 | } 11 | }, 12 | plugins: [new CleanWebpackPlugin(), new WebpackBundleAnalyzer()] 13 | }; 14 | -------------------------------------------------------------------------------- /1. webpack核心功能/1-9. 入口和出口/课件.md: -------------------------------------------------------------------------------- 1 | # 入口和出口 2 | 3 | ![](assets/2020-01-09-15-51-07.png) 4 | 5 | > node内置模块 - path: https://nodejs.org/dist/latest-v12.x/docs/api/path.html 6 | 7 | **出口** 8 | 9 | 这里的出口是针对资源列表的文件名或路径的配置 10 | 11 | 出口通过output进行配置 12 | 13 | **入口** 14 | 15 | **入口真正配置的是chunk** 16 | 17 | 入口通过entry进行配置 18 | 19 | 规则： 20 | 21 | - name：chunkname 22 | - hash: 总的资源hash，通常用于解决缓存问题 23 | - chunkhash: 使用chunkhash 24 | - id: 使用chunkid，不推荐 -------------------------------------------------------------------------------- /2. 常用扩展/2-8. [练习]区域查询/工程/src/list/index.js: -------------------------------------------------------------------------------- 1 | import { getProvinces } from "@/util/areaService" 2 | import $ from "jquery" 3 | 4 | getProvinces().then(ps => { 5 | //ps：省份的数组 6 | const ul = $(".provinces"); 7 | for (const p of ps) { 8 | const li = $("
  • ").appendTo(ul); 9 | const a = $("").text(p.simpleName).appendTo(li); 10 | a.prop("href", `detail.html?name=${p.areaName}&id=${p.id}`) 11 | } 12 | }); -------------------------------------------------------------------------------- /1. webpack核心功能/1-6. 配置文件/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "author": "", 7 | "license": "ISC", 8 | "scripts": { 9 | "dev": "webpack --mode=development", 10 | "build": "webpack --mode=production" 11 | }, 12 | "devDependencies": { 13 | "webpack": "^4.41.5", 14 | "webpack-cli": "^3.3.10" 15 | } 16 | } -------------------------------------------------------------------------------- /3. css工程化/3-4. css-in-js/scripts/index.js: -------------------------------------------------------------------------------- 1 | import { applyStyles } from "./css/util.js" 2 | import { border, redBg } from "./css/common.js" 3 | const div1 = document.getElementById("div1"); 4 | const div2 = document.getElementById("div2"); 5 | 6 | const styles = { 7 | width: "400px", 8 | height: "500px", 9 | margin: "0 auto" 10 | } 11 | 12 | applyStyles(div1, styles, border(), redBg) 13 | applyStyles(div2, styles, border(5, "green")) -------------------------------------------------------------------------------- /5. 性能优化/5-9. 懒加载/src/index.js: -------------------------------------------------------------------------------- 1 | const btn = document.querySelector("button"); 2 | btn.onclick = async function() { 3 | //动态加载 4 | //import 是ES6的草案 5 | //浏览器会使用JSOP的方式远程去读取一个js模块 6 | //import()会返回一个promise （* as obj） 7 | // const { chunk } = await import(/* webpackChunkName:"lodash" */"lodash-es"); 8 | const { chunk } = await import("./util"); 9 | const result = chunk([3, 5, 6, 7, 87], 2); 10 | console.log(result); 11 | }; 12 | -------------------------------------------------------------------------------- /1. webpack核心功能/1-17. 其他细节配置/webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require("path") 2 | module.exports = { 3 | mode: "development", 4 | devtool: "source-map", 5 | entry: { 6 | index: "./src/index.js" 7 | }, 8 | // externals: { 9 | // jquery: "$", 10 | // lodash: "_" 11 | // }, 12 | stats: { 13 | colors: true, 14 | modules: false, 15 | hash: false, 16 | builtAt: false 17 | } 18 | } -------------------------------------------------------------------------------- /1. webpack核心功能/1-9. 入口和出口/target/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /3. css工程化/3-4. css-in-js/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
    11 |
    12 | 13 | 14 | -------------------------------------------------------------------------------- /5. 性能优化/5-9. 懒加载/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "webpack" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "clean-webpack-plugin": "^3.0.0", 13 | "html-webpack-plugin": "^3.2.0", 14 | "lodash-es": "^4.17.15", 15 | "webpack": "^4.41.6", 16 | "webpack-cli": "^3.3.11" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /1. webpack核心功能/1-3. 模块化兼容性/src/index.js: -------------------------------------------------------------------------------- 1 | // var obj = require("./es6a") 2 | // console.log(obj.a, obj.b, obj.default) 3 | 4 | // import * as obj from "./commonjsa" 5 | // import obj from "./commonjsa" 6 | 7 | // console.log(obj) 8 | 9 | //jquery 10 | //module.exports = function(){} 11 | 12 | // var $ = require("jquery") 13 | // console.log($) 14 | 15 | // import $ from "jquery" 16 | // console.log($); 17 | 18 | var obj = require("./es6a") 19 | console.log(obj) -------------------------------------------------------------------------------- /2. 常用扩展/2-2. 自动生成页面/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "clean-webpack-plugin": "^3.0.0", 13 | "html-webpack-plugin": "^3.2.0", 14 | "webpack": "^4.41.5", 15 | "webpack-cli": "^3.3.10" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /3. css工程化/3-6. 预编译器less/css/index copy.less: -------------------------------------------------------------------------------- 1 | @primary: blue; 2 | 3 | .size(){ 4 | height: 100px; 5 | margin: 10px 0; 6 | } 7 | 8 | .s1 { 9 | background: @primary; 10 | color: #fff; 11 | .size(); 12 | } 13 | 14 | //背景颜色在主颜色基础上加深 15 | .s2 { 16 | background: darken(@primary, 10%); 17 | color: #fff; 18 | .size(); 19 | } 20 | 21 | //背景颜色在主颜色基础上加深 22 | .s3 { 23 | background: darken(@primary, 20%); 24 | color: #fff; 25 | .size(); 26 | } -------------------------------------------------------------------------------- /1. webpack核心功能/1-3. 模块化兼容性/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "webpack --mode=production", 8 | "dev": "webpack --mode=development" 9 | }, 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "webpack": "^4.41.5", 14 | "webpack-cli": "^3.3.10" 15 | }, 16 | "dependencies": { 17 | "jquery": "^3.4.1" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /2. 常用扩展/2-4. 开发服务器/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "webpack-dev-server" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "clean-webpack-plugin": "^3.0.0", 13 | "html-webpack-plugin": "^3.2.0", 14 | "webpack": "^4.41.5", 15 | "webpack-cli": "^3.3.10", 16 | "webpack-dev-server": "^3.10.1" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /1. webpack核心功能/1-16. 区分环境/webpack.config.js: -------------------------------------------------------------------------------- 1 | var baseConfig = require("./webpack.base") 2 | var devConfig = require("./webpack.dev") 3 | var proConfig = require("./webpack.pro") 4 | 5 | module.exports = function (env) { 6 | if (env && env.prod) { 7 | return { 8 | ...baseConfig, 9 | ...proConfig 10 | } 11 | } 12 | else { 13 | return { 14 | ...baseConfig, 15 | ...devConfig 16 | } 17 | } 18 | } -------------------------------------------------------------------------------- /3. css工程化/3-5. css module/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
    11 | asdfasdfasf 12 |
    13 |
    14 | Lorem ipsum dolor sit. 15 |
    16 | 17 | -------------------------------------------------------------------------------- /5. 性能优化/5-12. gzip/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { CleanWebpackPlugin } = require("clean-webpack-plugin"); 2 | const CmpressionWebpackPlugin = require("compression-webpack-plugin") 3 | module.exports = { 4 | mode: "production", 5 | optimization: { 6 | splitChunks: { 7 | chunks: "all" 8 | } 9 | }, 10 | plugins: [ 11 | new CleanWebpackPlugin(), 12 | new CmpressionWebpackPlugin({ 13 | test: /\.js/, 14 | minRatio: 0.5 15 | }) 16 | ] 17 | }; 18 | -------------------------------------------------------------------------------- /5. 性能优化/5-2. 减少模块解析/课件.md: -------------------------------------------------------------------------------- 1 | # 减少模块解析 {ignore} 2 | 3 | ## 什么叫做模块解析？ 4 | 5 | ![](assets/2020-02-13-16-26-41.png) 6 | 7 | 模块解析包括：抽象语法树分析、依赖分析、模块语法替换 8 | 9 | ## 不做模块解析会怎样？ 10 | 11 | ![](assets/2020-02-13-16-28-10.png) 12 | 13 | 如果某个模块不做解析，该模块经过loader处理后的代码就是最终代码。 14 | 15 | 如果没有loader对该模块进行处理，该模块的源码就是最终打包结果的代码。 16 | 17 | 如果不对某个模块进行解析，可以缩短构建时间 18 | 19 | ## 哪些模块不需要解析？ 20 | 21 | 模块中无其他依赖：一些已经打包好的第三方库，比如jquery 22 | 23 | ## 如何让某个模块不要解析？ 24 | 25 | 配置`module.noParse`，它是一个正则，被正则匹配到的模块不会解析 -------------------------------------------------------------------------------- /5. 性能优化/5-4. 热替换/webpack.config.js: -------------------------------------------------------------------------------- 1 | const HtmlWebpackPlugin = require("html-webpack-plugin"); 2 | 3 | module.exports = { 4 | mode: "development", 5 | devtool: "source-map", 6 | devServer: { 7 | open: true, 8 | hot: true 9 | }, 10 | module:{ 11 | rules:[ 12 | {test:/\.css$/, use:["style-loader", "css-loader"]} 13 | ] 14 | }, 15 | plugins: [ 16 | new HtmlWebpackPlugin({ 17 | template: "./public/index.html" 18 | }) 19 | ] 20 | }; 21 | -------------------------------------------------------------------------------- /1. webpack核心功能/1-17. 其他细节配置/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "webpack.config.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "webpack": "^4.41.5", 13 | "webpack-cli": "^3.3.10" 14 | }, 15 | "dependencies": { 16 | "jquery": "^3.4.1", 17 | "lodash": "^4.17.15" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /1. webpack核心功能/1-9. 入口和出口/webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require("path") 2 | 3 | module.exports = { 4 | mode: "production", 5 | entry: { 6 | main: "./src/index.js", //属性名：chunk的名称， 属性值：入口模块（启动模块） 7 | a: ["./src/a.js", "./src/index.js"] //启动模块有两个 8 | }, 9 | output: { 10 | path: path.resolve(__dirname, "target"), //必须配置一个绝对路径，表示资源放置的文件夹，默认是dist 11 | filename: "[id].[chunkhash:5].js" //配置的合并的js文件的规则 12 | }, 13 | devtool: "source-map" 14 | } -------------------------------------------------------------------------------- /4. js兼容性/4-3. babel插件/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["@babel/preset-env", { 4 | "useBuiltIns": "usage", 5 | "corejs": 3 6 | }] 7 | ], 8 | "plugins": [ 9 | ["@babel/proposal-class-properties", { 10 | "loose": true 11 | }], 12 | "@babel/proposal-function-bind", 13 | "@babel/proposal-optional-chaining", 14 | "transform-remove-console", 15 | "@babel/transform-runtime" 16 | ] 17 | } -------------------------------------------------------------------------------- /1. webpack核心功能/1-3. 模块化兼容性/课件.md: -------------------------------------------------------------------------------- 1 | # 模块化兼容性 2 | 3 | 由于webpack同时支持CommonJS和ES6 module，因此需要理解它们互操作时webpack是如何处理的 4 | 5 | ## 同模块化标准 6 | 7 | 如果导出和导入使用的是同一种模块化标准，打包后的效果和之前学习的模块化没有任何差异 8 | 9 | ![](assets/2020-01-07-07-50-09.png) 10 | 11 | ![](assets/2020-01-07-07-53-45.png) 12 | 13 | ## 不同模块化标准 14 | 15 | 不同的模块化标准，webpack按照如下的方式处理 16 | 17 | ![](assets/2020-01-07-07-54-25.png) 18 | 19 | ![](assets/2020-01-07-07-55-54.png) 20 | 21 | ## 最佳实践 22 | 23 | 代码编写最忌讳的是精神分裂，选择一个合适的模块化标准，然后贯彻整个开发阶段。 24 | 25 | -------------------------------------------------------------------------------- /2. 常用扩展/2-5. 普通文件处理/课件.md: -------------------------------------------------------------------------------- 1 | file-loader: 生成依赖的文件到输出目录，然后将模块文件设置为：导出一个路径\ 2 | 3 | ```js 4 | //file-loader 5 | function loader(source){ 6 | // source：文件内容（图片内容 buffer） 7 | // 1. 生成一个具有相同文件内容的文件到输出目录 8 | // 2. 返回一段代码 export default "文件名" 9 | } 10 | ``` 11 | 12 | url-loader：将依赖的文件转换为：导出一个base64格式的字符串 13 | 14 | 15 | ```js 16 | //file-loader 17 | function loader(source){ 18 | // source：文件内容（图片内容 buffer） 19 | // 1. 根据buffer生成一个base64编码 20 | // 2. 返回一段代码 export default "base64编码" 21 | } 22 | ``` -------------------------------------------------------------------------------- /5. 性能优化/5-12. gzip/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "webpack" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "clean-webpack-plugin": "^3.0.0", 13 | "compression-webpack-plugin": "^3.1.0", 14 | "jquery": "^3.4.1", 15 | "lodash-es": "^4.17.15", 16 | "webpack": "^4.41.6", 17 | "webpack-cli": "^3.3.11" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /1. webpack核心功能/1-1. 如何在浏览器端实现模块化/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "chapter1", 3 | "version": "1.0.0", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "jquery": { 8 | "version": "3.4.1", 9 | "resolved": "https://registry.npm.taobao.org/jquery/download/jquery-3.4.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjquery%2Fdownload%2Fjquery-3.4.1.tgz", 10 | "integrity": "sha1-cU8fjZ3eS9+lV2S6N+8hRjDYDvI=" 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /2. 常用扩展/2-3. 复制静态资源/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "clean-webpack-plugin": "^3.0.0", 13 | "copy-webpack-plugin": "^5.1.1", 14 | "html-webpack-plugin": "^3.2.0", 15 | "webpack": "^4.41.5", 16 | "webpack-cli": "^3.3.10" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /4. js兼容性/4-2. babel预设/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "babel js -d dist -w" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "@babel/cli": "^7.8.4", 13 | "@babel/core": "^7.8.4", 14 | "@babel/preset-env": "^7.8.4" 15 | }, 16 | "dependencies": { 17 | "core-js": "^3.6.4", 18 | "regenerator-runtime": "^0.13.3" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /4. js兼容性/4-5. [扩展]对类的转换/source.js: -------------------------------------------------------------------------------- 1 | class A { 2 | prop1 = 1; 3 | 4 | method2 = (...args) => { 5 | console.log(args); 6 | } 7 | 8 | constructor(b = 2) { 9 | this.prop2 = b; 10 | } 11 | 12 | method1() { 13 | console.log("method1"); 14 | } 15 | 16 | 17 | 18 | static method3() { 19 | console.log("method3", this); 20 | } 21 | 22 | static method4 = () => { 23 | console.log("method4", this); 24 | } 25 | } 26 | 27 | -------------------------------------------------------------------------------- /5. 性能优化/5-4. 热替换/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "webpack-dev-server" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "css-loader": "^3.4.2", 13 | "html-webpack-plugin": "^3.2.0", 14 | "style-loader": "^1.1.3", 15 | "webpack": "^4.41.6", 16 | "webpack-cli": "^3.3.11", 17 | "webpack-dev-server": "^3.10.3" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /5. 性能优化/5-3. 优化loader性能/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | mode: "development", 3 | devtool: "source-map", 4 | module: { 5 | rules: [ 6 | { 7 | test: /\.js$/, 8 | use: [ 9 | // { 10 | // loader: "cache-loader", 11 | // options:{ 12 | // cacheDirectory: "./cache" 13 | // } 14 | // }, 15 | "thread-loader", 16 | "babel-loader" 17 | ] 18 | } 19 | ] 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /5. 性能优化/5-5. 手动分包/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "dev": "webpack", 7 | "dll": "webpack --config webpack.dll.config.js" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "clean-webpack-plugin": "^3.0.0", 13 | "html-webpack-plugin": "^3.2.0", 14 | "jquery": "^3.4.1", 15 | "lodash": "^4.17.15", 16 | "webpack": "^4.41.6", 17 | "webpack-cli": "^3.3.11" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /1. webpack核心功能/1-2. webpack的安装和使用/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "webpack --mode=production", 8 | "dev": "webpack --mode=development" 9 | }, 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "webpack": "^4.41.5", 14 | "webpack-cli": "^3.3.10" 15 | }, 16 | "dependencies": { 17 | "jquery": "^3.4.1" 18 | } 19 | } -------------------------------------------------------------------------------- /1. webpack核心功能/1-5. 编译结果分析/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "webpack --mode=development", 8 | "build": "webpack --mode=production" 9 | }, 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "webpack": "^4.41.5", 14 | "webpack-cli": "^3.3.10" 15 | }, 16 | "dependencies": { 17 | "jquery": "^3.4.1" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /3. css工程化/3-4. css-in-js/scripts/css/util.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 给某个dom元素应用一个样式 3 | * @param {*} dom dom元素 4 | * @param {*} styles 样式对象 5 | */ 6 | export function applyStyles(dom, ...styles) { 7 | let targetStyles = {}; //最终合并的样式对象 8 | for (const style of styles) { 9 | targetStyles = { 10 | ...targetStyles, 11 | ...style 12 | } 13 | } 14 | 15 | for (const key in targetStyles) { 16 | const value = targetStyles[key]; 17 | dom.style[key] = value; 18 | } 19 | } -------------------------------------------------------------------------------- /1. webpack核心功能/1-4. [练习]酷炫的数字查找特效/src/page/event.js: -------------------------------------------------------------------------------- 1 | import NumberTimer from "../util/number" 2 | import appendNumber from "./appendNumber" 3 | var n = new NumberTimer(100); 4 | n.onNumberCreated = function (n, isPrime) { 5 | appendNumber(n, isPrime); 6 | } 7 | 8 | //该模块用于注册事件 9 | var isStart = false; //默认没有开始 10 | 11 | window.onclick = function () { 12 | if (isStart) { 13 | n.stop(); 14 | isStart = false; 15 | } 16 | else { 17 | n.start(); 18 | isStart = true; 19 | } 20 | } -------------------------------------------------------------------------------- /1. webpack核心功能/1-6. 配置文件/课件.md: -------------------------------------------------------------------------------- 1 | # 配置文件 2 | 3 | webpack提供的cli支持很多的参数，例如```--mode```，但更多的时候，我们会使用更加灵活的配置文件来控制webpack的行为 4 | 5 | 默认情况下，webpack会读取```webpack.config.js```文件作为配置文件，但也可以通过CLI参数```--config```来指定某个配置文件 6 | 7 | 配置文件中通过CommonJS模块导出一个对象，对象中的各种属性对应不同的webpack配置 8 | 9 | **注意：配置文件中的代码，必须是有效的node代码** 10 | 11 | 当命令行参数与配置文件中的配置出现冲突时，以命令行参数为准。 12 | 13 | **基本配置：** 14 | 15 | 1. mode：编译模式，字符串，取值为development或production，指定编译结果代码运行的环境，会影响webpack对编译结果代码格式的处理 16 | 2. entry：入口，字符串（后续会详细讲解），指定入口文件 17 | 3. output：出口，对象（后续会详细讲解），指定编译结果文件 -------------------------------------------------------------------------------- /2. 常用扩展/2-6. 解决路径问题/课件.md: -------------------------------------------------------------------------------- 1 | # 解决路径问题 2 | 3 | 在使用file-loader或url-loader时，可能会遇到一个非常有趣的问题 4 | 5 | 比如，通过webpack打包的目录结构如下： 6 | 7 | ```yaml 8 | dist 9 | |—— img 10 | |—— a.png #file-loader生成的文件 11 | |—— scripts 12 | |—— main.js #export default "img/a.png" 13 | |—— html 14 | |—— index.html # 15 | ``` 16 | 17 | 这种问题发生的根本原因：模块中的路径来自于某个loader或plugin，当产生路径时，loader或plugin只有相对于dist目录的路径，并不知道该路径将在哪个资源中使用，从而无法确定最终正确的路径 18 | 19 | 面对这种情况，需要依靠webpack的配置publicPath解决 -------------------------------------------------------------------------------- /5. 性能优化/5-5. 手动分包/webpack.dll.config.js: -------------------------------------------------------------------------------- 1 | const webpack = require("webpack"); 2 | const path = require("path"); 3 | 4 | module.exports = { 5 | mode: "production", 6 | entry: { 7 | jquery: ["jquery"], 8 | lodash: ["lodash"] 9 | }, 10 | output: { 11 | filename: "dll/[name].js", 12 | library: "[name]" // 每个bundle暴露的全局变量名 13 | }, 14 | plugins: [ 15 | new webpack.DllPlugin({ 16 | path: path.resolve(__dirname, "dll", "[name].manifest.json"), 17 | name: "[name]" 18 | }) 19 | ] 20 | }; 21 | -------------------------------------------------------------------------------- /1. webpack核心功能/1-11. loader/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | mode: "development", 3 | module: { 4 | rules: [ 5 | { 6 | test: /index\.js$/, //正则表达式，匹配模块的路径 7 | use: ["./loaders/loader1", "./loaders/loader2"] //匹配到了之后，使用哪些加载器 8 | }, //规则1 9 | { 10 | test: /\.js$/, //正则表达式，匹配模块的路径 11 | use: ["./loaders/loader3", "./loaders/loader4"] //匹配到了之后，使用哪些加载器 12 | } //规则2 13 | ], //模块的匹配规则 14 | } 15 | } -------------------------------------------------------------------------------- /1. webpack核心功能/1-4. [练习]酷炫的数字查找特效/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "webpack --mode=development --watch", 8 | "build": "webpack --mode=production" 9 | }, 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "webpack": "^4.41.5", 14 | "webpack-cli": "^3.3.10" 15 | }, 16 | "dependencies": { 17 | "jquery": "^3.4.1" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /5. 性能优化/5-11. bundle analyzer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "npx webpack" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "clean-webpack-plugin": "^3.0.0", 13 | "jquery": "^3.4.1", 14 | "lodash": "^4.17.15", 15 | "lodash-es": "^4.17.15", 16 | "webpack": "^4.41.6", 17 | "webpack-bundle-analyzer": "^3.6.0", 18 | "webpack-cli": "^3.3.11" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /5. 性能优化/5-6. 自动分包/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "dev": "webpack" 7 | }, 8 | "author": "", 9 | "license": "ISC", 10 | "devDependencies": { 11 | "clean-webpack-plugin": "^3.0.0", 12 | "css-loader": "^3.4.2", 13 | "html-webpack-plugin": "^4.0.0-beta.11", 14 | "jquery": "^3.4.1", 15 | "lodash": "^4.17.15", 16 | "mini-css-extract-plugin": "^0.9.0", 17 | "webpack": "^4.41.6", 18 | "webpack-cli": "^3.3.11" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /2. 常用扩展/2-5. 普通文件处理/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "scripts": { 6 | "dev": "webpack-dev-server" 7 | }, 8 | "author": "", 9 | "license": "ISC", 10 | "devDependencies": { 11 | "clean-webpack-plugin": "^3.0.0", 12 | "file-loader": "^5.0.2", 13 | "html-webpack-plugin": "^3.2.0", 14 | "url-loader": "^3.0.0", 15 | "webpack": "^4.41.5", 16 | "webpack-cli": "^3.3.10", 17 | "webpack-dev-server": "^3.10.1" 18 | }, 19 | "description": "" 20 | } 21 | -------------------------------------------------------------------------------- /2. 常用扩展/2-6. 解决路径问题/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "scripts": { 6 | "dev": "webpack-dev-server" 7 | }, 8 | "author": "", 9 | "license": "ISC", 10 | "devDependencies": { 11 | "clean-webpack-plugin": "^3.0.0", 12 | "file-loader": "^5.0.2", 13 | "html-webpack-plugin": "^3.2.0", 14 | "url-loader": "^3.0.0", 15 | "webpack": "^4.41.5", 16 | "webpack-cli": "^3.3.10", 17 | "webpack-dev-server": "^3.10.1" 18 | }, 19 | "description": "" 20 | } 21 | -------------------------------------------------------------------------------- /6. 补充和案例/6-1. [扩展]不确定的动态依赖/src/index.js: -------------------------------------------------------------------------------- 1 | // // const module = document.getElementById("txt").value; 2 | 3 | // // if (Math.random() < 0.5) { 4 | // // // const a = require("./utils/" + module); // 动态依赖 5 | // // // console.log(a); 6 | // // } 7 | 8 | // // 仅在webpack运行过程中有效 9 | // // 参数1：目录，哪个目录中的模块需要添加到打包结果 10 | // // 参数2：是否递归寻找子目录，如果为true，表示需要寻找子目录 11 | // // 参数3：正则表达式，凡是匹配的才会加入到打包结果 12 | // const context = require.context("./utils", true, /\.js$/); 13 | 14 | // console.log(context.keys()); 15 | 16 | const util = require("./utils"); 17 | console.log(util) 18 | -------------------------------------------------------------------------------- /1. webpack核心功能/1-13. [练习]处理图片/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | mode: "development", 3 | devtool: "source-map", 4 | module: { 5 | rules: [ 6 | { 7 | test: /\.(png)|(jpg)|(gif)$/, use: [{ 8 | loader: "./loaders/img-loader.js", 9 | options: { 10 | limit: 3000, //3000字节以上使用图片，3000字节以内使用base64 11 | filename: "img-[contenthash:5].[ext]" 12 | } 13 | }] 14 | } 15 | ] 16 | } 17 | } -------------------------------------------------------------------------------- /3. css工程化/3-2. 利用webpack拆分css/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "css-loader": "^3.4.2", 13 | "file-loader": "^5.0.2", 14 | "style-loader": "^1.1.3", 15 | "url-loader": "^3.0.0", 16 | "webpack": "^4.41.5", 17 | "webpack-cli": "^3.3.10" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /4. js兼容性/4-4. 在webpack中使用babel/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "@babel/core": "^7.8.4", 13 | "@babel/preset-env": "^7.8.4", 14 | "babel-loader": "^8.0.6", 15 | "core-js": "^3.6.4", 16 | "regenerator-runtime": "^0.13.3", 17 | "webpack": "^4.41.5", 18 | "webpack-cli": "^3.3.10" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /3. css工程化/3-7. 在webpack中使用less/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "webpack-dev-server" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "css-loader": "^3.4.2", 13 | "html-webpack-plugin": "^3.2.0", 14 | "less": "^3.10.3", 15 | "less-loader": "^5.0.0", 16 | "style-loader": "^1.1.3", 17 | "webpack": "^4.41.5", 18 | "webpack-cli": "^3.3.10", 19 | "webpack-dev-server": "^3.10.2" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /3. css工程化/3-5. css module/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "webpack-dev-server", 8 | "build": "webpack" 9 | }, 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "css-loader": "^3.4.2", 14 | "html-webpack-plugin": "^3.2.0", 15 | "style-loader": "^1.1.3", 16 | "webpack": "^4.41.5", 17 | "webpack-cli": "^3.3.10", 18 | "webpack-dev-server": "^3.10.1" 19 | } 20 | } -------------------------------------------------------------------------------- /5. 性能优化/5-7. 代码压缩/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "dev": "webpack" 7 | }, 8 | "author": "", 9 | "license": "ISC", 10 | "devDependencies": { 11 | "clean-webpack-plugin": "^3.0.0", 12 | "css-loader": "^3.4.2", 13 | "html-webpack-plugin": "^4.0.0-beta.11", 14 | "mini-css-extract-plugin": "^0.9.0", 15 | "optimize-css-assets-webpack-plugin": "^5.0.3", 16 | "terser-webpack-plugin": "^2.3.5", 17 | "webpack": "^4.41.6", 18 | "webpack-cli": "^3.3.11" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /3. css工程化/3-7. 在webpack中使用less/webpack.config.js: -------------------------------------------------------------------------------- 1 | const HtmlWebpackPlugin = require('html-webpack-plugin') 2 | 3 | module.exports = { 4 | mode: "development", 5 | devServer: { 6 | open: true 7 | }, 8 | module: { 9 | rules: [ 10 | { test: /\.css$/, use: ["style-loader", "css-loader"] }, 11 | { test: /\.less$/, use: ["style-loader", "css-loader?modules", "less-loader"] }, 12 | ] 13 | }, 14 | plugins: [ 15 | new HtmlWebpackPlugin({ 16 | template: "./public/index.html" 17 | }) 18 | ] 19 | } -------------------------------------------------------------------------------- /3. css工程化/3-9. 在webpack中使用postcss/webpack.config.js: -------------------------------------------------------------------------------- 1 | const HtmlWebpackPlugin = require("html-webpack-plugin") 2 | 3 | module.exports = { 4 | mode: "development", 5 | devtool: "source-map", 6 | module: { 7 | rules: [ 8 | { 9 | test: /\.pcss$/, use: ["style-loader", "css-loader?modules", "postcss-loader"] 10 | } 11 | ] 12 | }, 13 | devServer: { 14 | open: true 15 | }, 16 | plugins: [ 17 | new HtmlWebpackPlugin({ 18 | template: "./public/index.html" 19 | }) 20 | ] 21 | } -------------------------------------------------------------------------------- /1. webpack核心功能/1-17. 其他细节配置/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /6. 补充和案例/6-5. [扩展]搭建Node应用/说明.md: -------------------------------------------------------------------------------- 1 | 见：https://github.com/yjisme/node-webpack 2 | 3 | 4 | 1. 直接开发，直接部署 5 | 1. 搭建node工程，直接开发 6 | 2. 开发过程中使用git进行管理 7 | 3. 开发完成后，提交git 8 | 4. 进入部署服务器，从git中拉取最新代码，然后`npm install` 9 | 10 | 11 | 12 | 问题： 13 | 14 | 1. 服务器在`npm install`的过程中，会占用比较大的网络资源 15 | 2. 代码没有压缩，拉取速度较慢 16 | 3. 开发过程中，无法使用较新的语法 17 | 4. 开发过程中，无法使用ES6模块化 18 | 19 | 20 | 21 | 2. 直接开发，用webpack打包，然后部署 22 | 1. 搭建node + webpack工程 23 | 2. 开发后，使用webpack打包 24 | 3. 将打包结果上传到服务器，服务器直接运行 25 | 26 | 27 | 28 | 生产环境的运行： 29 | 30 | 1. 监控源代码目录，如果源代码有变动 31 | 2. 将环境变量设置为`development`，然后进行打包 32 | 3. 运行打包结果 -------------------------------------------------------------------------------- /2. 常用扩展/2-8. [练习]区域查询/工程/public/detail.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 详情 8 | 9 | 10 | 11 | 12 |
    13 |

    14 |
    15 |
    管辖城市
    16 | 17 |
    18 |
    19 | 20 | -------------------------------------------------------------------------------- /2. 常用扩展/2-8. [练习]区域查询/工程/public/list.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 列表页 7 | 8 | 9 | 10 | 11 | 12 | 13 |
    14 |
    15 |
      16 | 17 |
    18 |
    19 | 20 | 21 | -------------------------------------------------------------------------------- /3. css工程化/3-6. 预编译器less/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
    12 | Lorem ipsum dolor sit. 13 |
    14 |
    15 | Lorem ipsum dolor sit. 16 |
    17 |
    18 | Lorem ipsum dolor sit. 19 |
    20 | 21 | -------------------------------------------------------------------------------- /3. css工程化/3-8. PostCss/css/source copy 4.pcss: -------------------------------------------------------------------------------- 1 | 2 | :root { 3 | --mainColor: #aabbcc; 4 | } 5 | 6 | body { 7 | /* 使用颜色#aabbcc，不做任何处理，等同于直接书写 #aabbcc */ 8 | color: color(var(--mainColor)); 9 | /* 将颜色#aabbcc透明度设置为90% */ 10 | color: color(var(--mainColor) a(90%)); 11 | /* 将颜色var(--mainColor)的红色部分设置为90% */ 12 | color: color(var(--mainColor) red(90%)); 13 | /* 将颜色var(--mainColor)调亮50%（更加趋近于白色），类似于less中的lighten函数 */ 14 | color: color(var(--mainColor) tint(50%)); 15 | /* 将颜色var(--mainColor)调暗50%（更加趋近于黑色），类似于less中的darken函数 */ 16 | color: color(var(--mainColor) shade(50%)); 17 | } 18 | -------------------------------------------------------------------------------- /2. 常用扩展/2-2. 自动生成页面/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |

    webpack

    11 |

    12 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, deserunt ducimus. Et iure labore debitis tempora praesentium atque velit provident recusandae dolor harum fugiat facere totam, maiores repudiandae illum aliquid? 13 |

    14 | 15 | -------------------------------------------------------------------------------- /2. 常用扩展/2-4. 开发服务器/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |

    webpack

    11 |

    12 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, deserunt ducimus. Et iure labore debitis tempora praesentium atque velit provident recusandae dolor harum fugiat facere totam, maiores repudiandae illum aliquid? 13 |

    14 | 15 | -------------------------------------------------------------------------------- /2. 常用扩展/2-5. 普通文件处理/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |

    webpack

    11 |

    12 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, deserunt ducimus. Et iure labore debitis tempora praesentium atque velit provident recusandae dolor harum fugiat facere totam, maiores repudiandae illum aliquid? 13 |

    14 | 15 | -------------------------------------------------------------------------------- /2. 常用扩展/2-6. 解决路径问题/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |

    webpack

    11 |

    12 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, deserunt ducimus. Et iure labore debitis tempora praesentium atque velit provident recusandae dolor harum fugiat facere totam, maiores repudiandae illum aliquid? 13 |

    14 | 15 | -------------------------------------------------------------------------------- /5. 性能优化/5-8. tree shaking/src/myMath.js: -------------------------------------------------------------------------------- 1 | import { chunk } from "lodash-es"; 2 | 3 | export function add(a, b) { 4 | console.log("add"); 5 | return a + b; 6 | } 7 | 8 | export function sub(a, b) { 9 | console.log("sub"); 10 | return a - b; 11 | } 12 | 13 | export function myChunk(arr, num) { 14 | console.log("myChunk"); 15 | return chunk(arr, num); 16 | } 17 | 18 | // export default { 19 | // add: function add(a, b) { 20 | // console.log("add"); 21 | // return a + b; 22 | // }, 23 | // sub: function sub(a, b) { 24 | // console.log("sub"); 25 | // return a - b; 26 | // } 27 | // }; 28 | -------------------------------------------------------------------------------- /3. css工程化/3-8. PostCss/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "postcss css/source.pcss -o css/out.css -w" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "postcss": "^7.0.26", 13 | "postcss-apply": "^0.12.0", 14 | "postcss-cli": "^7.1.0", 15 | "postcss-color-function": "^4.1.0", 16 | "postcss-preset-env": "^6.7.0", 17 | "stylelint": "^13.0.0", 18 | "stylelint-config-standard": "^19.0.0" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /2. 常用扩展/2-8. [练习]区域查询/工程/webpack.config.js: -------------------------------------------------------------------------------- 1 | const baseConfig = require("./webpack.base") 2 | const devConfig = require("./webpack.dev") 3 | const prodConfig = require("./webpack.prod") 4 | 5 | module.exports = function (env) { 6 | if (env && env.prod) { 7 | //生产环境 8 | const config = { 9 | ...baseConfig, 10 | ...prodConfig 11 | } 12 | config.plugins = [...baseConfig.plugins, ...prodConfig.plugins] 13 | return config; 14 | } 15 | else { 16 | //开发环境 17 | return { 18 | ...baseConfig, 19 | ...devConfig 20 | } 21 | } 22 | } -------------------------------------------------------------------------------- /2. 常用扩展/2-3. 复制静态资源/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { CleanWebpackPlugin } = require("clean-webpack-plugin") 2 | const HtmlWebpackPlugin = require('html-webpack-plugin') 3 | const CopyPlugin = require('copy-webpack-plugin'); 4 | module.exports = { 5 | mode: "development", 6 | devtool: "source-map", 7 | output: { 8 | filename: "scripts/[name].[chunkhash:5].js" 9 | }, 10 | plugins: [ 11 | new CleanWebpackPlugin(), 12 | new HtmlWebpackPlugin({ 13 | template: "./public/index.html" 14 | }), 15 | new CopyPlugin([ 16 | { from: "./public", to: "./" } 17 | ]) 18 | ] 19 | } -------------------------------------------------------------------------------- /3. css工程化/3-10. 抽离css文件/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "webpack", 8 | "dev": "webpack-dev-server" 9 | }, 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "clean-webpack-plugin": "^3.0.0", 14 | "css-loader": "^3.4.2", 15 | "file-loader": "^5.0.2", 16 | "html-webpack-plugin": "^3.2.0", 17 | "mini-css-extract-plugin": "^0.9.0", 18 | "style-loader": "^1.1.3", 19 | "webpack": "^4.41.5", 20 | "webpack-cli": "^3.3.10", 21 | "webpack-dev-server": "^3.10.3" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /5. 性能优化/5-3. 优化loader性能/md/custom.less: -------------------------------------------------------------------------------- 1 | 2 | /* Please visit the URL below for more information: */ 3 | /* https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css */ 4 | 5 | .markdown-preview.markdown-preview { 6 | // modify your style here 7 | // eg: background-color: blue; 8 | font-family: "consolas", "Noto Sans S Chinese"; 9 | font-size: 1em; 10 | } 11 | 12 | .markdown-img-description{ 13 | text-align: center; 14 | margin-top: -1em; 15 | color: #666;; 16 | margin-bottom: 2em; 17 | } 18 | 19 | html body img{ 20 | border:2px solid #ccc; 21 | } 22 | 23 | .markdown-p-center{ 24 | text-align: center; 25 | } -------------------------------------------------------------------------------- /2. 常用扩展/2-8. [练习]区域查询/工程/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "area-proj", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "webpack-dev-server", 8 | "build": "webpack --env.prod" 9 | }, 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "clean-webpack-plugin": "^3.0.0", 14 | "copy-webpack-plugin": "^5.1.1", 15 | "html-webpack-plugin": "^3.2.0", 16 | "webpack": "^4.41.5", 17 | "webpack-cli": "^3.3.10", 18 | "webpack-dev-server": "^3.10.1" 19 | }, 20 | "dependencies": { 21 | "jquery": "^3.4.1", 22 | "query-string": "^6.10.1" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /5. 性能优化/5-3. 优化loader性能/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "@babel/core": "^7.8.4", 13 | "@babel/preset-env": "^7.8.4", 14 | "babel-loader": "^8.0.6", 15 | "cache-loader": "^4.1.0", 16 | "core-js": "^3.6.4", 17 | "lodash": "^4.17.15", 18 | "regenerator-runtime": "^0.13.3", 19 | "thread-loader": "^2.1.3", 20 | "webpack": "^4.41.6", 21 | "webpack-cli": "^3.3.11" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /2. 常用扩展/2-8. [练习]区域查询/静态页面/css/list.css: -------------------------------------------------------------------------------- 1 | .container { 2 | width: 800px; 3 | margin: 20px auto; 4 | line-height: 2; 5 | display: flex; 6 | justify-content: space-between; 7 | } 8 | 9 | .china-map{ 10 | width: 340px; 11 | height: 248px; 12 | background: url("../img/china.jpg"); 13 | background-size: 100% 100%; 14 | } 15 | 16 | .provinces{ 17 | list-style: none; 18 | display: flex; 19 | width: 450px; 20 | flex-wrap: wrap; 21 | } 22 | 23 | .provinces li{ 24 | margin: 0 10px; 25 | } 26 | 27 | .provinces a{ 28 | text-decoration: none; 29 | display: block; 30 | } 31 | 32 | .provinces a:hover{ 33 | color: #f40; 34 | } -------------------------------------------------------------------------------- /2. 常用扩展/2-2. 自动生成页面/dist/a.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |

    webpack

    11 |

    12 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, deserunt ducimus. Et iure labore debitis tempora praesentium atque velit provident recusandae dolor harum fugiat facere totam, maiores repudiandae illum aliquid? 13 |

    14 | 15 | -------------------------------------------------------------------------------- /2. 常用扩展/2-8. [练习]区域查询/工程/public/css/list.css: -------------------------------------------------------------------------------- 1 | .container { 2 | width: 800px; 3 | margin: 20px auto; 4 | line-height: 2; 5 | display: flex; 6 | justify-content: space-between; 7 | } 8 | 9 | .china-map{ 10 | width: 340px; 11 | height: 248px; 12 | background: url("../img/china.jpg"); 13 | background-size: 100% 100%; 14 | } 15 | 16 | .provinces{ 17 | list-style: none; 18 | display: flex; 19 | width: 450px; 20 | flex-wrap: wrap; 21 | } 22 | 23 | .provinces li{ 24 | margin: 0 10px; 25 | } 26 | 27 | .provinces a{ 28 | text-decoration: none; 29 | display: block; 30 | } 31 | 32 | .provinces a:hover{ 33 | color: #f40; 34 | } -------------------------------------------------------------------------------- /2. 常用扩展/2-8. [练习]区域查询/静态页面/detail.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 详情 8 | 9 | 10 | 11 | 12 |
    13 |

    四川省

    14 |
    15 |
    管辖城市
    16 |
    成都市
    17 |
    绵阳市
    18 |
    南充市
    19 |
    20 |
    21 | 22 | -------------------------------------------------------------------------------- /2. 常用扩展/2-2. 自动生成页面/dist/home.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |

    webpack

    11 |

    12 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, deserunt ducimus. Et iure labore debitis tempora praesentium atque velit provident recusandae dolor harum fugiat facere totam, maiores repudiandae illum aliquid? 13 |

    14 | 15 | -------------------------------------------------------------------------------- /2. 常用扩展/2-5. 普通文件处理/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |

    webpack

    11 |

    12 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, deserunt ducimus. Et iure labore debitis tempora praesentium atque velit provident recusandae dolor harum fugiat facere totam, maiores repudiandae illum aliquid? 13 |

    14 | 15 | -------------------------------------------------------------------------------- /3. css工程化/3-8. PostCss/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 20 | 21 | 22 | 23 | 24 |
    25 | Lorem ipsum dolor sit. 26 |
    27 | 28 | 29 | -------------------------------------------------------------------------------- /2. 常用扩展/2-6. 解决路径问题/dist/html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |

    webpack

    11 |

    12 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, deserunt ducimus. Et iure labore debitis tempora praesentium atque velit provident recusandae dolor harum fugiat facere totam, maiores repudiandae illum aliquid? 13 |

    14 | 15 | -------------------------------------------------------------------------------- /3. css工程化/3-9. 在webpack中使用postcss/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "webpack", 8 | "dev": "webpack-dev-server" 9 | }, 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "css-loader": "^3.4.2", 14 | "html-webpack-plugin": "^3.2.0", 15 | "postcss": "^7.0.26", 16 | "postcss-loader": "^3.0.0", 17 | "postcss-preset-env": "^6.7.0", 18 | "style-loader": "^1.1.3", 19 | "stylelint-config-standard": "^19.0.0", 20 | "webpack": "^4.41.5", 21 | "webpack-cli": "^3.3.10", 22 | "webpack-dev-server": "^3.10.3" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /1. webpack核心功能/1-16. 区分环境/课件.md: -------------------------------------------------------------------------------- 1 | # 区分环境 {ignore} 2 | 3 | [toc] 4 | 5 | 有些时候，我们需要针对生产环境和开发环境分别书写webpack配置 6 | 7 | 为了更好的适应这种要求，webpack允许配置不仅可以是一个对象，还可以是一个**函数** 8 | 9 | ```js 10 | module.exports = env => { 11 | return { 12 | //配置内容 13 | } 14 | } 15 | ``` 16 | 17 | 在开始构建时，webpack如果发现配置是一个函数，会调用该函数，将函数返回的对象作为配置内容，因此，开发者可以根据不同的环境返回不同的对象 18 | 19 | 在调用webpack函数时，webpack会向函数传入一个参数env，该参数的值来自于webpack命令中给env指定的值，例如 20 | 21 | ```shell 22 | npx webpack --env abc # env: "abc" 23 | 24 | npx webpack --env.abc # env: {abc:true} 25 | npx webpack --env.abc=1 # env： {abc:1} 26 | npx webpack --env.abc=1 --env.bcd=2 # env: {abc:1, bcd:2} 27 | ``` 28 | 29 | 这样一来，我们就可以在命令中指定环境，在代码中进行判断，根据环境返回不同的配置结果。 -------------------------------------------------------------------------------- /2. 常用扩展/2-3. 复制静态资源/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |

    webpack

    11 |

    12 | 13 |

    14 |

    15 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, deserunt ducimus. Et iure labore debitis tempora praesentium atque velit provident recusandae dolor harum fugiat facere totam, maiores repudiandae illum aliquid? 16 |

    17 | 18 | -------------------------------------------------------------------------------- /5. 性能优化/5-8. tree shaking/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "build": "webpack" 7 | }, 8 | "author": "", 9 | "license": "ISC", 10 | "devDependencies": { 11 | "clean-webpack-plugin": "^3.0.0", 12 | "css-loader": "^3.4.2", 13 | "glob": "^7.1.6", 14 | "glob-all": "^3.1.0", 15 | "lodash": "^4.17.15", 16 | "lodash-es": "^4.17.15", 17 | "mini-css-extract-plugin": "^0.9.0", 18 | "purgecss-webpack-plugin": "^2.1.0", 19 | "webpack": "^4.41.6", 20 | "webpack-cli": "^3.3.11", 21 | "webpack-deep-scope-plugin": "^1.6.2" 22 | }, 23 | "sideEffects": [ 24 | "!src/common.js" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /2. 常用扩展/2-3. 复制静态资源/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |

    webpack

    11 |

    12 | 13 |

    14 |

    15 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, deserunt ducimus. Et iure labore debitis tempora praesentium atque velit provident recusandae dolor harum fugiat facere totam, maiores repudiandae illum aliquid? 16 |

    17 | 18 | -------------------------------------------------------------------------------- /5. 性能优化/5-1. 性能优化概述/课件.md: -------------------------------------------------------------------------------- 1 | # 性能优化概述 2 | 3 | 本章所讲的性能优化主要体现在三个方面： 4 | 5 |
    6 | 7 |
    8 | 9 | **构建性能** 10 | 11 | 这里所说的构建性能，是指在**开发阶段的构建性能**，而不是生产环境的构建性能 12 | 13 | 优化的目标，**是降低从打包开始，到代码效果呈现所经过的时间** 14 | 15 | 构建性能会影响开发效率。构建性能越高，开发过程中时间的浪费越少 16 | 17 | **传输性能** 18 | 19 | 传输性能是指，打包后的JS代码传输到浏览器经过的时间 20 | 21 | 在优化传输性能时要考虑到： 22 | 23 | 1. 总传输量：所有需要传输的JS文件的内容加起来，就是总传输量，重复代码越少，总传输量越少 24 | 2. 文件数量：当访问页面时，需要传输的JS文件数量，文件数量越多，http请求越多，响应速度越慢 25 | 3. 浏览器缓存：JS文件会被浏览器缓存，被缓存的文件不会再进行传输 26 | 27 | **运行性能** 28 | 29 | 运行性能是指，JS代码在浏览器端的运行速度 30 | 31 | 它主要取决于我们如何书写高性能的代码 32 | 33 | **永远不要过早的关注于性能**，因为你在开发的时候，无法完全预知最终的运行性能，过早的关注性能会极大的降低开发效率 34 | 35 | --------- 36 | 37 | 性能优化主要从上面三个维度入手 38 | 39 | **性能优化没有完美的解决方案，需要具体情况具体分析** -------------------------------------------------------------------------------- /1. webpack核心功能/1-4. [练习]酷炫的数字查找特效/src/util/number.js: -------------------------------------------------------------------------------- 1 | import isPrime from "./isPrime" 2 | 3 | export default class NumberTimer { 4 | 5 | constructor(duration = 500) { 6 | this.duration = duration; 7 | this.number = 1; //当前的数字 8 | this.onNumberCreated = null; //当一个数字产生的时候，要调用的回调函数 9 | this.timerId = null; 10 | } 11 | 12 | start() { 13 | if (this.timerId) { 14 | return; 15 | } 16 | this.timerId = setInterval(() => { 17 | this.onNumberCreated && this.onNumberCreated(this.number, isPrime(this.number)) 18 | this.number++; 19 | }, this.duration) 20 | } 21 | 22 | stop() { 23 | clearInterval(this.timerId); 24 | this.timerId = null; 25 | } 26 | } -------------------------------------------------------------------------------- /3. css工程化/3-4. css-in-js/课件.md: -------------------------------------------------------------------------------- 1 | # css in js 2 | 3 | css in js 的核心思想是：用一个JS对象来描述样式，而不是css样式表 4 | 5 | 例如下面的对象就是一个用于描述样式的对象： 6 | 7 | ```js 8 | const styles = { 9 | backgroundColor: "#f40", 10 | color: "#fff", 11 | width: "400px", 12 | height: "500px", 13 | margin: "0 auto" 14 | } 15 | ``` 16 | 17 | 由于这种描述样式的方式**根本就不存在类名**，自然不会有类名冲突 18 | 19 | 至于如何把样式应用到界面上，不是它所关心的事情，你可以用任何技术、任何框架、任何方式将它应用到界面。 20 | 21 | > 后续学习的vue、react都支持css in js，可以非常轻松的应用到界面 22 | 23 | css in js的特点： 24 | 25 | - **绝无冲突的可能**：由于它根本不存在类名，所以绝不可能出现类名冲突 26 | - **更加灵活**：可以充分利用JS语言灵活的特点，用各种招式来处理样式 27 | - **应用面更广**：只要支持js语言，就可以支持css in js，因此，在一些用JS语言开发移动端应用的时候非常好用，因为移动端应用很有可能并不支持css 28 | - **书写不便**：书写样式，特别是公共样式的时候，处理起来不是很方便 29 | - **在页面中增加了大量冗余内容**：在页面中处理css in js时，往往是将样式加入到元素的style属性中，会大量增加元素的内联样式，并且可能会有大量重复，不易阅读最终的页面代码 -------------------------------------------------------------------------------- /2. 常用扩展/2-7. webpack内置插件/webpack.config.js: -------------------------------------------------------------------------------- 1 | const webpack = require("webpack") 2 | 3 | module.exports = { 4 | mode: "development", 5 | devtool: "source-map", 6 | plugins: [ 7 | new webpack.DefinePlugin({ 8 | PI: `Math.PI`, // const PI = Math.PI 9 | VERSION: `"1.0.0"`, // VERSION = "1.0.0" 10 | DOMAIN: JSON.stringify("duyi.com") // DOMAIN = "duyi.com" 11 | }), 12 | new webpack.BannerPlugin({ 13 | banner: ` 14 | hash:[hash] 15 | chunkhash:[chunkhash] 16 | name:[name] 17 | author:yuanjin 18 | corporation:duyi 19 | ` 20 | }), 21 | new webpack.ProvidePlugin({ 22 | $: 'jquery', 23 | _: 'lodash' 24 | }) 25 | ] 26 | } -------------------------------------------------------------------------------- /4. js兼容性/4-3. babel插件/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "babel js -d dist -w" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "@babel/cli": "^7.8.4", 13 | "@babel/core": "^7.8.4", 14 | "@babel/plugin-proposal-class-properties": "^7.8.3", 15 | "@babel/plugin-proposal-function-bind": "^7.8.3", 16 | "@babel/plugin-proposal-optional-chaining": "^7.8.3", 17 | "@babel/plugin-transform-runtime": "^7.8.3", 18 | "@babel/preset-env": "^7.8.4", 19 | "babel-plugin-transform-remove-console": "^6.9.4" 20 | }, 21 | "dependencies": { 22 | "@babel/runtime": "^7.8.4", 23 | "core-js": "^3.6.4", 24 | "regenerator-runtime": "^0.13.3" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /2. 常用扩展/2-2. 自动生成页面/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { CleanWebpackPlugin } = require("clean-webpack-plugin") 2 | const HtmlWebpackPlugin = require('html-webpack-plugin') 3 | module.exports = { 4 | mode: "development", 5 | devtool: "source-map", 6 | entry: { 7 | home: "./src/index.js", 8 | a: "./src/a.js" 9 | }, 10 | output: { 11 | filename: "scripts/[name].[chunkhash:5].js" 12 | }, 13 | plugins: [ 14 | new CleanWebpackPlugin(), 15 | new HtmlWebpackPlugin({ 16 | template: "./public/index.html", 17 | filename: "home.html", 18 | chunks: ["home"] 19 | }), 20 | new HtmlWebpackPlugin({ 21 | template: "./public/index.html", 22 | filename: "a.html", 23 | chunks: ["a"] 24 | }) 25 | ] 26 | } -------------------------------------------------------------------------------- /4. js兼容性/4-6. [扩展]async和await的转换/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "1.0.0", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "core-js": { 8 | "version": "2.6.11", 9 | "resolved": "https://registry.npm.taobao.org/core-js/download/core-js-2.6.11.tgz?cache=0&sync_timestamp=1578957195899&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcore-js%2Fdownload%2Fcore-js-2.6.11.tgz", 10 | "integrity": "sha1-OIMUafmSK97Y7iHJ3EaYXgOZMIw=" 11 | }, 12 | "regenerator-runtime": { 13 | "version": "0.13.3", 14 | "resolved": "https://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.13.3.tgz", 15 | "integrity": "sha1-fPanfY9cb2Drc8X8GVWyzrAea/U=" 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /2. 常用扩展/2-4. 开发服务器/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { CleanWebpackPlugin } = require("clean-webpack-plugin") 2 | const HtmlWebpackPlugin = require('html-webpack-plugin') 3 | module.exports = { 4 | mode: "development", 5 | devtool: "source-map", 6 | output: { 7 | filename: "scripts/[name].[chunkhash:5].js" 8 | }, 9 | plugins: [ 10 | new CleanWebpackPlugin(), 11 | new HtmlWebpackPlugin({ 12 | template: "./public/index.html" 13 | }) 14 | ], 15 | devServer: { 16 | port: 8000, 17 | open: true, 18 | proxy: { //代理规则 19 | "/api": { 20 | target: "http://open.duyiedu.com", 21 | changeOrigin: true //更改请求头中的host和origin 22 | } 23 | } 24 | }, 25 | stats: { 26 | modules: false, 27 | colors: true 28 | } 29 | } -------------------------------------------------------------------------------- /5. 性能优化/5-8. tree shaking/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { CleanWebpackPlugin } = require("clean-webpack-plugin"); 2 | const DeepScope = require("webpack-deep-scope-plugin").default; 3 | const MiniCss = require("mini-css-extract-plugin"); 4 | const Purgecss = require("purgecss-webpack-plugin"); 5 | const path = require("path"); 6 | const globAll = require("glob-all"); 7 | const srcAbs = path.resolve(__dirname, "src"); //得到src的绝对路径 8 | const htmlPath = path.resolve(__dirname, "public/index.html"); 9 | const paths = globAll.sync([`${srcAbs}**/*.js`, htmlPath]); 10 | 11 | module.exports = { 12 | mode: "production", 13 | module: { 14 | rules: [{ test: /\.css$/, use: [MiniCss.loader, "css-loader"] }] 15 | }, 16 | plugins: [ 17 | new CleanWebpackPlugin(), 18 | new DeepScope(), 19 | new MiniCss(), 20 | new Purgecss({ 21 | paths 22 | }) 23 | ] 24 | }; 25 | -------------------------------------------------------------------------------- /1. webpack核心功能/1-15. [练习]添加文件列表/plugins/FileListPlugin.js: -------------------------------------------------------------------------------- 1 | module.exports = class FileListPlugin { 2 | 3 | constructor(filename = "filelist.txt"){ 4 | this.filename = filename; 5 | } 6 | 7 | apply(compiler) { 8 | compiler.hooks.emit.tap("FileListPlugin", complation => { 9 | var fileList = []; 10 | for (const key in complation.assets) { 11 | var content = `【${key}】 12 | 大小：${complation.assets[key].size()/1000}KB`; 13 | fileList.push(content); 14 | } 15 | 16 | var str = fileList.join("\n\n"); 17 | complation.assets[this.filename] = { 18 | source() { 19 | return str 20 | }, 21 | size() { 22 | return str.length; 23 | } 24 | } 25 | }) 26 | } 27 | } -------------------------------------------------------------------------------- /3. css工程化/3-3. BEM/课件.md: -------------------------------------------------------------------------------- 1 | # BEM 2 | 3 | BEM是一套针对css类样式的命名方法。 4 | 5 | > 其他命名方法还有：OOCSS、AMCSS、SMACSS等等 6 | 7 | BEM全称是：**B**lock **E**lement **M**odifier 8 | 9 | 一个完整的BEM类名：block__element_modifier，例如：```banner__dot_selected```，可以表示：轮播图中，处于选中状态的小圆点 10 | 11 | ![](assets/2020-01-31-09-53-31.png) 12 | 13 | 三个部分的具体含义为： 14 | 15 | - **Block**：页面中的大区域，表示最顶级的划分，例如：轮播图(```banner```)、布局(```layout```)、文章(```article```)等等 16 | - **element**：区域中的组成部分，例如：轮播图中的横幅图片(```banner__img```)、轮播图中的容器（```banner__container```）、布局中的头部(```layout__header```)、文章中的标题(```article_title```) 17 | - **modifier**：可选。通常表示状态，例如：处于展开状态的布局左边栏（```layout__left_expand```）、处于选中状态的轮播图小圆点(```banner__dot_selected```) 18 | 19 | 在某些大型工程中，如果使用BEM命名法，还可能会增加一个前缀，来表示类名的用途，常见的前缀有： 20 | 21 | - **l**: layout，表示这个样式是用于布局的 22 | - **c**: component，表示这个样式是一个组件，即一个功能区域 23 | - **u**: util，表示这个样式是一个通用的、工具性质的样式 24 | - **j**: javascript，表示这个样式没有实际意义，是专门提供给js获取元素使用的 -------------------------------------------------------------------------------- /3. css工程化/3-3. BEM/index.css: -------------------------------------------------------------------------------- 1 | .banner__container { 2 | width: 520px; 3 | height: 280px; 4 | margin: 0 auto; 5 | outline: 1px solid; 6 | overflow: hidden; 7 | position: relative; 8 | } 9 | 10 | .banner__imgcontainer { 11 | width: 1560px; 12 | height: 280px; 13 | /* background: red; */ 14 | } 15 | 16 | .banner__imgcontainer img { 17 | float: left; 18 | width: 520px; 19 | height: 280px; 20 | } 21 | 22 | .banner__dotcontainer { 23 | position: absolute; 24 | bottom: 10px; 25 | left: 50%; 26 | transform: translateX(-50%); 27 | padding: 5px; 28 | background: rgba(0, 0, 0, .5); 29 | border-radius: 5px; 30 | } 31 | 32 | .banner__dot{ 33 | float: left; 34 | width: 10px; 35 | height: 10px; 36 | background: #fff; 37 | border-radius: 50%; 38 | margin: 5px; 39 | } 40 | 41 | .banner__dot_selected{ 42 | background: #f40; 43 | } -------------------------------------------------------------------------------- /3. css工程化/3-10. 抽离css文件/课件.md: -------------------------------------------------------------------------------- 1 | # 抽离css文件 2 | 3 | 目前，css代码被css-loader转换后，交给的是style-loader进行处理。 4 | 5 | style-loader使用的方式是用一段js代码，将样式加入到style元素中。 6 | 7 | 而实际的开发中，我们往往希望依赖的样式最终形成一个css文件 8 | 9 | 此时，就需要用到一个库：`mini-css-extract-plugin` 10 | 11 | 该库提供了1个plugin和1个loader 12 | 13 | - plugin：负责生成css文件 14 | - loader：负责记录要生成的css文件的内容，同时导出开启css-module后的样式对象 15 | 16 | 使用方式： 17 | 18 | ```js 19 | const MiniCssExtractPlugin = require("mini-css-extract-plugin") 20 | module.exports = { 21 | module: { 22 | rules: [ 23 | { 24 | test: /\.css$/, use: [MiniCssExtractPlugin.loader, "css-loader?modules"] 25 | } 26 | ] 27 | }, 28 | plugins: [ 29 | new MiniCssExtractPlugin() //负责生成css文件 30 | ] 31 | } 32 | ``` 33 | 34 | **配置生成的文件名** 35 | 36 | 同`output.filename`的含义一样，即根据chunk生成的样式文件名 37 | 38 | 配置生成的文件名，例如`[name].[contenthash:5].css` 39 | 40 | 默认情况下，每个chunk对应一个css文件 -------------------------------------------------------------------------------- /1. webpack核心功能/1-13. [练习]处理图片/loaders/img-loader.js: -------------------------------------------------------------------------------- 1 | var loaderUtil = require("loader-utils") 2 | 3 | function loader(buffer) { //给的是buffer 4 | console.log("文件数据大小：(字节)", buffer.byteLength); 5 | var { limit = 1000, filename = "[contenthash].[ext]" } = loaderUtil.getOptions(this); 6 | if (buffer.byteLength >= limit) { 7 | var content = getFilePath.call(this, buffer, filename); 8 | } 9 | else{ 10 | var content = getBase64(buffer) 11 | } 12 | return `module.exports = \`${content}\``; 13 | } 14 | 15 | loader.raw = true; //该loader要处理的是原始数据 16 | 17 | module.exports = loader; 18 | 19 | function getBase64(buffer) { 20 | return "data:image/png;base64," + buffer.toString("base64"); 21 | } 22 | 23 | function getFilePath(buffer, name) { 24 | var filename = loaderUtil.interpolateName(this, name, { 25 | content: buffer 26 | }); 27 | this.emitFile(filename, buffer); 28 | return filename; 29 | } -------------------------------------------------------------------------------- /5. 性能优化/5-5. 手动分包/webpack.config.js: -------------------------------------------------------------------------------- 1 | const HtmlWebpackPlugin = require("html-webpack-plugin"); 2 | const { CleanWebpackPlugin } = require("clean-webpack-plugin"); 3 | const webpack = require("webpack"); 4 | 5 | module.exports = { 6 | mode: "development", 7 | devtool: "source-map", 8 | entry: { 9 | main: "./src/index.js", 10 | other: "./src/other.js" 11 | }, 12 | output: { 13 | filename: "[name].[hash:5].js" 14 | }, 15 | plugins: [ 16 | new CleanWebpackPlugin({ 17 | // 要清除的文件或目录 18 | // 排除掉dll目录本身和它里面的文件 19 | cleanOnceBeforeBuildPatterns: ["**/*", "!dll", "!dll/*"] 20 | }), 21 | new HtmlWebpackPlugin({ 22 | template: "./public/index.html" 23 | }), 24 | new webpack.DllReferencePlugin({ 25 | manifest: require("./dll/jquery.manifest.json") 26 | }), 27 | new webpack.DllReferencePlugin({ 28 | manifest: require("./dll/lodash.manifest.json") 29 | }) 30 | ] 31 | }; 32 | -------------------------------------------------------------------------------- /1. webpack核心功能/1-16. 区分环境/dist/scripts/main-b1728.js: -------------------------------------------------------------------------------- 1 | !function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t){}]); -------------------------------------------------------------------------------- /3. css工程化/3-5. css module/webpack.config.js: -------------------------------------------------------------------------------- 1 | const HtmlWebpackPlugin = require('html-webpack-plugin') 2 | module.exports = { 3 | mode: "development", 4 | devtool: "source-map", 5 | module: { 6 | rules: [ 7 | { 8 | // test: /\.css$/, use: ["style-loader", { 9 | // loader: "css-loader", 10 | // options: { 11 | // // modules: { 12 | // // localIdentName: "[local]-[hash:5]" 13 | // // } 14 | // modules:true 15 | // } 16 | // }] 17 | test: /\.css$/, use:["style-loader", "css-loader?modules"] 18 | } 19 | ] 20 | }, 21 | plugins: [ 22 | new HtmlWebpackPlugin({ 23 | template: "./public/index.html" 24 | }) 25 | ], 26 | devServer: { 27 | open: true 28 | } 29 | } -------------------------------------------------------------------------------- /1. webpack核心功能/1-7. devtool配置/课件.md: -------------------------------------------------------------------------------- 1 | # devtool 配置 {ignore} 2 | 3 | [toc] 4 | 5 | ## source map 源码地图 6 | 7 | > 本小节的知识与 webpack 无关 8 | 9 | 前端发展到现阶段，很多时候都不会直接运行源代码，可能需要对源代码进行合并、压缩、转换等操作，真正运行的是转换后的代码 10 | 11 | ![](assets/2020-01-08-16-38-26.png) 12 | 13 | 这就给调试带来了困难，因为当运行发生错误的时候，我们更加希望能看到源代码中的错误，而不是转换后代码的错误 14 | 15 | > jquery压缩后的代码：https://code.jquery.com/jquery-3.4.1.min.js 16 | 17 | 为了解决这一问题，chrome浏览器率先支持了source map，其他浏览器纷纷效仿，目前，几乎所有新版浏览器都支持了source map 18 | 19 | source map实际上是一个配置，配置中不仅记录了所有源码内容，还记录了和转换后的代码的对应关系 20 | 21 | 下面是浏览器处理source map的原理 22 | 23 | ![](assets/2020-01-08-16-58-06.png) 24 | 25 | ![](assets/2020-01-08-17-01-13.png) 26 | 27 | **最佳实践**： 28 | 29 | 1. source map 应在开发环境中使用，作为一种调试手段 30 | 2. source map 不应该在生产环境中使用，source map的文件一般较大，不仅会导致额外的网络传输，还容易暴露原始代码。即便要在生产环境中使用source map，用于调试真实的代码运行问题，也要做出一些处理规避网络传输和代码暴露的问题。 31 | 32 | ## webpack中的source map 33 | 34 | 使用 webpack 编译后的代码难以调试，可以通过 devtool 配置来**优化调试体验** 35 | 36 | 具体的配置见文档：https://www.webpackjs.com/configuration/devtool/ -------------------------------------------------------------------------------- /2. 常用扩展/2-4. 开发服务器/课件.md: -------------------------------------------------------------------------------- 1 | # 开发服务器 2 | 3 | 在**开发阶段**，目前遇到的问题是打包、运行、调试过程过于繁琐，回顾一下我们的操作流程： 4 | 5 | 1. 编写代码 6 | 2. 控制台运行命令完成打包 7 | 3. 打开页面查看效果 8 | 4. 继续编写代码，回到步骤2 9 | 10 | 并且，我们往往希望把最终生成的代码和页面部署到服务器上，来模拟真实环境 11 | 12 | 为了解决这些问题，webpack官方制作了一个单独的库：**webpack-dev-server** 13 | 14 | 它**既不是plugin也不是loader** 15 | 16 | 先来看看它怎么用 17 | 18 | 1. 安装 19 | 2. 执行```webpack-dev-server```命令 20 | 21 | ```webpack-dev-server```命令几乎支持所有的webpack命令参数，如```--config```、```-env```等等，你可以把它当作webpack命令使用 22 | 23 | 这个命令是专门为开发阶段服务的，真正部署的时候还是得使用webpack命令 24 | 25 | 当我们执行```webpack-dev-server```命令后，它做了以下操作： 26 | 27 | 1. 内部执行webpack命令，传递命令参数 28 | 2. 开启watch 29 | 3. 注册hooks：类似于plugin，webpack-dev-server会向webpack中注册一些钩子函数，主要功能如下： 30 | 1. 将资源列表（aseets）保存起来 31 | 2. 禁止webpack输出文件 32 | 4. 用express开启一个服务器，监听某个端口，当请求到达后，根据请求的路径，给予相应的资源内容 33 | 34 | **配置** 35 | 36 | 针对webpack-dev-server的配置，参考：https://www.webpackjs.com/configuration/dev-server/ 37 | 38 | 常见配置有： 39 | 40 | - port：配置监听端口 41 | - proxy：配置代理，常用于跨域访问 42 | - stats：配置控制台输出内容 -------------------------------------------------------------------------------- /1. webpack核心功能/1-7. devtool配置/dist/main.js: -------------------------------------------------------------------------------- 1 | !function(e){var n={};function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:r})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(t.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var o in e)t.d(r,o,function(n){return e[n]}.bind(null,o));return r},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="",t(t.s=0)}([function(e,n,t){t(1),console.log("index module")},function(e,n){null.abc(),console.log("a module")}]); 2 | -------------------------------------------------------------------------------- /3. css工程化/3-3. BEM/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /1. webpack核心功能/1-5. 编译结果分析/dist/main.js: -------------------------------------------------------------------------------- 1 | !function(e){var n={};function t(o){if(n[o])return n[o].exports;var r=n[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,t),r.l=!0,r.exports}t.m=e,t.c=n,t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:o})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(t.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var r in e)t.d(o,r,function(n){return e[n]}.bind(null,r));return o},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="",t(t.s=0)}([function(e,n,t){console.log("index module");var o=t(1);o.abc(),console.log(o)},function(e,n){console.log("module a"),e.exports="a"}]); -------------------------------------------------------------------------------- /5. 性能优化/5-7. 代码压缩/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { CleanWebpackPlugin } = require("clean-webpack-plugin"); 2 | const MiniCssExtractPlugin = require("mini-css-extract-plugin"); 3 | const HtmlWebpackPlugin = require("html-webpack-plugin"); 4 | const TerserPlugin = require("terser-webpack-plugin") 5 | const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); 6 | module.exports = { 7 | mode: "production", 8 | module: { 9 | rules: [ 10 | { test: /\.css$/, use: [MiniCssExtractPlugin.loader, "css-loader"] } 11 | ] 12 | }, 13 | optimization: { 14 | // 是否要启用压缩，默认情况下，生产环境会自动开启 15 | // minimize: true, 16 | minimizer: [ 17 | // 压缩时使用的插件，可以有多个 18 | new TerserPlugin(), 19 | new OptimizeCSSAssetsPlugin() 20 | ] 21 | }, 22 | plugins: [ 23 | new CleanWebpackPlugin(), 24 | new MiniCssExtractPlugin({ 25 | filename: "[name].[hash:5].css" 26 | }), 27 | new HtmlWebpackPlugin() 28 | ], 29 | stats: { 30 | colors: true, 31 | chunks: false, 32 | modules: false 33 | } 34 | }; 35 | -------------------------------------------------------------------------------- /2. 常用扩展/2-7. webpack内置插件/课件.md: -------------------------------------------------------------------------------- 1 | # webpack内置插件 {ignore} 2 | 3 | 所有的webpack内置插件都作为webpack的静态属性存在的，使用下面的方式即可创建一个插件对象 4 | 5 | ```js 6 | const webpack = require("webpack") 7 | 8 | new webpack.插件名(options) 9 | ``` 10 | 11 | ## DefinePlugin 12 | 13 | 全局常量定义插件，使用该插件通常定义一些常量值，例如： 14 | 15 | ```js 16 | new webpack.DefinePlugin({ 17 | PI: `Math.PI`, // PI = Math.PI 18 | VERSION: `"1.0.0"`, // VERSION = "1.0.0" 19 | DOMAIN: JSON.stringify("duyi.com") 20 | }) 21 | ``` 22 | 23 | 这样一来，在源码中，我们可以直接使用插件中提供的常量，当webpack编译完成后，会自动替换为常量的值 24 | 25 | ## BannerPlugin 26 | 27 | 它可以为每个chunk生成的文件头部添加一行注释，一般用于添加作者、公司、版权等信息 28 | 29 | ```js 30 | new webpack.BannerPlugin({ 31 | banner: ` 32 | hash:[hash] 33 | chunkhash:[chunkhash] 34 | name:[name] 35 | author:yuanjin 36 | corporation:duyi 37 | ` 38 | }) 39 | ``` 40 | 41 | ## ProvidePlugin 42 | 43 | 自动加载模块，而不必到处 import 或 require 44 | 45 | ```js 46 | new webpack.ProvidePlugin({ 47 | $: 'jquery', 48 | _: 'lodash' 49 | }) 50 | ``` 51 | 52 | 然后在我们任意源码中： 53 | 54 | ```js 55 | $('#item'); // <= 起作用 56 | _.drop([1, 2, 3], 2); // <= 起作用 57 | ``` -------------------------------------------------------------------------------- /2. 常用扩展/2-8. [练习]区域查询/工程/webpack.base.js: -------------------------------------------------------------------------------- 1 | //公共配置 2 | const path = require("path") 3 | const HtmlWebpackPlugin = require("html-webpack-plugin") 4 | const CopyWebpackPlugin = require("copy-webpack-plugin") 5 | module.exports = { 6 | entry: { 7 | list: "./src/list/index.js", 8 | detail: "./src/detail/index.js" 9 | }, 10 | output: { 11 | filename: "scripts/[name].[chunkhash:5].js" 12 | }, 13 | resolve: { 14 | alias: { 15 | "@": path.resolve(__dirname, "src") 16 | } 17 | }, 18 | stats: { 19 | modules: false, 20 | colors: true 21 | }, 22 | plugins: [ 23 | new HtmlWebpackPlugin({ 24 | template: "./public/list.html", 25 | filename: "list.html", 26 | chunks: ["list"] 27 | }), 28 | new HtmlWebpackPlugin({ 29 | template: "./public/detail.html", 30 | filename: "detail.html", 31 | chunks: ["detail"] 32 | }), 33 | new CopyWebpackPlugin([ 34 | { from: './public', to: './' } 35 | ]) 36 | ] 37 | } -------------------------------------------------------------------------------- /1. webpack核心功能/1-4. [练习]酷炫的数字查找特效/src/page/appendNumber.js: -------------------------------------------------------------------------------- 1 | import radColor from "../util/radColor" 2 | import { getRandom } from "../util/radColor" 3 | import $ from "jquery"; 4 | 5 | var divContainer = $("#divContainer"); 6 | var divCenter = $("#divCenter"); 7 | 8 | export default function (n, isPrime) { 9 | var span = $("").text(n); 10 | if (isPrime) { 11 | var color = radColor(); 12 | span.css("color", color); 13 | createCenterPrimeNumber(n, color) 14 | } 15 | divContainer.append(span); 16 | //产生中间的数字 17 | createCenterNumber(n); 18 | } 19 | 20 | function createCenterNumber(n) { 21 | divCenter.text(n) 22 | } 23 | 24 | /** 25 | * 在中间产生一个素数 26 | * @param {*} n 27 | */ 28 | function createCenterPrimeNumber(n, color) { 29 | var div = $("
    ").addClass("center").css("color", color).text(n); 30 | $("body").append(div); 31 | //加入了div后，强行让页面重新渲染 32 | getComputedStyle(div[0]).left; //只要读取某个元素的位置或尺寸信息，则会导致浏览器重新渲染 reflow 33 | div.css("transform", `translate(${getRandom(-200, 200)}px, ${getRandom(-200, 200)}px)`).css("opacity", 0) 34 | 35 | } -------------------------------------------------------------------------------- /2. 常用扩展/2-6. 解决路径问题/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { CleanWebpackPlugin } = require("clean-webpack-plugin") 2 | const HtmlWebpackPlugin = require('html-webpack-plugin') 3 | 4 | module.exports = { 5 | mode: "development", 6 | devtool: "source-map", 7 | output: { 8 | filename: "scripts/[name].[chunkhash:5].js", 9 | publicPath: "/" 10 | }, 11 | module: { 12 | rules: [ 13 | { 14 | test: /\.(png)|(gif)|(jpg)$/, 15 | use: [{ 16 | loader: "file-loader", 17 | options: { 18 | name: "imgs/[name].[hash:5].[ext]" 19 | } 20 | }] 21 | } 22 | ] 23 | }, 24 | plugins: [ 25 | new CleanWebpackPlugin(), 26 | new HtmlWebpackPlugin({ 27 | template: "./public/index.html", 28 | filename: "html/index.html" 29 | }) 30 | ], 31 | devServer: { 32 | open: true, 33 | openPage: "html/index.html", 34 | }, 35 | stats: { 36 | modules: false, 37 | colors: true 38 | } 39 | } -------------------------------------------------------------------------------- /1. webpack核心功能/1-2. webpack的安装和使用/课件.md: -------------------------------------------------------------------------------- 1 | # webpack的安装和使用 {ignore} 2 | 3 | [toc] 4 | 5 | > webpack官网：https://www.webpackjs.com/ 6 | > 目前的最新版本：webpack4 7 | 8 | ## webpack简介 9 | 10 | webpack是基于模块化的打包（构建）工具，它把一切视为模块 11 | 12 | 它通过一个开发时态的入口模块为起点，分析出所有的依赖关系，然后经过一系列的过程（压缩、合并），最终生成运行时态的文件。 13 | 14 | webpack的特点： 15 | 16 | - **为前端工程化而生**：webpack致力于解决前端工程化，特别是浏览器端工程化中遇到的问题，让开发者集中注意力编写业务代码，而把工程化过程中的问题全部交给webpack来处理 17 | - **简单易用**：支持零配置，可以不用写任何一行额外的代码就使用webpack 18 | - **强大的生态**：webpack是非常灵活、可以扩展的，webpack本身的功能并不多，但它提供了一些可以扩展其功能的机制，使得一些第三方库可以融于到webpack中 19 | - **基于nodejs**：由于webpack在构建的过程中需要读取文件，因此它是运行在node环境中的 20 | - **基于模块化**：webpack在构建过程中要分析依赖关系，方式是通过模块化导入语句进行分析的，它支持各种模块化标准，包括但不限于CommonJS、ES6 Module 21 | 22 | ## webpack的安装 23 | 24 | webpack通过npm安装，它提供了两个包： 25 | 26 | - webpack：核心包，包含了webpack构建过程中要用到的所有api 27 | - webpack-cli：提供一个简单的cli命令，它调用了webpack核心包的api，来完成构建过程 28 | 29 | 安装方式： 30 | 31 | - 全局安装：可以全局使用webpack命令，但是无法为不同项目对应不同的webpack版本 32 | - **本地安装**：推荐，每个项目都使用自己的webpack版本进行构建 33 | 34 | ## 使用 35 | 36 | ```shell 37 | webpack 38 | ``` 39 | 40 | 默认情况下，webpack会以```./src/index.js```作为入口文件分析依赖关系，打包到```./dist/main.js```文件中 41 | 42 | 通过--mode选项可以控制webpack的打包结果的运行环境 -------------------------------------------------------------------------------- /4. js兼容性/4-6. [扩展]async和await的转换/target.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | function asyncGeneratorStep(gen, resolve, reject, _next, arg) { 4 | try { 5 | var info = gen.next(arg); 6 | var value = info.value; 7 | } catch (error) { 8 | reject(error); 9 | return; 10 | } 11 | 12 | if (info.done) { 13 | resolve(value); 14 | } else { 15 | Promise.resolve(value).then(data => { 16 | _next(data); 17 | }); 18 | } 19 | } 20 | 21 | 22 | function A() { 23 | return new Promise(function (resolve) { 24 | setTimeout(function () { 25 | resolve(3); 26 | }, 1000); 27 | }); 28 | } 29 | 30 | function B() { 31 | var fn = function* () { 32 | const b = yield A(); 33 | const c = yield A(); 34 | return b + c; 35 | }; 36 | return new Promise(function (resolve, reject) { 37 | var gen = fn(); 38 | function _next(value) { 39 | asyncGeneratorStep(gen, resolve, reject, _next, value); 40 | } 41 | _next(undefined); 42 | }); 43 | } 44 | 45 | B().then(function (data) { 46 | return console.log(data); 47 | }); -------------------------------------------------------------------------------- /2. 常用扩展/2-5. 普通文件处理/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { CleanWebpackPlugin } = require("clean-webpack-plugin") 2 | const HtmlWebpackPlugin = require('html-webpack-plugin') 3 | 4 | module.exports = { 5 | mode: "development", 6 | devtool: "source-map", 7 | output: { 8 | filename: "scripts/[name].[chunkhash:5].js" 9 | }, 10 | module: { 11 | rules: [ 12 | { 13 | test: /\.(png)|(gif)|(jpg)$/, 14 | use: [{ 15 | loader: "url-loader", 16 | options: { 17 | // limit: false //不限制任何大小，所有经过loader的文件进行base64编码返回 18 | limit: 10 * 1024, //只要文件不超过 100*1024 字节，则使用base64编码，否则，交给file-loader进行处理 19 | name: "imgs/[name].[hash:5].[ext]" 20 | } 21 | }] 22 | } 23 | ] 24 | }, 25 | plugins: [ 26 | new CleanWebpackPlugin(), 27 | new HtmlWebpackPlugin({ 28 | template: "./public/index.html" 29 | }) 30 | ], 31 | devServer: { 32 | open: true 33 | }, 34 | stats: { 35 | modules: false, 36 | colors: true 37 | } 38 | } -------------------------------------------------------------------------------- /5. 性能优化/5-7. 代码压缩/课件.md: -------------------------------------------------------------------------------- 1 | # 代码压缩 {ignore} 2 | 3 | # 前言 4 | 5 | 1. **为什么要进行代码压缩** 6 | 7 | 减少代码体积；破坏代码的可读性，提升破解成本； 8 | 9 | 2. **什么时候要进行代码压缩** 10 | 11 | 生产环境 12 | 13 | 3. **使用什么压缩工具** 14 | 15 | 目前最流行的代码压缩工具主要有两个：`UglifyJs`和`Terser` 16 | 17 | `UglifyJs`是一个传统的代码压缩工具，已存在多年，曾经是前端应用的必备工具，但由于它不支持`ES6`语法，所以目前的流行度已有所下降。 18 | 19 | `Terser`是一个新起的代码压缩工具，支持`ES6+`语法，因此被很多构建工具内置使用。`webpack`安装后会内置`Terser`，当启用生产环境后即可用其进行代码压缩。 20 | 21 | 因此，我们选择`Terser` 22 | 23 | 24 | **关于副作用 side effect** 25 | 26 | 副作用：函数运行过程中，可能会对外部环境造成影响的功能 27 | 28 | 如果函数中包含以下代码，该函数叫做副作用函数: 29 | 30 | - 异步代码 31 | - localStorage 32 | - 对外部数据的修改 33 | 34 | 如果一个函数没有副作用，同时，函数的返回结果仅依赖参数，则该函数叫做纯函数(pure function) 35 | 36 | # Terser 37 | 38 | 在`Terser`的官网可尝试它的压缩效果 39 | 40 | > Terser官网：https://terser.org/ 41 | 42 | # webpack+Terser 43 | 44 | webpack自动集成了Terser 45 | 46 | 如果你想更改、添加压缩工具，又或者是想对Terser进行配置，使用下面的webpack配置即可 47 | 48 | ```js 49 | const TerserPlugin = require('terser-webpack-plugin'); 50 | const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); 51 | module.exports = { 52 | optimization: { 53 | // 是否要启用压缩，默认情况下，生产环境会自动开启 54 | minimize: true, 55 | minimizer: [ // 压缩时使用的插件，可以有多个 56 | new TerserPlugin(), 57 | new OptimizeCSSAssetsPlugin() 58 | ], 59 | }, 60 | }; 61 | `` -------------------------------------------------------------------------------- /3. css工程化/3-10. 抽离css文件/webpack.config.js: -------------------------------------------------------------------------------- 1 | const HtmlWebpackPlugin = require("html-webpack-plugin") 2 | var { CleanWebpackPlugin } = require("clean-webpack-plugin") 3 | const MiniCssExtractPlugin = require("mini-css-extract-plugin") 4 | module.exports = { 5 | mode: "development", 6 | entry: { 7 | main: "./src/index.js", 8 | other: "./src/other.js" 9 | }, 10 | output: { 11 | filename: "js/[name].[chunkhash:5].js", 12 | publicPath: "/" 13 | }, 14 | module: { 15 | rules: [ 16 | { 17 | test: /\.css$/, use: [MiniCssExtractPlugin.loader, "css-loader?modules"] 18 | }, 19 | { 20 | test: /\.jpg$/, use: { 21 | loader: "file-loader", 22 | options: { 23 | name: "img/[hash:5].[ext]" 24 | } 25 | } 26 | } 27 | ] 28 | }, 29 | devServer: { 30 | open: true 31 | }, 32 | plugins: [ 33 | new CleanWebpackPlugin(), 34 | new HtmlWebpackPlugin({ 35 | template: "./public/index.html" 36 | }), 37 | new MiniCssExtractPlugin({ 38 | filename: "css/[name].[contenthash:5].css" 39 | }) 40 | ] 41 | } -------------------------------------------------------------------------------- /4. js兼容性/4-1. babel的安装和使用/课件.md: -------------------------------------------------------------------------------- 1 | # babel的安装和使用 {ignore} 2 | 3 | > 官网：https://babeljs.io/ 4 | > 民间中文网：https://www.babeljs.cn/ 5 | 6 | ## babel简介 7 | 8 | babel一词来自于希伯来语，直译为巴别塔 9 | 10 | ![](assets/2020-02-07-10-12-01.png) 11 | 12 | 巴别塔象征的统一的国度、统一的语言 13 | 14 | 而今天的JS世界缺少一座巴别塔，不同版本的浏览器能识别的ES标准并不相同，就导致了开发者面对不同版本的浏览器要使用不同的语言，和古巴比伦一样，前端开发也面临着这样的困境。 15 | 16 | babel的出现，就是用于解决这样的问题，它是一个编译器，可以把不同标准书写的语言，编译为统一的、能被各种浏览器识别的语言 17 | 18 | ![](assets/2020-02-07-10-25-56.png) 19 | 20 | 由于语言的转换工作灵活多样，babel的做法和postcss、webpack差不多，它本身仅提供一些分析功能，真正的转换需要依托于插件完成 21 | 22 | ![](assets/2020-02-07-10-27-30.png) 23 | 24 | ## babel的安装 25 | 26 | babel可以和构建工具联合使用，也可以独立使用 27 | 28 | 如果要独立的使用babel，需要安装下面两个库： 29 | 30 | - @babel/core：babel核心库，提供了编译所需的所有api 31 | - @babel/cli：提供一个命令行工具，调用核心库的api完成编译 32 | 33 | ```shell 34 | npm i -D @babel/core @babel/cli 35 | ``` 36 | 37 | ## babel的使用 38 | 39 | @babel/cli的使用极其简单 40 | 41 | 它提供了一个命令`babel` 42 | 43 | ```shell 44 | # 按文件编译 45 | babel 要编译的文件 -o 编辑结果文件 46 | 47 | # 按目录编译 48 | babel 要编译的整个目录 -d 编译结果放置的目录 49 | ``` 50 | 51 | ## babel的配置 52 | 53 | 可以看到，babel本身没有做任何事情，真正的编译要依托于**babel插件**和**babel预设**来完成 54 | 55 | > babel预设和postcss预设含义一样，是多个插件的集合体，用于解决一系列常见的兼容问题 56 | 57 | 如何告诉babel要使用哪些插件或预设呢？需要通过一个配置文件`.babelrc` 58 | 59 | ```json 60 | { 61 | "presets": [], 62 | "plugins": [] 63 | } 64 | ``` -------------------------------------------------------------------------------- /1. webpack核心功能/1-5. 编译结果分析/dist/my-main.js: -------------------------------------------------------------------------------- 1 | //合并两个模块 2 | // ./src/a.js 3 | // ./src/index.js 4 | 5 | (function (modules) { 6 | var moduleExports = {}; //用于缓存模块的导出结果 7 | 8 | //require函数相当于是运行一个模块，得到模块导出结果 9 | function __webpack_require(moduleId) { //moduleId就是模块的路径 10 | if (moduleExports[moduleId]) { 11 | //检查是否有缓存 12 | return moduleExports[moduleId]; 13 | } 14 | 15 | var func = modules[moduleId]; //得到该模块对应的函数 16 | var module = { 17 | exports: {} 18 | } 19 | func(module, module.exports, __webpack_require); //运行模块 20 | var result = module.exports; //得到模块导出的结果 21 | moduleExports[moduleId] = result; //缓存起来 22 | return result; 23 | } 24 | 25 | //执行入口模块 26 | return __webpack_require("./src/index.js"); //require函数相当于是运行一个模块，得到模块导出结果 27 | })({ //该对象保存了所有的模块，以及模块对应的代码 28 | "./src/a.js": function (module, exports) { 29 | eval("console.log(\"module a\")\nmodule.exports = \"a\";\n //# sourceURL=webpack:///./src/a.js") 30 | }, 31 | "./src/index.js": function (module, exports, __webpack_require) { 32 | eval("console.log(\"index module\")\nvar a = __webpack_require(\"./src/a.js\")\na.abc();\nconsole.log(a)\n //# sourceURL=webpack:///./src/index.js") 33 | 34 | } 35 | }); -------------------------------------------------------------------------------- /5. 性能优化/5-6. 自动分包/webpack.config.js: -------------------------------------------------------------------------------- 1 | const { CleanWebpackPlugin } = require("clean-webpack-plugin"); 2 | const MiniCssExtractPlugin = require("mini-css-extract-plugin"); 3 | const HtmlWebpackPlugin = require("html-webpack-plugin") 4 | 5 | module.exports = { 6 | mode: "production", 7 | entry: { 8 | page1: "./src/page1", 9 | page2: "./src/page2" 10 | }, 11 | output: { 12 | filename: "[name].[hash:5].js" 13 | }, 14 | optimization: { 15 | splitChunks: { 16 | //分包配置 17 | chunks: "all", 18 | // maxSize: 60000 19 | // automaticNameDelimiter: ".", 20 | // minChunks: 1, 21 | // minSize: 0 22 | cacheGroups: { 23 | styles: { 24 | minSize: 0, 25 | test: /\.css$/, 26 | minChunks: 2 27 | } 28 | } 29 | } 30 | }, 31 | module: { 32 | rules: [ 33 | { test: /\.css$/, use: [MiniCssExtractPlugin.loader, "css-loader"] } 34 | ] 35 | }, 36 | plugins: [ 37 | new CleanWebpackPlugin(), 38 | new MiniCssExtractPlugin({ 39 | filename: "[name].[hash:5].css", 40 | chunkFilename: "common.[hash:5].css" 41 | }), 42 | new HtmlWebpackPlugin({ 43 | template:"./public/index.html", 44 | chunks: ["page1"] 45 | }) 46 | ], 47 | stats: { 48 | colors: true, 49 | chunks: false, 50 | modules: false 51 | } 52 | }; 53 | -------------------------------------------------------------------------------- /5. 性能优化/5-4. 热替换/课件.md: -------------------------------------------------------------------------------- 1 | # 热替换 HMR {ignore} 2 | 3 | > 热替换并不能降低构建时间（可能还会稍微增加），但可以降低代码改动到效果呈现的时间 4 | 5 | 当使用`webpack-dev-server`时，考虑代码改动到效果呈现的过程 6 | 7 | ![|400](assets/2020-02-21-14-20-49.png) 8 | 9 | 而使用了热替换后，流程发生了变化 10 | 11 | ![|400](assets/2020-02-21-14-22-32.png) 12 | 13 | # 使用和原理 14 | 15 | 1. 更改配置 16 | 17 | ```js 18 | module.exports = { 19 | devServer:{ 20 | hot:true // 开启HMR 21 | }, 22 | plugins:[ 23 | // 可选 24 | new webpack.HotModuleReplacementPlugin() 25 | ] 26 | } 27 | ``` 28 | 29 | 2. 更改代码 30 | 31 | ```js 32 | // index.js 33 | 34 | if(module.hot){ // 是否开启了热更新 35 | module.hot.accept() // 接受热更新 36 | } 37 | ``` 38 | 39 | 首先，这段代码会参与最终运行！ 40 | 41 | 当开启了热更新后，`webpack-dev-server`会向打包结果中注入`module.hot`属性 42 | 43 | 默认情况下，`webpack-dev-server`不管是否开启了热更新，当重新打包后，都会调用`location.reload`刷新页面 44 | 45 | 但如果运行了`module.hot.accept()`，将改变这一行为 46 | 47 | `module.hot.accept()`的作用是让`webpack-dev-server`通过`socket`管道，把服务器更新的内容发送到浏览器 48 | 49 | ![|300](assets/2020-02-21-14-34-05.png) 50 | 51 | 然后，将结果交给插件`HotModuleReplacementPlugin`注入的代码执行 52 | 53 | 插件`HotModuleReplacementPlugin`会根据覆盖原始代码，然后让代码重新执行 54 | 55 | **所以，热替换发生在代码运行期** 56 | 57 | # 样式热替换 58 | 59 | 对于样式也是可以使用热替换的，但需要使用`style-loader` 60 | 61 | 因为热替换发生时，`HotModuleReplacementPlugin`只会简单的重新运行模块代码 62 | 63 | 因此`style-loader`的代码一运行，就会重新设置`style`元素中的样式 64 | 65 | 而`mini-css-extract-plugin`，由于它生成文件是在**构建期间**，运行期间并会也无法改动文件，因此它对于热替换是无效的 -------------------------------------------------------------------------------- /1. webpack核心功能/1-1. 如何在浏览器端实现模块化/课件.md: -------------------------------------------------------------------------------- 1 | # 如何在浏览器端实现模块化 {ignore} 2 | 3 | [toc] 4 | 5 | ## 课程简介 6 | 7 | 本门课需要的前置知识：ES6、模块化、包管理器、git 8 | 9 | 本门课的讲解特点： 10 | 11 | 1. 合适的深度：webpack使用层面很简单，但原理层面非常复杂 12 | 2. 合适的广度：webpack生态圈极其繁荣，有海量的第三方库可以融入到webpack 13 | 14 | ## 浏览器端的模块化 15 | 16 | 问题： 17 | 18 | - 效率问题：精细的模块划分带来了更多的JS文件，更多的JS文件带来了更多的请求，降低了页面访问效率 19 | - 兼容性问题：浏览器目前仅支持ES6的模块化标准，并且还存在兼容性问题 20 | - 工具问题：浏览器不支持npm下载的第三方包 21 | 22 | 这些仅仅是前端工程化的一个缩影 23 | 24 | 当开发一个具有规模的程序，你将遇到非常多的非业务问题，这些问题包括：执行效率、兼容性、代码的可维护性可扩展性、团队协作、测试等等等等，我们将这些问题称之为工程问题。工程问题与业务无关，但它深刻的影响到开发进度，如果没有一个好的工具解决这些问题，将使得开发进度变得极其缓慢，同时也让开发者陷入技术的泥潭。 25 | 26 | ## 根本原因 27 | 28 | 思考：上面提到的问题，为什么在node端没有那么明显，反而到了浏览器端变得如此严重呢？ 29 | 30 | 答：在node端，运行的JS文件在本地，因此可以本地读取文件，它的效率比浏览器远程传输文件高的多 31 | 32 | **根本原因**：在浏览器端，开发时态（devtime）和运行时态（runtime）的侧重点不一样 33 | 34 | **开发时态，devtime：** 35 | 36 | 1. 模块划分越细越好 37 | 2. 支持多种模块化标准 38 | 3. 支持npm或其他包管理器下载的模块 39 | 4. 能够解决其他工程化的问题 40 | 41 | **运行时态，runtime：** 42 | 43 | 1. 文件越少越好 44 | 2. 文件体积越小越好 45 | 3. 代码内容越乱越好 46 | 4. 所有浏览器都要兼容 47 | 5. 能够解决其他运行时的问题，主要是执行效率问题 48 | 49 | 这种差异在小项目中表现的并不明显，可是一旦项目形成规模，就越来越明显，如果不解决这些问题，前端项目形成规模只能是空谈 50 | 51 | ## 解决办法 52 | 53 | 既然开发时态和运行时态面临的局面有巨大的差异，因此，我们需要有一个工具，这个工具能够让开发者专心的在开发时态写代码，然后利用这个工具将开发时态编写的代码转换为运行时态需要的东西。 54 | 55 | 这样的工具，叫做**构建工具** 56 | 57 | ![](assets/2020-01-07-05-06-11.png) 58 | 59 | 这样一来，开发者就可以专注于开发时态的代码结构，而不用担心运行时态遇到的问题了。 60 | 61 | ## 常见的构建工具 62 | 63 | - **webpack** 64 | - grunt 65 | - gulp 66 | - browserify 67 | - fis 68 | - 其他 -------------------------------------------------------------------------------- /4. js兼容性/4-3. babel插件/课件.md: -------------------------------------------------------------------------------- 1 | # babel插件 {ignore} 2 | 3 | > 上节课补充：@babel/polyfill 已过时，目前被`core-js`和`generator-runtime`所取代 4 | 5 | 除了预设可以转换代码之外，插件也可以转换代码，它们的顺序是： 6 | 7 | - 插件在 Presets 前运行。 8 | - 插件顺序从前往后排列。 9 | - Preset 顺序是颠倒的（从后往前）。 10 | 11 | 通常情况下，`@babel/preset-env`只转换那些已经形成正式标准的语法，对于某些处于早期阶段、还没有确定的语法不做转换。 12 | 13 | 如果要转换这些语法，就要单独使用插件 14 | 15 | 下面随便列举一些插件 16 | 17 | ## `@babel/plugin-proposal-class-properties` 18 | 19 | 该插件可以让你在类中书写初始化字段 20 | 21 | ```js 22 | class A { 23 | a = 1; 24 | constructor(){ 25 | this.b = 3; 26 | } 27 | } 28 | ``` 29 | 30 | ## `@babel/plugin-proposal-function-bind` 31 | 32 | 该插件可以让你轻松的为某个方法绑定this 33 | 34 | ```js 35 | function Print() { 36 | console.log(this.loginId); 37 | } 38 | 39 | const obj = { 40 | loginId: "abc" 41 | }; 42 | 43 | obj::Print(); //相当于：Print.call(obj); 44 | ``` 45 | 46 | > 遗憾的是，目前vscode无法识别该语法，会在代码中报错，虽然并不会有什么实际性的危害，但是影响观感 47 | 48 | ## `@babel/plugin-proposal-optional-chaining` 49 | 50 | ```js 51 | const obj = { 52 | foo: { 53 | bar: { 54 | baz: 42, 55 | }, 56 | }, 57 | }; 58 | 59 | const baz = obj?.foo?.bar?.baz; // 42 60 | 61 | const safe = obj?.qux?.baz; // undefined 62 | ``` 63 | 64 | ## `babel-plugin-transform-remove-console` 65 | 66 | 该插件会移除源码中的控制台输出语句 67 | 68 | ```js 69 | console.log("foo"); 70 | console.error("bar"); 71 | ``` 72 | 73 | 编译后 74 | 75 | ```js 76 | 77 | ``` 78 | 79 | ## `@babel/plugin-transform-runtime` 80 | 81 | 用于提供一些公共的API，这些API会帮助代码转换 -------------------------------------------------------------------------------- /5. 性能优化/5-3. 优化loader性能/md/parser.js: -------------------------------------------------------------------------------- 1 | const scripts = ` 2 | 17 | `; 18 | var fs = require("fs"); 19 | module.exports = { 20 | onWillParseMarkdown: function(markdown) { 21 | return new Promise((resolve, reject) => { 22 | const reg = /\!\[(.*)\]\((\S+)\)/gm; 23 | markdown = markdown.replace(reg, function(match, g1, g2) { 24 | var width = "100%"; 25 | if (g1) { 26 | var w = g1.split("|"); 27 | if (w.length > 1) { 28 | width = w[1] + "px"; 29 | g1 = w[0]; 30 | } 31 | } 32 | return ` 33 |

    34 | ${g1} 35 |

    36 |

    37 | ${g1} 38 |

    39 | `; 40 | }); 41 | resolve(markdown); 42 | }); 43 | }, 44 | onDidParseMarkdown: function(html) { 45 | return new Promise((resolve, reject) => { 46 | return resolve(scripts + html); 47 | }); 48 | } 49 | }; 50 | -------------------------------------------------------------------------------- /3. css工程化/3-6. 预编译器less/课件.md: -------------------------------------------------------------------------------- 1 | # CSS预编译器 {ignore} 2 | 3 | ## 基本原理 4 | 5 | 编写css时，受限于css语言本身，常常难以处理一些问题： 6 | 7 | - 重复的样式值：例如常用颜色、常用尺寸 8 | - 重复的代码段：例如绝对定位居中、清除浮动 9 | - 重复的嵌套书写 10 | 11 | 由于官方迟迟不对css语言本身做出改进，一些第三方机构开始想办法来解决这些问题 12 | 13 | 其中一种方案，便是预编译器 14 | 15 | 预编译器的原理很简单，即使用一种更加优雅的方式来书写样式代码，通过一个编译器，将其转换为可被浏览器识别的传统css代码 16 | 17 | ![](assets/2020-02-03-11-48-45.png) 18 | 19 | 目前，最流行的预编译器有**LESS**和**SASS**，由于它们两者特别相似，因此仅学习一种即可（本课程学习LESS） 20 | 21 | ![](assets/2020-02-03-11-50-05.png) 22 | 23 | > less官网：http://lesscss.org/ 24 | > less中文文档1（非官方）：http://lesscss.cn/ 25 | > less中文文档2（非官方）：https://less.bootcss.com/ 26 | > sass官网：https://sass-lang.com/ 27 | > sass中文文档1（非官方）：https://www.sass.hk/ 28 | > sass中文文档2（非官方）：https://sass.bootcss.com/ 29 | 30 | ## LESS的安装和使用 31 | 32 | 从原理可知，要使用LESS，必须要安装LESS编译器 33 | 34 | LESS编译器是基于node开发的，可以通过npm下载安装 35 | 36 | ```shell 37 | npm i -D less 38 | ``` 39 | 40 | 安装好了less之后，它提供了一个CLI工具`lessc`，通过该工具即可完成编译 41 | 42 | ```shell 43 | lessc less代码文件 编译后的文件 44 | ``` 45 | 46 | 试一试: 47 | 48 | 新建一个`index.less`文件，编写内容如下： 49 | 50 | ```less 51 | // less代码 52 | @red: #f40; 53 | 54 | .redcolor { 55 | color: @red; 56 | } 57 | ``` 58 | 59 | 运行命令： 60 | 61 | ```shell 62 | lessc index.less index.css 63 | ``` 64 | 65 | 可以看到编译之后的代码： 66 | 67 | ```css 68 | .redcolor { 69 | color: #f40; 70 | } 71 | ``` 72 | 73 | ## LESS的基本使用 74 | 75 | 具体的使用见文档：https://less.bootcss.com/ 76 | 77 | - 变量 78 | - 混合 79 | - 嵌套 80 | - 运算 81 | - 函数 82 | - 作用域 83 | - 注释 84 | - 导入 -------------------------------------------------------------------------------- /4. js兼容性/4-2. babel预设/课件.md: -------------------------------------------------------------------------------- 1 | # babel预设 2 | 3 | babel有多种预设，最常见的预设是`@babel/preset-env` 4 | 5 | `@babel/preset-env`可以让你使用最新的JS语法，而无需针对每种语法转换设置具体的插件 6 | 7 | **配置** 8 | 9 | ```json 10 | { 11 | "presets": [ 12 | "@babel/preset-env" 13 | ] 14 | } 15 | ``` 16 | 17 | **兼容的浏览器** 18 | 19 | `@babel/preset-env`需要根据兼容的浏览器范围来确定如何编译，和postcss一样，可以使用文件`.browserslistrc`来描述浏览器的兼容范围 20 | 21 | ``` 22 | last 3 version 23 | > 1% 24 | not ie <= 8 25 | ``` 26 | 27 | **自身的配置** 28 | 29 | 和`postcss-preset-env`一样，`@babel/preset-env`自身也有一些配置 30 | 31 | > 具体的配置见：https://www.babeljs.cn/docs/babel-preset-env#options 32 | 33 | 配置方式是： 34 | 35 | ```json 36 | { 37 | "presets": [ 38 | ["@babel/preset-env", { 39 | "配置项1": "配置值", 40 | "配置项2": "配置值", 41 | "配置项3": "配置值" 42 | }] 43 | ] 44 | } 45 | ``` 46 | 47 | 其中一个比较常见的配置项是`usebuiltins`，该配置的默认值是false 48 | 49 | 它有什么用呢？由于该预设仅转换新的语法，并不对新的API进行任何处理 50 | 51 | 例如： 52 | 53 | ```js 54 | new Promise(resolve => { 55 | resolve() 56 | }) 57 | ``` 58 | 59 | 转换的结果为 60 | 61 | ```js 62 | new Promise(function (resolve) { 63 | resolve(); 64 | }); 65 | ``` 66 | 67 | 如果遇到没有Promise构造函数的旧版本浏览器，该代码就会报错 68 | 69 | 而配置`usebuiltins`可以在编译结果中注入这些新的API，它的值默认为`false`，表示不注入任何新的API，可以将其设置为`usage`，表示根据API的使用情况，按需导入API 70 | 71 | ```json 72 | { 73 | "presets": [ 74 | ["@babel/preset-env", { 75 | "useBuiltIns": "usage", 76 | "corejs": 3 77 | }] 78 | ] 79 | } 80 | ``` -------------------------------------------------------------------------------- /1. webpack核心功能/1-4. [练习]酷炫的数字查找特效/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 43 | 44 | 45 | 46 |
    47 |
    48 |
    49 |
    50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /1. webpack核心功能/1-11. loader/课件.md: -------------------------------------------------------------------------------- 1 | # loader 2 | 3 | > webpack做的事情，仅仅是分析出各种模块的依赖关系，然后形成资源列表，最终打包生成到指定的文件中。 4 | > 更多的功能需要借助webpack loaders和webpack plugins完成。 5 | 6 | webpack loader： loader本质上是一个函数，它的作用是将某个源码字符串转换成另一个源码字符串返回。 7 | 8 | ![](assets/2020-01-13-10-39-24.png) 9 | 10 | loader函数的将在模块解析的过程中被调用，以得到最终的源码。 11 | 12 | **全流程：** 13 | 14 | ![](assets/2020-01-13-09-28-52.png) 15 | 16 | **chunk中解析模块的流程：** 17 | 18 | ![](assets/2020-01-13-09-29-08.png) 19 | 20 | **chunk中解析模块的更详细流程：** 21 | 22 | ![](assets/2020-01-13-09-35-44.png) 23 | 24 | **处理loaders流程：** 25 | 26 | ![](assets/2020-01-13-10-29-54.png) 27 | 28 | **loader配置：** 29 | 30 | **完整配置** 31 | 32 | ```js 33 | module.exports = { 34 | module: { //针对模块的配置，目前版本只有两个配置，rules、noParse 35 | rules: [ //模块匹配规则，可以存在多个规则 36 | { //每个规则是一个对象 37 | test: /\.js$/, //匹配的模块正则 38 | use: [ //匹配到后应用的规则模块 39 | { //其中一个规则 40 | loader: "模块路径", //loader模块的路径，该字符串会被放置到require中 41 | options: { //向对应loader传递的额外参数 42 | 43 | } 44 | } 45 | ] 46 | } 47 | ] 48 | } 49 | } 50 | ``` 51 | 52 | **简化配置** 53 | 54 | ```js 55 | module.exports = { 56 | module: { //针对模块的配置，目前版本只有两个配置，rules、noParse 57 | rules: [ //模块匹配规则，可以存在多个规则 58 | { //每个规则是一个对象 59 | test: /\.js$/, //匹配的模块正则 60 | use: ["模块路径1", "模块路径2"]//loader模块的路径，该字符串会被放置到require中 61 | } 62 | ] 63 | } 64 | } 65 | ``` -------------------------------------------------------------------------------- /1. webpack核心功能/1-14. plugin/课件.md: -------------------------------------------------------------------------------- 1 | # plugin 2 | 3 | loader的功能定位是转换代码，而一些其他的操作难以使用loader完成，比如： 4 | 5 | - 当webpack生成文件时，顺便多生成一个说明描述文件 6 | - 当webpack编译启动时，控制台输出一句话表示webpack启动了 7 | - 当xxxx时，xxxx 8 | 9 | 这种类似的功能需要把功能嵌入到webpack的编译流程中，而这种事情的实现是依托于plugin的 10 | 11 | ![](assets/2020-01-15-12-45-16.png) 12 | 13 | plugin的**本质**是一个带有apply方法的对象 14 | 15 | ```js 16 | var plugin = { 17 | apply: function(compiler){ 18 | 19 | } 20 | } 21 | ``` 22 | 23 | 通常，习惯上，我们会将该对象写成构造函数的模式 24 | 25 | ```js 26 | class MyPlugin{ 27 | apply(compiler){ 28 | 29 | } 30 | } 31 | 32 | var plugin = new MyPlugin(); 33 | ``` 34 | 35 | 要将插件应用到webpack，需要把插件对象配置到webpack的plugins数组中，如下： 36 | 37 | ```js 38 | module.exports = { 39 | plugins:[ 40 | new MyPlugin() 41 | ] 42 | } 43 | ``` 44 | 45 | apply函数会在初始化阶段，创建好Compiler对象后运行。 46 | 47 | compiler对象是在初始化阶段构建的，整个webpack打包期间只有一个compiler对象，后续完成打包工作的是compiler对象内部创建的compilation 48 | 49 | apply方法会在**创建好compiler对象后调用**，并向方法传入一个compiler对象 50 | 51 | ![](assets/2020-01-15-12-49-26.png) 52 | 53 | compiler对象提供了大量的钩子函数（hooks，可以理解为事件），plugin的开发者可以注册这些钩子函数，参与webpack编译和生成。 54 | 55 | 你可以在apply方法中使用下面的代码注册钩子函数: 56 | 57 | ```js 58 | class MyPlugin{ 59 | apply(compiler){ 60 | compiler.hooks.事件名称.事件类型(name, function(compilation){ 61 | //事件处理函数 62 | }) 63 | } 64 | } 65 | ``` 66 | 67 | **事件名称** 68 | 69 | 即要监听的事件名，即钩子名，所有的钩子：https://www.webpackjs.com/api/compiler-hooks 70 | 71 | **事件类型** 72 | 73 | 这一部分使用的是 Tapable API，这个小型的库是一个专门用于钩子函数监听的库。 74 | 75 | 它提供了一些事件类型： 76 | 77 | - tap：注册一个同步的钩子函数，函数运行完毕则表示事件处理结束 78 | - tapAsync：注册一个基于回调的异步的钩子函数，函数通过调用一个回调表示事件处理结束 79 | - tapPromise：注册一个基于Promise的异步的钩子函数，函数通过返回的Promise进入已决状态表示事件处理结束 80 | 81 | **处理函数** 82 | 83 | 处理函数有一个事件参数```compilation``` -------------------------------------------------------------------------------- /3. css工程化/3-5. css module/课件.md: -------------------------------------------------------------------------------- 1 | # css module {ignore} 2 | 3 | > 通过命名规范来限制类名太过死板，而css in js虽然足够灵活，但是书写不便。 4 | > css module 开辟一种全新的思路来解决类名冲突的问题 5 | 6 | ## 思路 7 | 8 | css module 遵循以下思路解决类名冲突问题： 9 | 10 | 1. css的类名冲突往往发生在大型项目中 11 | 2. 大型项目往往会使用构建工具（webpack等）搭建工程 12 | 3. 构建工具允许将css样式切分为更加精细的模块 13 | 4. 同JS的变量一样，每个css模块文件中难以出现冲突的类名，冲突的类名往往发生在不同的css模块文件中 14 | 5. 只需要保证构建工具在合并样式代码后不会出现类名冲突即可 15 | 16 | ![](assets/2020-01-31-13-54-37.png) 17 | 18 | ## 实现原理 19 | 20 | 在webpack中，作为处理css的css-loader，它实现了css module的思想，要启用css module，需要将css-loader的配置```modules```设置为```true```。 21 | 22 | css-loader的实现方式如下： 23 | 24 | ![](assets/2020-01-31-14-00-56.png) 25 | 26 | 原理极其简单，开启了css module后，css-loader会将样式中的类名进行转换，转换为一个唯一的hash值。 27 | 28 | 由于hash值是根据模块路径和类名生成的，因此，不同的css模块，哪怕具有相同的类名，转换后的hash值也不一样。 29 | 30 | ![](assets/2020-01-31-14-04-11.png) 31 | 32 | ## 如何应用样式 33 | 34 | css module带来了一个新的问题：源代码的类名和最终生成的类名是不一样的，而开发者只知道自己写的源代码中的类名，并不知道最终的类名是什么，那如何应用类名到元素上呢？ 35 | 36 | 为了解决这个问题，css-loader会导出原类名和最终类名的对应关系，该关系是通过一个对象描述的 37 | 38 | ![](assets/2020-01-31-14-08-49.png) 39 | 40 | 这样一来，我们就可以在js代码中获取到css模块导出的结果，从而应用类名了 41 | 42 | style-loader为了我们更加方便的应用类名，会去除掉其他信息，仅暴露对应关系 43 | 44 | ## 其他操作 45 | 46 | ### 全局类名 47 | 48 | 某些类名是全局的、静态的，不需要进行转换，仅需要在类名位置使用一个特殊的语法即可： 49 | 50 | ```css 51 | :global(.main){ 52 | ... 53 | } 54 | ``` 55 | 56 | 使用了global的类名不会进行转换，相反的，没有使用global的类名，表示默认使用了local 57 | 58 | ```css 59 | :local(.main){ 60 | ... 61 | } 62 | ``` 63 | 64 | 使用了local的类名表示局部类名，是可能会造成冲突的类名，会被css module进行转换 65 | 66 | ### 如何控制最终的类名 67 | 68 | 绝大部分情况下，我们都不需要控制最终的类名，因为控制它没有任何意义 69 | 70 | 如果一定要控制最终的类名，需要配置css-loader的```localIdentName``` 71 | 72 | ## 其他注意事项 73 | 74 | - css module往往配合构建工具使用 75 | - css module仅处理顶级类名，尽量不要书写嵌套的类名，也没有这个必要 76 | - css module仅处理类名，不处理其他选择器 77 | - css module还会处理id选择器，不过任何时候都没有使用id选择器的理由 78 | - 使用了css module后，只要能做到让类名望文知意即可，不需要遵守其他任何的命名规范 -------------------------------------------------------------------------------- /2. 常用扩展/2-8. [练习]区域查询/静态页面/css/reset.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, 7 | body, 8 | div, 9 | span, 10 | applet, 11 | object, 12 | iframe, 13 | h1, 14 | h2, 15 | h3, 16 | h4, 17 | h5, 18 | h6, 19 | p, 20 | blockquote, 21 | pre, 22 | a, 23 | abbr, 24 | acronym, 25 | address, 26 | big, 27 | cite, 28 | code, 29 | del, 30 | dfn, 31 | em, 32 | img, 33 | ins, 34 | kbd, 35 | q, 36 | s, 37 | samp, 38 | small, 39 | strike, 40 | strong, 41 | sub, 42 | sup, 43 | tt, 44 | var, 45 | b, 46 | u, 47 | i, 48 | center, 49 | dl, 50 | dt, 51 | dd, 52 | ol, 53 | ul, 54 | li, 55 | fieldset, 56 | form, 57 | label, 58 | legend, 59 | table, 60 | caption, 61 | tbody, 62 | tfoot, 63 | thead, 64 | tr, 65 | th, 66 | td, 67 | article, 68 | aside, 69 | canvas, 70 | details, 71 | embed, 72 | figure, 73 | figcaption, 74 | footer, 75 | header, 76 | hgroup, 77 | menu, 78 | nav, 79 | output, 80 | ruby, 81 | section, 82 | summary, 83 | time, 84 | mark, 85 | audio, 86 | video { 87 | margin: 0; 88 | padding: 0; 89 | border: 0; 90 | font-size: 100%; 91 | font: inherit; 92 | vertical-align: baseline; 93 | } 94 | 95 | /* HTML5 display-role reset for older browsers */ 96 | article, 97 | aside, 98 | details, 99 | figcaption, 100 | figure, 101 | footer, 102 | header, 103 | hgroup, 104 | menu, 105 | nav, 106 | section { 107 | display: block; 108 | } 109 | 110 | body { 111 | line-height: 1; 112 | } 113 | 114 | ol, 115 | ul { 116 | list-style: none; 117 | } 118 | 119 | blockquote, 120 | q { 121 | quotes: none; 122 | } 123 | 124 | blockquote:before, 125 | blockquote:after, 126 | q:before, 127 | q:after { 128 | content: ''; 129 | content: none; 130 | } 131 | 132 | table { 133 | border-collapse: collapse; 134 | border-spacing: 0; 135 | } 136 | 137 | a { 138 | color: inherit; 139 | } -------------------------------------------------------------------------------- /2. 常用扩展/2-8. [练习]区域查询/工程/public/css/reset.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, 7 | body, 8 | div, 9 | span, 10 | applet, 11 | object, 12 | iframe, 13 | h1, 14 | h2, 15 | h3, 16 | h4, 17 | h5, 18 | h6, 19 | p, 20 | blockquote, 21 | pre, 22 | a, 23 | abbr, 24 | acronym, 25 | address, 26 | big, 27 | cite, 28 | code, 29 | del, 30 | dfn, 31 | em, 32 | img, 33 | ins, 34 | kbd, 35 | q, 36 | s, 37 | samp, 38 | small, 39 | strike, 40 | strong, 41 | sub, 42 | sup, 43 | tt, 44 | var, 45 | b, 46 | u, 47 | i, 48 | center, 49 | dl, 50 | dt, 51 | dd, 52 | ol, 53 | ul, 54 | li, 55 | fieldset, 56 | form, 57 | label, 58 | legend, 59 | table, 60 | caption, 61 | tbody, 62 | tfoot, 63 | thead, 64 | tr, 65 | th, 66 | td, 67 | article, 68 | aside, 69 | canvas, 70 | details, 71 | embed, 72 | figure, 73 | figcaption, 74 | footer, 75 | header, 76 | hgroup, 77 | menu, 78 | nav, 79 | output, 80 | ruby, 81 | section, 82 | summary, 83 | time, 84 | mark, 85 | audio, 86 | video { 87 | margin: 0; 88 | padding: 0; 89 | border: 0; 90 | font-size: 100%; 91 | font: inherit; 92 | vertical-align: baseline; 93 | } 94 | 95 | /* HTML5 display-role reset for older browsers */ 96 | article, 97 | aside, 98 | details, 99 | figcaption, 100 | figure, 101 | footer, 102 | header, 103 | hgroup, 104 | menu, 105 | nav, 106 | section { 107 | display: block; 108 | } 109 | 110 | body { 111 | line-height: 1; 112 | } 113 | 114 | ol, 115 | ul { 116 | list-style: none; 117 | } 118 | 119 | blockquote, 120 | q { 121 | quotes: none; 122 | } 123 | 124 | blockquote:before, 125 | blockquote:after, 126 | q:before, 127 | q:after { 128 | content: ''; 129 | content: none; 130 | } 131 | 132 | table { 133 | border-collapse: collapse; 134 | border-spacing: 0; 135 | } 136 | 137 | a { 138 | color: inherit; 139 | } -------------------------------------------------------------------------------- /5. 性能优化/5-3. 优化loader性能/课件.md: -------------------------------------------------------------------------------- 1 | # 优化loader性能 {ignore} 2 | 3 | ## 进一步限制loader的应用范围 4 | 5 | 思路是：对于某些库，不使用loader 6 | 7 | 例如：babel-loader可以转换ES6或更高版本的语法，可是有些库本身就是用ES5语法书写的，不需要转换，使用babel-loader反而会浪费构建时间 8 | 9 | lodash就是这样的一个库 10 | 11 | > lodash是在ES5之前出现的库，使用的是ES3语法 12 | 13 | 通过`module.rule.exclude`或`module.rule.include`，排除或仅包含需要应用loader的场景 14 | 15 | ```js 16 | module.exports = { 17 | module: { 18 | rules: [ 19 | { 20 | test: /\.js$/, 21 | exclude: /lodash/, 22 | use: "babel-loader" 23 | } 24 | ] 25 | } 26 | } 27 | ``` 28 | 29 | 如果暴力一点，甚至可以排除掉`node_modules`目录中的模块，或仅转换`src`目录的模块 30 | 31 | ```js 32 | module.exports = { 33 | module: { 34 | rules: [ 35 | { 36 | test: /\.js$/, 37 | exclude: /node_modules/, 38 | //或 39 | // include: /src/, 40 | use: "babel-loader" 41 | } 42 | ] 43 | } 44 | } 45 | ``` 46 | 47 | > 这种做法是对loader的范围进行进一步的限制，和noParse不冲突，想想看，为什么不冲突 48 | 49 | ## 缓存loader的结果 50 | 51 | 我们可以基于一种假设：如果某个文件内容不变，经过相同的loader解析后，解析后的结果也不变 52 | 53 | 于是，可以将loader的解析结果保存下来，让后续的解析直接使用保存的结果 54 | 55 | `cache-loader`可以实现这样的功能 56 | 57 | ```js 58 | module.exports = { 59 | module: { 60 | rules: [ 61 | { 62 | test: /\.js$/, 63 | use: ['cache-loader', ...loaders] 64 | }, 65 | ], 66 | }, 67 | }; 68 | ``` 69 | 70 | 有趣的是，`cache-loader`放到最前面，却能够决定后续的loader是否运行 71 | 72 | 实际上，loader的运行过程中，还包含一个过程，即`pitch` 73 | 74 | ![](assets/2020-02-21-13-32-36.png) 75 | 76 | `cache-loader`还可以实现各自自定义的配置，具体方式见文档 77 | 78 | ## 为loader的运行开启多线程 79 | 80 | `thread-loader`会开启一个线程池，线程池中包含适量的线程 81 | 82 | 它会把后续的loader放到线程池的线程中运行，以提高构建效率 83 | 84 | 由于后续的loader会放到新的线程中，所以，后续的loader不能： 85 | 86 | - 使用 webpack api 生成文件 87 | - 无法使用自定义的 plugin api 88 | - 无法访问 webpack options 89 | 90 | > 在实际的开发中，可以进行测试，来决定`thread-loader`放到什么位置 91 | 92 | **特别注意**，开启和管理线程需要消耗时间，在小型项目中使用`thread-loader`反而会增加构建时间 -------------------------------------------------------------------------------- /3. css工程化/3-1. css工程化概述/课件.md: -------------------------------------------------------------------------------- 1 | # css工程化概述 {ignore} 2 | 3 | ## css的问题 4 | 5 | ### 类名冲突的问题 6 | 7 | 当你写一个css类的时候，你是写全局的类呢，还是写多个层级选择后的类呢？ 8 | 9 | 你会发现，怎么都不好 10 | 11 | - 过深的层级不利于编写、阅读、压缩、复用 12 | - 过浅的层级容易导致类名冲突 13 | 14 | 一旦样式多起来，这个问题就会变得越发严重，其实归根结底，就是类名冲突不好解决的问题 15 | 16 | ### 重复样式 17 | 18 | 这种问题就更普遍了，一些重复的样式值总是不断的出现在css代码中，维护起来极其困难 19 | 20 | 比如，一个网站的颜色一般就那么几种： 21 | 22 | - primary 23 | - info 24 | - warn 25 | - error 26 | - success 27 | 28 | 如果有更多的颜色，都是从这些色调中自然变化得来，可以想象，这些颜色会到处充斥到诸如背景、文字、边框中，一旦要做颜色调整，是一个非常大的工程 29 | 30 | ### css文件细分问题 31 | 32 | 在大型项目中，css也需要更细的拆分，这样有利于css代码的维护。 33 | 34 | 比如，有一个做轮播图的模块，它不仅需要依赖js功能，还需要依赖css样式，既然依赖的js功能仅关心轮播图，那css样式也应该仅关心轮播图，由此类推，不同的功能依赖不同的css样式、公共样式可以单独抽离，这样就形成了不同于过去的css文件结构：文件更多、拆分的更细 35 | 36 | 而同时，在真实的运行环境下，我们却希望文件越少越好，这种情况和JS遇到的情况是一致的 37 | 38 | 因此，对于css，也需要工程化管理 39 | 40 | 从另一个角度来说，css的工程化会遇到更多的挑战，因为css不像JS，它的语法本身经过这么多年并没有发生多少的变化（css3也仅仅是多了一些属性而已），对于css语法本身的改变也是一个工程化的课题 41 | 42 | ## 如何解决 43 | 44 | 这么多年来，官方一直没有提出方案来解决上述问题 45 | 46 | 一些第三方机构针对不同的问题，提出了自己的解决方案 47 | 48 | ### 解决类名冲突 49 | 50 | 一些第三方机构提出了一些方案来解决该问题，常见的解决方案如下： 51 | 52 | **命名约定** 53 | 54 | 即提供一种命名的标准，来解决冲突，常见的标准有： 55 | 56 | - BEM 57 | - OOCSS 58 | - AMCSS 59 | - SMACSS 60 | - 其他 61 | 62 | **css in js** 63 | 64 | 这种方案非常大胆，它觉得，css语言本身几乎无可救药了，干脆直接用js对象来表示样式，然后把样式直接应用到元素的style中 65 | 66 | 这样一来，css变成了一个一个的对象，就可以完全利用到js语言的优势，你可以： 67 | 68 | - 通过一个函数返回一个样式对象 69 | - 把公共的样式提取到公共模块中返回 70 | - 应用js的各种特性操作对象，比如：混合、提取、拆分 71 | - 更多的花样 72 | 73 | > 这种方案在手机端的React Native中大行其道 74 | 75 | **css module** 76 | 77 | 非常有趣和好用的css模块化方案，编写简单，绝对不重名 78 | 79 | 具体的课程中详细介绍 80 | 81 | ### 解决重复样式的问题 82 | 83 | **css in js** 84 | 85 | 这种方案虽然可以利用js语言解决重复样式值的问题，但由于太过激进，很多习惯写css的开发者编写起来并不是很适应 86 | 87 | **预编译器** 88 | 89 | 有些第三方搞出一套css语言的进化版来解决这个问题，它支持变量、函数等高级语法，然后经过编译器将其编译成为正常的css 90 | 91 | 这种方案特别像构建工具，不过它仅针对css 92 | 93 | 常见的预编译器支持的语言有： 94 | 95 | - less 96 | - sass 97 | 98 | ### 解决css文件细分问题 99 | 100 | 这一部分，就要依靠构建工具，例如webpack来解决了 101 | 102 | 利用一些loader或plugin来打包、合并、压缩css文件 -------------------------------------------------------------------------------- /1. webpack核心功能/1-8. 编译过程/课件.md: -------------------------------------------------------------------------------- 1 | # webpack 编译过程 {ignore} 2 | 3 | [toc] 4 | 5 | webpack 的作用是将源代码编译（构建、打包）成最终代码 6 | 7 | ![](assets/2020-01-09-10-26-15.png) 8 | 9 | 整个过程大致分为三个步骤 10 | 11 | 1. 初始化 12 | 2. 编译 13 | 3. 输出 14 | 15 | ![](assets/2020-01-09-10-53-28.png) 16 | 17 | ## 初始化 18 | 19 | 此阶段，webpack会将**CLI参数**、**配置文件**、**默认配置**进行融合，形成一个最终的配置对象。 20 | 21 | 对配置的处理过程是依托一个第三方库```yargs```完成的 22 | 23 | 此阶段相对比较简单，主要是为接下来的编译阶段做必要的准备 24 | 25 | 目前，可以简单的理解为，初始化阶段主要用于产生一个最终的配置 26 | 27 | ## 编译 28 | 29 | 1. **创建chunk** 30 | 31 | chunk是webpack在内部构建过程中的一个概念，译为```块```，它表示通过某个入口找到的所有依赖的统称。 32 | 33 | 根据入口模块（默认为```./src/index.js```）创建一个chunk 34 | 35 | ![](assets/2020-01-09-11-54-08.png) 36 | 37 | 每个chunk都有至少两个属性： 38 | 39 | - name：默认为main 40 | - id：唯一编号，开发环境和name相同，生产环境是一个数字，从0开始 41 | 42 | 2. **构建所有依赖模块** 43 | 44 | ![](assets/2020-01-09-12-32-38.png) 45 | 46 | > AST在线测试工具：https://astexplorer.net/ 47 | 48 | 简图 49 | 50 | ![](assets/2020-01-09-12-35-05.png) 51 | 52 | 3. **产生chunk assets** 53 | 54 | 在第二步完成后，chunk中会产生一个模块列表，列表中包含了**模块id**和**模块转换后的代码** 55 | 56 | 接下来，webpack会根据配置为chunk生成一个资源列表，即```chunk assets```，资源列表可以理解为是生成到最终文件的文件名和文件内容 57 | 58 | ![](assets/2020-01-09-12-39-16.png) 59 | 60 | > chunk hash是根据所有chunk assets的内容生成的一个hash字符串 61 | > hash：一种算法，具体有很多分类，特点是将一个任意长度的字符串转换为一个固定长度的字符串，而且可以保证原始内容不变，产生的hash字符串就不变 62 | 63 | 简图 64 | 65 | ![](assets/2020-01-09-12-43-52.png) 66 | 67 | 4. **合并chunk assets** 68 | 69 | 将多个chunk的assets合并到一起，并产生一个总的hash 70 | 71 | ![](assets/2020-01-09-12-47-43.png) 72 | 73 | ## 输出 74 | 75 | 此步骤非常简单，webpack将利用node中的fs模块（文件处理模块），根据编译产生的总的assets，生成相应的文件。 76 | 77 | ![](assets/2020-01-09-12-54-34.png) 78 | 79 | ## 总过程 80 | 81 | ![](assets/2020-01-09-15-51-07.png) 82 | 83 | ![](assets/2020-01-09-12-32-38.png) 84 | 85 | **涉及术语** 86 | 87 | 1. module：模块，分割的代码单元，webpack中的模块可以是任何内容的文件，不仅限于JS 88 | 2. chunk：webpack内部构建模块的块，一个chunk中包含多个模块，这些模块是从入口模块通过依赖分析得来的 89 | 3. bundle：chunk构建好模块后会生成chunk的资源清单，清单中的每一项就是一个bundle，可以认为bundle就是最终生成的文件 90 | 4. hash：最终的资源清单所有内容联合生成的hash值 91 | 5. chunkhash：chunk生成的资源清单内容联合生成的hash值 92 | 6. chunkname：chunk的名称，如果没有配置则使用main 93 | 7. id：通常指chunk的唯一编号，如果在开发环境下构建，和chunkname相同；如果是生产环境下构建，则使用一个从0开始的数字进行编号 -------------------------------------------------------------------------------- /5. 性能优化/5-10. ESLint/课件.md: -------------------------------------------------------------------------------- 1 | # ESLint {ignore} 2 | 3 | ESLint是一个针对JS的代码风格**检查**工具，当不满足其要求的风格时，会给予警告或错误 4 | 5 | 官网：https://eslint.org/ 6 | 7 | 民间中文网：https://eslint.bootcss.com/ 8 | 9 | # 使用 10 | 11 | ESLint通常配合编辑器使用 12 | 13 | 1. 在vscode中安装`ESLint` 14 | 15 | 该工具会自动检查工程中的JS文件 16 | 17 | 检查的工作交给`eslint`库，如果当前工程没有，则会去全局库中查找，如果都没有，则无法完成检查 18 | 19 | 另外，检查的依据是`eslint`的配置文件`.eslintrc`，如果找不到工程中的配置文件，也无法完成检查 20 | 21 | 2. 安装`eslint` 22 | 23 | `npm i [-g] eslint` 24 | 25 | 3. 创建配置文件 26 | 27 | 可以通过`eslint`交互式命令创建配置文件 28 | 29 | > 由于windows环境中git窗口对交互式命名支持不是很好，建议使用powershell 30 | 31 | `npx eslint --init` 32 | 33 | > eslint会识别工程中的`.eslintrc.*`文件，也能够识别`package.json`中的`eslintConfig`字段 34 | 35 | # 配置 36 | 37 | ## env 38 | 39 | 配置代码的运行环境 40 | 41 | - browser：代码是否在浏览器环境中运行 42 | - es6：是否启用ES6的全局API，例如`Promise`等 43 | 44 | ## parserOptions 45 | 46 | 该配置指定`eslint`对哪些语法的支持 47 | 48 | - ecmaVersion: 支持的ES语法版本 49 | - sourceType 50 | - script：传统脚本 51 | - module：模块化脚本 52 | 53 | ## parser 54 | 55 | `eslint`的工作原理是先将代码进行解析，然后按照规则进行分析 56 | 57 | `eslint` 默认使用`Espree`作为其解析器，你可以在配置文件中指定一个不同的解析器。 58 | 59 | ## globals 60 | 61 | 配置可以使用的额外的全局变量 62 | 63 | ```json 64 | { 65 | "globals": { 66 | "var1": "readonly", 67 | "var2": "writable" 68 | } 69 | } 70 | ``` 71 | 72 | `eslint`支持注释形式的配置，在代码中使用下面的注释也可以完成配置 73 | 74 | ```js 75 | /* global var1, var2 */ 76 | /* global var3:writable, var4:writable */ 77 | ``` 78 | 79 | ## extends 80 | 81 | 该配置继承自哪里 82 | 83 | 它的值可以是字符串或者数组 84 | 85 | 比如： 86 | 87 | ```json 88 | { 89 | "extends": "eslint:recommended" 90 | } 91 | ``` 92 | 93 | 表示，该配置缺失的位置，使用`eslint`推荐的规则 94 | 95 | ## ignoreFiles 96 | 97 | 排除掉某些不需要验证的文件 98 | 99 | `.eslintignore` 100 | 101 | ``` 102 | dist/**/*.js 103 | node_modules 104 | ``` 105 | 106 | ## rules 107 | 108 | `eslint`规则集 109 | 110 | 每条规则影响某个方面的代码风格 111 | 112 | 每条规则都有下面几个取值： 113 | 114 | - off 或 0 或 false: 关闭该规则的检查 115 | - warn 或 1 或 true：警告，不会导致程序退出 116 | - error 或 2：错误，当被触发的时候，程序会退出 117 | 118 | 除了在配置文件中使用规则外，还可以在注释中使用： 119 | 120 | ```js 121 | /* eslint eqeqeq: "off", curly: "error" */ 122 | ``` 123 | 124 | > https://eslint.bootcss.com/docs/rules/ 125 | 126 | -------------------------------------------------------------------------------- /1. webpack核心功能/1-10. 入口和出口的最佳实践/课件.md: -------------------------------------------------------------------------------- 1 | # 入口和出口的最佳实践 {ignore} 2 | 3 | 具体情况具体分析 4 | 5 | 下面是一些经典场景 6 | 7 | ## 一个页面一个JS 8 | 9 | ![](assets/2020-01-10-12-00-28.png) 10 | 11 | 源码结构 12 | 13 | ``` 14 | |—— src 15 | |—— pageA 页面A的代码目录 16 | |—— index.js 页面A的启动模块 17 | |—— ... 18 | |—— pageB 页面B的代码目录 19 | |—— index.js 页面B的启动模块 20 | |—— ... 21 | |—— pageC 页面C的代码目录 22 | |—— main1.js 页面C的启动模块1 例如：主功能 23 | |—— main2.js 页面C的启动模块2 例如：实现访问统计的额外功能 24 | |—— ... 25 | |—— common 公共代码目录 26 | |—— ... 27 | ``` 28 | 29 | webpack配置 30 | 31 | ```js 32 | module.exports = { 33 | entry:{ 34 | pageA: "./src/pageA/index.js", 35 | pageB: "./src/pageB/index.js", 36 | pageC: ["./src/pageC/main1.js", "./src/pageC/main2.js"] 37 | }, 38 | output:{ 39 | filename:"[name].[chunkhash:5].js" 40 | } 41 | } 42 | ``` 43 | 44 | 这种方式适用于页面之间的功能差异巨大、公共代码较少的情况，这种情况下打包出来的最终代码不会有太多重复 45 | 46 | ## 一个页面多个JS 47 | 48 | ![](assets/2020-01-10-12-38-03.png) 49 | 50 | 源码结构 51 | 52 | ``` 53 | |—— src 54 | |—— pageA 页面A的代码目录 55 | |—— index.js 页面A的启动模块 56 | |—— ... 57 | |—— pageB 页面B的代码目录 58 | |—— index.js 页面B的启动模块 59 | |—— ... 60 | |—— statistics 用于统计访问人数功能目录 61 | |—— index.js 启动模块 62 | |—— ... 63 | |—— common 公共代码目录 64 | |—— ... 65 | ``` 66 | 67 | webpack配置 68 | 69 | ```js 70 | module.exports = { 71 | entry:{ 72 | pageA: "./src/pageA/index.js", 73 | pageB: "./src/pageB/index.js", 74 | statistics: "./src/statistics/index.js" 75 | }, 76 | output:{ 77 | filename:"[name].[chunkhash:5].js" 78 | } 79 | } 80 | ``` 81 | 82 | 这种方式适用于页面之间有一些**独立**、相同的功能，专门使用一个chunk抽离这部分JS有利于浏览器更好的缓存这部分内容。 83 | 84 | > 思考：为什么不使用多启动模块的方式？ 85 | 86 | ## 单页应用 87 | 88 | 所谓单页应用，是指整个网站（或网站的某一个功能块）只有一个页面，页面中的内容全部靠JS创建和控制。 vue和react都是实现单页应用的利器。 89 | 90 | ![](assets/2020-01-10-12-44-13.png) 91 | 92 | 源码结构 93 | 94 | ``` 95 | |—— src 96 | |—— subFunc 子功能目录 97 | |—— ... 98 | |—— subFunc 子功能目录 99 | |—— ... 100 | |—— common 公共代码目录 101 | |—— ... 102 | |—— index.js 103 | ``` 104 | 105 | webpack配置 106 | 107 | ```js 108 | module.exports = { 109 | entry: "./src/index.js", 110 | output:{ 111 | filename:"index.[hash:5].js" 112 | } 113 | } 114 | ``` 115 | 116 | -------------------------------------------------------------------------------- /3. css工程化/3-2. 利用webpack拆分css/课件.md: -------------------------------------------------------------------------------- 1 | # 利用webpack拆分css {ignore} 2 | 3 | 要拆分css，就必须把css当成像js那样的模块；要把css当成模块，就必须有一个构建工具（webpack），它具备合并代码的能力 4 | 5 | 而webpack本身只能读取css文件的内容、将其当作JS代码进行分析，因此，会导致错误 6 | 7 | 于是，就必须有一个loader，能够将css代码转换为js代码 8 | 9 | ## css-loader 10 | 11 | css-loader的作用，就是将css代码转换为js代码 12 | 13 | 它的处理原理极其简单：将css代码作为字符串导出 14 | 15 | 例如： 16 | 17 | ```css 18 | .red{ 19 | color:"#f40"; 20 | } 21 | ``` 22 | 23 | 经过css-loader转换后变成js代码： 24 | 25 | ```js 26 | module.exports = `.red{ 27 | color:"#f40"; 28 | }` 29 | ``` 30 | 31 | > 上面的js代码是经过我简化后的，不代表真实的css-loader的转换后代码，css-loader转换后的代码会有些复杂，同时会导出更多的信息，但核心思想不变 32 | 33 | 再例如： 34 | 35 | ```css 36 | .red{ 37 | color:"#f40"; 38 | background:url("./bg.png") 39 | } 40 | ``` 41 | 42 | 经过css-loader转换后变成js代码： 43 | 44 | ```js 45 | var import1 = require("./bg.png"); 46 | module.exports = `.red{ 47 | color:"#f40"; 48 | background:url("${import1}") 49 | }`; 50 | ``` 51 | 52 | 这样一来，经过webpack的后续处理，会把依赖```./bg.png```添加到模块列表，然后再将代码转换为 53 | 54 | ```js 55 | var import1 = __webpack_require__("./src/bg.png"); 56 | module.exports = `.red{ 57 | color:"#f40"; 58 | background:url("${import1}") 59 | }`; 60 | ``` 61 | 62 | 再例如： 63 | 64 | ```css 65 | @import "./reset.css"; 66 | .red{ 67 | color:"#f40"; 68 | background:url("./bg.png") 69 | } 70 | ``` 71 | 72 | 会转换为： 73 | 74 | ```js 75 | var import1 = require("./reset.css"); 76 | var import2 = require("./bg.png"); 77 | module.exports = `${import1} 78 | .red{ 79 | color:"#f40"; 80 | background:url("${import2}") 81 | }`; 82 | ``` 83 | 84 | 总结，css-loader干了什么： 85 | 86 | 1. 将css文件的内容作为字符串导出 87 | 2. 将css中的其他依赖作为require导入，以便webpack分析依赖 88 | 89 | ## style-loader 90 | 91 | 由于css-loader仅提供了将css转换为字符串导出的能力，剩余的事情要交给其他loader或plugin来处理 92 | 93 | style-loader可以将css-loader转换后的代码进一步处理，将css-loader导出的字符串加入到页面的style元素中 94 | 95 | 例如： 96 | 97 | ```css 98 | .red{ 99 | color:"#f40"; 100 | } 101 | ``` 102 | 103 | 经过css-loader转换后变成js代码： 104 | 105 | ```js 106 | module.exports = `.red{ 107 | color:"#f40"; 108 | }` 109 | ``` 110 | 111 | 经过style-loader转换后变成： 112 | 113 | ```js 114 | module.exports = `.red{ 115 | color:"#f40"; 116 | }` 117 | var style = module.exports; 118 | var styleElem = document.createElement("style"); 119 | styleElem.innerHTML = style; 120 | document.head.appendChild(styleElem); 121 | module.exports = {} 122 | ``` 123 | 124 | > 以上代码均为简化后的代码，并不代表真实的代码 125 | > style-loader有能力避免同一个样式的重复导入 -------------------------------------------------------------------------------- /5. 性能优化/5-8. tree shaking/课件.md: -------------------------------------------------------------------------------- 1 | # tree shaking {ignore} 2 | 3 | > 压缩可以移除模块内部的无效代码 4 | > tree shaking 可以移除模块之间的无效代码 5 | 6 | ![](https://user-gold-cdn.xitu.io/2018/1/4/160bfdcf2a31ce4a?imageslim) 7 | 8 | # 背景 9 | 10 | 某些模块导出的代码并不一定会被用到 11 | 12 | ```js 13 | // myMath.js 14 | export function add(a, b){ 15 | console.log("add") 16 | return a+b; 17 | } 18 | 19 | export function sub(a, b){ 20 | console.log("sub") 21 | return a-b; 22 | } 23 | ``` 24 | 25 | ```js 26 | // index.js 27 | import {add} from "./myMath" 28 | console.log(add(1,2)); 29 | ``` 30 | 31 | tree shaking 用于移除掉不会用到的导出 32 | 33 | # 使用 34 | 35 | `webpack2`开始就支持了`tree shaking` 36 | 37 | 只要是生产环境，`tree shaking`自动开启 38 | 39 | # 原理 40 | 41 | webpack会从入口模块出发寻找依赖关系 42 | 43 | 当解析一个模块时，webpack会根据ES6的模块导入语句来判断，该模块依赖了另一个模块的哪个导出 44 | 45 | webpack之所以选择ES6的模块导入语句，是因为ES6模块有以下特点： 46 | 47 | 1. 导入导出语句只能是顶层语句 48 | 2. import的模块名只能是字符串常量 49 | 3. import绑定的变量是不可变的 50 | 51 | 这些特征都非常有利于分析出稳定的依赖 52 | 53 | 在具体分析依赖时，webpack坚持的原则是：**保证代码正常运行，然后再尽量tree shaking** 54 | 55 | 所以，如果你依赖的是一个导出的对象，由于JS语言的动态特性，以及`webpack`还不够智能，为了保证代码正常运行，它不会移除对象中的任何信息 56 | 57 | 因此，我们在编写代码的时候，**尽量**： 58 | 59 | - 使用`export xxx`导出，而不使用`export default {xxx}`导出 60 | - 使用`import {xxx} from "xxx"`导入，而不使用`import xxx from "xxx"`导入 61 | 62 | 依赖分析完毕后，`webpack`会根据每个模块每个导出是否被使用，标记其他导出为`dead code`，然后交给代码压缩工具处理 63 | 64 | 代码压缩工具最终移除掉那些`dead code`代码 65 | 66 | # 使用第三方库 67 | 68 | 某些第三方库可能使用的是`commonjs`的方式导出，比如`lodash` 69 | 70 | 又或者没有提供普通的ES6方式导出 71 | 72 | 对于这些库，`tree shaking`是无法发挥作用的 73 | 74 | 因此要寻找这些库的`es6`版本，好在很多流行但没有使用的`ES6`的第三方库，都发布了它的`ES6`版本，比如`lodash-es` 75 | 76 | # 作用域分析 77 | 78 | `tree shaking`本身并没有完善的作用域分析，可能导致在一些`dead code`函数中的依赖仍然会被视为依赖 79 | 80 | 插件`webpack-deep-scope-plugin`提供了作用域分析，可解决这些问题 81 | 82 | # 副作用问题 83 | 84 | webpack在`tree shaking`的使用，有一个原则：**一定要保证代码正确运行** 85 | 86 | 在满足该原则的基础上，再来决定如何`tree shaking` 87 | 88 | 因此，当`webpack`无法确定某个模块是否有副作用时，它往往将其视为有副作用 89 | 90 | 因此，某些情况可能并不是我们所想要的 91 | 92 | ```js 93 | //common.js 94 | var n = Math.random(); 95 | 96 | //index.js 97 | import "./common.js" 98 | ``` 99 | 100 | 虽然我们根本没用有`common.js`的导出，但`webpack`担心`common.js`有副作用，如果去掉会影响某些功能 101 | 102 | 如果要解决该问题，就需要标记该文件是没有副作用的 103 | 104 | 在`package.json`中加入`sideEffects` 105 | ```json 106 | { 107 | "sideEffects": false 108 | } 109 | ``` 110 | 111 | 有两种配置方式： 112 | 113 | - false：当前工程中，所有模块都没有副作用。注意，这种写法会影响到某些css文件的导入 114 | - 数组：设置哪些文件拥有副作用，例如：`["!src/common.js"]`，表示只要不是`src/common.js`的文件，都有副作用 115 | 116 | > 这种方式我们一般不处理，通常是一些第三方库在它们自己的`package.json`中标注 117 | 118 | # css tree shaking 119 | 120 | `webpack`无法对`css`完成`tree shaking`，因为`css`跟`es6`没有半毛钱关系 121 | 122 | 因此对`css`的`tree shaking`需要其他插件完成 123 | 124 | 例如：`purgecss-webpack-plugin` 125 | 126 | > 注意：`purgecss-webpack-plugin`对`css module`无能为力 --------------------------------------------------------------------------------