随笔分类 -  webpack

webpack学习之路（七）
摘要：生产环境构建 本节我们将深入了解一些应用于构建网站和应用的最佳实践和工具。 配置 开发环境和生产环境的构建目标差异很大。在开发环境中我们需要具有强大的实时重新加载和模块热替换功能的source map和localhost server 。而在生产环境中，我们的目标变成了更小的输出包、更轻量的sour 阅读全文
posted @ 2018-11-05 18:26 BeeAndFlower 阅读(237) 评论(0) 推荐(0)
webpack学习之路（六）
摘要：Tree Shaking ps:官方文档中本节目录结构继承于起步。 Tree Shaking是一个常用于移除js环境中无用代码的术语，它依赖于ES2015模块系统中的静态结构特性比如import和export。它的名字和概念其实兴起于ES2015打包工具rollup。 webpack发行后就内置支持 阅读全文
posted @ 2018-11-05 17:01 BeeAndFlower 阅读(436) 评论(0) 推荐(0)
webpack学习之路（五）
摘要：热模块替换 热模块替换(HMR)是webpack提供的最有用的功能之一，它让各种模块可以在运行时更新而无需刷新，本篇主要注重于实现。 ps：HMR是为开发模式设计的，也只能用于开发模式。 启用HRM 启用HRM只需要更新webpack-dev-server的配置，然后使用webpack的内置插件，同 阅读全文
posted @ 2018-11-02 15:14 BeeAndFlower 阅读(801) 评论(0) 推荐(0)
webpack学习之路（四）
摘要：开发： ps:本指南中的工具仅用于开发环境，请不要在生产环境中使用。 先设置一下模式： webpack.config.js 使用source-map: 使用webpack打包资源后，追踪到错误和警告在源代码中的位置有时候会变得比较困难。比如你把a.js、b.js、c.js打包成了bundle.js， 阅读全文
posted @ 2018-11-02 10:47 BeeAndFlower 阅读(231) 评论(0) 推荐(0)
webpack学习之路（三）
摘要：输出管理： 目前为止我们都是手动地在index.html中引入所有资源，但是一应用开始渐渐变大，在文件名中使用哈西并输出为多个bundle的时候，项目也会变得难以管理了。因此一些插件就诞生了。 准备： 调整一下项目结构： project src/print.js src/index.js dist/ 阅读全文
posted @ 2018-11-01 18:18 BeeAndFlower 阅读(184) 评论(0) 推荐(0)
webpack学习之路（二）
摘要：管理资源： 加载css： 想要在js模块中引入css文件，需要安装style-loader和css-loader: webpack.config.js ps： webpack通过正则表达式来确定用什么loader来处理什么文件； 这个例子中模块运行时<style>标签将被插入到<head>标签中。 阅读全文
posted @ 2018-11-01 10:31 BeeAndFlower 阅读(227) 评论(0) 推荐(0)
webpack学习之路（一）
摘要：写在开头：把学习webpack时的笔记贴上来以备不时之需，多摘自官方文档，阅读文档的时候中英文一起看的，中文文档有时比较生涩会加入自己的理解。 安装： 前提： 你要有个node环境（推荐LTS版本）。 本地安装： 如果你安装的是版本v4及之后，还需要安装webpack-cli： 本地安装是官方推荐方 阅读全文
posted @ 2018-10-31 15:52 BeeAndFlower 阅读(240) 评论(0) 推荐(0)