萝卜不带泥

大家好！我是萝卜，上篇介绍了与 entry 和 output 相关的配置，这一篇将介绍 Webpack 其他重要配置。 Webpack 进行构建的时候会从入口文件（entry）开始遍历寻找各个模块的依赖，resolve 配置是帮助 Webpack 查找依赖模块的，通过 reso…

大家好！我是萝卜不带泥，在 webpack 中编写 JavaScript 代码，可以使用最新的 ES 语法，而最终打包的时候，webpack 会借助 Babel 将 ES6+语法转换成在目标浏览器可执行 ES5 语法。所以 Babel 是一个重要的知识点需要掌握。 Babel …

大家好！我是萝卜，今天给大家讲解在项目中使用 Webpack 来给多页应用做打包。 只需要简单配置，执行 webpack 打包之后，发现 log 中显示，在 dist 文件夹中生成一个 index.html 的文件。打开后发现 HTML 的内容如下： 除了我们 HTML 外，我…

大家好！我是萝卜，在实际开发实践中，为了方便开发调试和上线，项目中我们一般配置两个 Webpack 配置，一个是开发环境一个是生产环境，开发环境帮助我们快速开发测试联调，生产环境保证上线环境的打包流程是最优化体验，这就是配置文件根据环境进行拆分。 配置文件拆分最重要的收益是我们…

大家好！我是萝卜，Webpack 中一切皆模块，我们可以将CSS作为模块引入到代码中，这时候就需要添加 Webpack 的loader 来处理 CSS 了。 这时候 CSS 会被转成字符串， JS 就可以直接使用。 有了 css-loader 可以识别 CSS 语法了，下面就需…

大家好！我是萝卜，今天和大家说一说 webpack 是如何处理图片资源的，前端项目离不开图片资源，Webpack 中图片资源也是可以作为模块直接使用的，下面我们就来看一看。 上面地址的 http://cdn.example.com 是一个 CDN 静态域名，后面是我们完整的路径…

大家好！我是萝卜，this关键字是javascript中最复杂的机制之一，this被自动定义在所有函数的作用域中，即使是有多年经验的前端同学，有时也很难说清它到底指向什么，实际上，this机制并没有那么先进，下面就带大家彻底搞懂this。 既然this关键字是javascrip…