而关于如何应用该路径并没有说清楚... 这个最终静态资源访问路径在使用html-webpack-plugin打包后得到的html中可以看到。所以publicPath设置成相对路径后，相对路径是相对于build之后的index.html的，例如，如果设置publicPath: '…

推荐先阅读 webpack 入门教程之后再来阅读本文。 webpack 4 最大的改动就是废除了 CommonsChunkPlugin 引入了 optimization.splitChunks。 webpack 4 的Code Splitting 它最大的特点就是配置简单，如果…

一种是页面刷新，不保留页面状态，就是简单粗暴，直接window.location.reload()。 另一种是基于WDS (Webpack-dev-server)的模块热替换，只需要局部刷新页面上发生变化的模块，同时可以保留当前的页面状态，比如复选框的选中状态、输入框的输入等。…

大家都知道 babel 是兼容对 ES6 支持不完善的低版本浏览器的转换编译器。 那么废话少说，我们直接点，直接说说常见几个场景下兼容旧版浏览器的方案。 来兼容 Web 应用不支持的 API。 原理大概是 polyfill.io 会读取每个请求的User-Agent标头，并返回…

... 简单来说把 JavaScript 中 es2015/2016/2017/2046 的新语法转化为 es5，让低端运行环境(如浏览器和 node )能够认识并执行。本文以 babel 6.x 为基准进行讨论。最近 babel 出了 7.x，放在最后聊。 严格来说，babe…

基于我的上篇文章，webpack4.0 入门篇 - 构建前端开发的基本环境，补充对babel进行的一次探究。上篇文章讲叙到的 webpack babel 时几乎一笔带过，所以这篇文章将进行补充说明. 本文以当前最新版本的 babel - 7.10 为例， 做 babel 的配置…

下面通过例子来了解一下path、publicPath和contentBase的区别吧。 output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。…

作者：滴滴公共前端团队 - 水乙 我们在使用 webpack 打包我们的工程模块时，经常会需要 devtool 开启 sourceMap 让我们可以调试代码，但是 webpack 文档中关于 devtool 给出了7种模式，文档也写得非常简略，初学者很难上手。本文将这7种模式的…

webpack4出了两个月，发现大家包括我对splitChunk的使用都还是在摸索阶段。我也看了挺多别人的配置demo，都觉得不太满意或者没得到太好的解惑，issue 下面的问题也没什么人回复，只能自己操作了，顺便记录下来，如果大家有更好的，欢迎评论区留下地址。 maxAsyn…