SimpleXD

transform 样式被添加了相应的前缀。

1.如何处理scsssass-loader>css-loader>style-loader(以<style>标签形式添加到html中)或sass-loader>file-loader>style-lo

在 webpack 中，所有类型的文件都是模块，比如 js、css、图片、字体、json（可以说是万物皆模块）。 但是，在普通的 js 代码中，我们直接 import (或require) 一张图片或css是会报错的。 传统引用 css 代码的方式是在 html 通过 <sty…

借助于 es6 (es2015) 模块系统 (import 和 export) 的静态解析，webpack 能够利用 Tree Shaking 进行按需加载，移除掉没有被引用的模块，从而减少包的大小，缩小应用的加载时间，从而提高性能体验。 UglifyJSPlugin 的作用在…

在单页面或多页面应用中，通过代码分离的方式，能够优化性能。 比如把异步加载的代码分离成一个单独的chunk，等到需要调用的时候再按需加载（比如click时），这样可以减少首屏的代码体积，从而提高首屏的加载速度。 （比如 max-age ），实现对相关资源包的长缓存，从而优化性能…

从 webpack4 开始，用 SplitChunksPlugin 插件替换了 CommonsChunkPlugin 插件。 相对于 CommonsChunkPlugin ，SplitChunksPlugin 的使用更加方便和清晰。 SplitChunksPlugin 是 we…

在之前的 demo 中，执行完 webpack 后要手动把生成的同步模块的 js 包 (或css包) 引入到html中，这样其实是比较繁琐的。 尤其是在真正的项目开发中，为了对静态资源或第三方包做长缓存，我们会配置 webpack ，让其生成的每个包的文件名都自动带上该包对应的…

Babel 7 的发布 中有提到 Babel 团队与 Typescript 团队合作，让 Badel 使用 @babel/preset-typescript 来解析转换类型语法。 不过根据文章描述以及我的个人实践，发现当在 Babel 配置文件中通过 @babel/preset…

typescript（简称 ts ）是 javascript 的超集，具有类型系统，是可编译的。可以想象得到，在代码运行之前能够进行代码类型检查和编译是多么重要的事儿（就像 Java 等强类型语言一样）。 ts 默认根据 tsconfig.json 配置文件（很强大）来对 ts…