冷故事的博客

首先找个空文件夹 npm init，初始化项目，包含基本的信息， 本地安装 npm install --save-dev webpack webpack4+版本需要cli支持 npm install --save-dev webpack-cli "scripts": { "build": "webpack --config webpack.config.js"...

管理资源 还是使用之前的文件，这里不做修改 加载css npm install --save-dev style-loader css-loader webpack.config.js const path = require('path') module.exports = { entry: './src/index.js', output: { filenam...

模块热替换 模块热替换(hot module replacement 或 HMR)是 webpack 提供的最有用的功能之一。它允许在运行时更新所有类型的模块，而无需完全刷新。本页面重点介绍其实现，而概念页面提供了更多关于它的工作原理以及为什么它有用的细节。 上篇开发模块讲到了webpack-dev-server这个插件，可以不用刷新直接reload页面，也就是说，这里的reload其实是...

shim 预置依赖 webpackcompiler 能够识别遵循 ES2015 模块语法、CommonJS 或 AMD 规范编写的模块。然而，一些 third party(第三方库) 可能会引用一些全局依赖（例如jQuery中的$）。因此这些 library 也可能会创建一些需要导出的全局变量。这些 "broken modules(不符合规范的模块)" 就是shim(预置依赖)发挥作...

生产环境 配置 development(开发环境)和production(生产环境)这两个环境下的构建目标存在着巨大差异。在开发环境中，我们需要：强大的 source map 和一个有着 live reloading(实时重新加载) 或 hot module replacement(热模块替换) 能力的 localhost server。而生产环境目标则转移至其他方面，关注点在于压缩 b...

缓存 我们的网页一般都会被浏览器缓存，这是因为加载大量的图片啊，css，js之类的，如果没有缓存，每次都要下载这么多东西，所以浏览器会采用缓存减少资源的请求。 然而我们有时候并不需要这种减少资源请求，因为不断的更新代码，我们需要最新的代码，这个时候需要用到缓存的技术（补充说明：一般我们会通过改变html中对不同js的引用来使浏览器加载不同的资源，下面详细说明） 输出文件的文件名 out...