文章分类 - WebPack专栏
WebPack入门教程学习分享
摘要：缓存 重点在于通过必要的配置，以确保 webpack 编译生成的文件能够被客户端缓存，而在文件内容变化后，能够请求到新的文件。 方式：修改时，不修改第三方库名可保持缓存，修改要变动的JS文件名可更新对应缓存 输出文件的文件名 这种情况，如果不做修改，文件名可能会变，也可能不会 提取模板 提取公用部分
阅读全文
摘要：懒加载 用户的交互时需要功能才加载 src/print.js src/index.js 结果: 打印功能分离，在点击时加载 框架 许多框架和类库对于如何用它们自己的方式来实现（懒加载）都有自己的建议。这里有一些例子： React: Code Splitting and Lazy Loading Vu
阅读全文
摘要：常用代码分离方法 入口起点：使用 entry 配置手动地分离代码。 防止重复：使用 CommonsChunkPlugin 去重和分离 chunk。 动态导入：通过模块的内联函数调用来分离代码。 入口起点 这是迄今为止最简单、最直观的分离代码的方式。不过，这种方式手动配置较多，并有一些陷阱 webpa
阅读全文
摘要：配置 我们通常建议为每个环境(开发/生产)编写彼此独立的 webpack 配置 npm install save dev webpack merge webpack.common.js webpack.dev.js webpack.prod.js NPM Scripts package.json M
阅读全文
摘要：按需打包 将文件标记为无副作用(side effect free) package.json 如果所有代码都不包含副作用，我们就可以简单地将该属性标记为 false，来告知 webpack，它可以安全地删除未用到的 export 导出。 如果你的代码确实有一些副作用，那么可以改为提供一个数组： 副作
阅读全文
摘要：启用 HMR 通过 Node.js API 当使用 webpack dev server 和 Node.js API 时，不要将 dev server 选项放在 webpack 配置对象(webpack config object)中。而是，在创建选项时，将其作为第二个参数传递。例如：new Web
阅读全文
摘要：使用 source map webpack.config.js 代替手动编译 1. webpack's Watch Mode 2. webpack dev server （推荐） 3. webpack dev middleware 使用观察模式 使用 webpack dev server npm i
阅读全文
摘要：预先准备，设定 HtmlWebpackPlugin，清理 /dist 文件夹 npm install save dev html webpack plugin npm install clean webpack plugin save dev Manifest webpack及其插件通过manife
阅读全文
摘要：管理资源 加载 CSS、图片、字体、数据 webpack.config.js src/index.js 全局资源 资源模块化
阅读全文
摘要：基本安装 使用一个配置文件 webpack.config.js NPM 脚本(NPM Scripts) package.json
阅读全文
摘要：webpack.config.js 入口 单个入口 对象语法 多页面应用程序 输出 多入口输出 高级进阶 (使用 CDN 和资源 hash 的复杂示例) 模式 production 或 development loader loader使用方式 配置 | 内联 | Cli 插件 配置 基本配置 多个
阅读全文
