基础 包通过 cdn 引⼊入，不不打⼊入 bundle 中 ·⽅方法：使⽤用 html-webpack- externals-plugin 利利⽤用 SplitChunksPlugin 进⾏行行公共脚本分离 Webpack4 内置的，替代CommonsChunkPlugin插件 chunks 参数说明： module.exports = { optimization: { splitChunks: test: /[\\/]node_modules[\\/]/, priority: -10 } } } } }; · async 异步引⼊入的库进⾏行行分离(默认) · initial 同步引⼊入的库进⾏行行分离 · all 所有引⼊入的库进⾏行行分离(推荐) 利利⽤用 SplitChunksPlugin 分离基础包 test: 匹配出需要分离的包 module.exports = { 要求：必须是 ES6 的语法，CJS 的⽅方式不不⽀支持 · production mode的情况下默认开启 DCE (Dead code elimination) 代码执⾏行行的结果不不会被⽤用到 代码不不会被执⾏行行，不不可到达 代码只会影响死变量量（只写不不读） if (false) { console.log('这段代码永远不会执行’); } Tree-shaking 原理理

⽂文件指纹如何⽣生成 Hash：和整个项⽬目的构建相关，只要项⽬目⽂文件有修改，整个项⽬目构建的 hash 值就会更更改 Chunkhash：和 webpack 打包的 chunk 有关，不不同的 entry 会⽣生成不不同的 chunkhash 值 Contenthash：根据⽂文件内容来定义 hash ，⽂文件内容不不变，则 contenthash 不不变 JS 的⽂文件指纹设置 module.exports

Provider 传递给容器器组件 创建 actions、reducers、store · rootReducer src/reducers/rootReducer.js 将所有的 reducers 进⾏行行 Combine 数据库实体设计 编写服务端 API · 登陆注册 API · 商品 API ·商品列列表(GET)：/goods?page=1&per_page=10 ·商品详情(GET)： 使⽤用离线包、PWA 等离线缓存技术 · Webview 优化 · 打开 Webview 的同时并⾏行行的加载⻚页⾯面数据 功能开发要点 · 浏览器器端： · 服务端： · MVC 开发⽅方式，数据库基于 Sequelize · Rest API ⻛风格 ·采⽤用 JWT 进⾏行行鉴权 ·组件化，组件颗粒度尽可能⼩小 ·直接复⽤用 builder-webpack-geektime

my-project ·cd my-project ·npm init -y Webpack初体验：⼀一个最简单的例例⼦子 webpack 脚本 构建结果 通过 npm script 运⾏行行 webpack { "name": "hello-webpack", "version": "1.0.0", "description": "Hello webpack", "main": "index "scripts": { "build": "webpack" }, "keywords": [], "author": "", "license": "ISC" } 通过 npm run build 运⾏行行构建 原理理：模块局部安装会在 node_modules/.bin ⽬目录创建软链接 扫码试看/订阅 《玩转 webpack》

定义默认任务 // 在命令行使用 gulp 启动 script 任务和 auto 任务 gulp.task('default', ['script', 'auto']) 去除注释后，你会发现只需要 11 行代码就可以让 gulp 自动监听 js 文件的修改后压缩代码。但是还有还 有一些性能问题和缺少容错性，将在后面的章节详细说明。 gulp 入门指南 - 10 - 本文档使用 看云 构建 使用 gulp "stream-combiner2": "^1.0.2" } 当你将这份 gulpfile.js 配置分享给你的朋友时，就不需要将 node_modules/ 发送给他，他只需在命令 行输入 npm install 就可以检测 package.json 中的 devDependencies 并安装所有依赖。 设计目录结构 我们将文件分为2类，一类是源码，一类是编译压缩后的版本。文件夹分别为