最新帖子

webpack 解析resolve(20)

resolve能设置模块如何被解析。webpack 提供合理的默认值,但是还是可能会修改一些解析的细节。 阅读全文

webpack Esline(19)

ESLint 是一个ECMAScript/JavaScript 语法规则和代码风格的检查工具,它的目标是保证代码的一致性和避免错误。个人认为ESlint 在团队开发中很重要,它能有效的规范团队代码风格,为代码后期维护提供便利。 阅读全文

webpack 环境变量(18)

小菜之前在webpack配置中区分开发环境和生产环境,但是在源代码中还不能区分当前是开发环境还是生产环境。我们可能会遇到这种情况,如在开发的时候请求地址http://www.waliblog.com/login但是项目上线后,请求地址就变成http://www.baidu.com/login。我们需要完成这种操作,需要用到DefinePlugin 文档插件 阅读全文

webpack shimming(17)

shimming简单翻译是垫片。我们之前写代码会遇到向下面情况一样,在一个文件中引入很多第三方库 阅读全文

webpack 浏览器缓存(16)

小菜之前写过关于浏览器是如何缓存的nginx 缓存,感兴趣的小伙伴们可以看看。在前面小菜写的配置都是如何去缓存 阅读全文

webpack 样式文件的代码分割(15)

在上一小节,我们将开发环境和生产环境区分开来。这一小节,我们来操作如何将样式文件的代码分割阅读全文

webpack 模块化区分开发和生产(14)

我们正常开发项目会有两种模式,一种是开发模式,另一种是生产模式。在开发模式中,为了便于代码调试方便我们快速定位错误,不会压缩混淆源代码。但在生成模式中,就不需要调试代码,而是需要更快的页面加载,缓存优化等来提高用户体验。因此开发环境和生产环境需要单独配置。 阅读全文

webpack 打包分析,Preloading,Prefetching(13)

本小节主要给大家介绍如何提高代码的性能?我们从打包工具入手,然后到预提模块(Preloading),预加载模块(Prefetching)。 阅读全文

webpack 懒加载(12)

懒加载或者按需加载,是一种很好的优化网页或应用的方式。这种方式实际上是先把你的代码在一些逻辑断点处分离开,然后在一些代码块中完成某些操作后,立即引用或即将引用另外一些新的代码块。这样加快了应用的初始加载速度,减轻了它的总体体积,因为某些代码块可能永远不会被加载。 阅读全文

webpack js代码分割(11)

代码分割是一个概念,和webpack无关,在没有webpack的时候,代码分割这个概念也存在。通过合理的代码分割会让我们程序运行的性能更高,在没有webpack的时候,我们需要思考手动做代码分割怎么样合适。但是在有webpack后,我们只需在webpack配置中使用几个配置项,webpack就会知道我们的代码怎么样做代码分割合适,就会自动做代码分割,不在需要我们去考虑这个事情。 阅读全文

webpack Tree Shaking(10)

Tree Shaking从字面上理解就是树摇晃。就是当我们在一个js文件中写入了多个导出的方法,但是引用时只使用了一部分,其他方法不应该被打包进来。 阅读全文

webpack SourceMap配置(9)

sourceMap是用做源码映射,当我们编写代码,webpack帮助我们把代码打包。可当我们写的代码在浏览器运行时报错,这个时候我们需要能够帮助我们定位到源代码哪行错误而不是定位到打包后的代码错误。 阅读全文

webpack 处理ES6语法(8)

为什么要处理ES6语法呢?当我们使用新语法来写代码,一些浏览器如果不支持那么就会报错,导致用户体验非常糟糕。我们使用babel来将ES6语法处理成ES5语法,就可以解决这个问题。 阅读全文

webpack devServer本地开发(7)

webpack-dev-server是一个用来快速搭建本地运行环境的工具。在实际开发中调试接口需要打http请求,我们用之前的方式本地直接打开html文件是不行的,本地直接打开html文件,在浏览器中显示的协议是file协议不是http协议。 阅读全文

webpack iconfont打包(6)

前端开发中iconfont字体图标现在用的也是非常多,下面小菜将配置iconfont。 阅读全文

webpack 打包图片(5)

这小节小菜带大家写有关图片的配置,在web中处理图片好像没有什么特别需要处理的,小菜能想到的主要是图片的路径问题,还有去缓存以及图片压缩。 阅读全文

webpack 让打包更便捷(4)

不知道大家记不记得,之前我们配置样式,在命令窗口中运行webpack打包然后在dist目录中打开本地index.html。在html中我们手动引入了main.js文件。当我们需要打包多个js文件时,我们手动引入js文件是非常繁琐的一件事,有没有什么配置可以帮我们做这件事呢?HtmlWebpackPlugin就可为帮助我们自动引入打包好的文件。 阅读全文

webpack 打包样式(3)

webpack 只能理解 JavaScript 和 JSON 文件。loader 让 webpack 能够去处理其他类型的文件,并将它们转换为有效 模块,以供应用程序使用,以及被添加到依赖图中。 阅读全文

webpack 手写最基本的配置(2)

在上面一节中,我们把最基本的webpack环境搭建起来了,这一小节,小菜教大家写一个最基本的webpack配置。没有loader,module,resolve,server模块,只有entry,output模块。 阅读全文

webpack 准备工作(1)

距离上次写webpack时间已经过去2年时间,这期间一直想写webpack教程都由于没有时间而放弃。最近看到女友在慕课网上买了webpack教程,小菜也跟着看了,老师讲的非常好。如果大家有多余的零花钱还有时间,建议大家可以买个课程看看,小菜在文章的最后放上购买二维码,这样也可以给大伙省一点钱,如果手头紧的话那就看小菜写的教程吧!小菜这里默认大家对webpack有一定的了解,如果还不知道webpack是什么,做什么用的。建议先阅读webpack官方文档。 阅读全文