我们之前开发的都是业务代码，如果我们需要开发一些库代码给小伙伴们用或者给自己的团队用。那么如何使用webpack打包呢？这小节将带大家写webpack对库进行打包。 阅读全文
Jun 4, 2019 访问量 ( - ) 评论数 () #webpack
resolve能设置模块如何被解析。webpack 提供合理的默认值，但是还是可能会修改一些解析的细节。 阅读全文
Jun 3, 2019 访问量 ( - ) 评论数 () #webpack
ESLint 是一个ECMAScript/JavaScript 语法规则和代码风格的检查工具，它的目标是保证代码的一致性和避免错误。个人认为ESlint 在团队开发中很重要，它能有效的规范团队代码风格，为代码后期维护提供便利。 阅读全文
Jun 2, 2019 访问量 ( - ) 评论数 () #webpack
小菜之前在webpack配置中区分开发环境和生产环境，但是在源代码中还不能区分当前是开发环境还是生产环境。我们可能会遇到这种情况，如在开发的时候请求地址http://www.waliblog.com/login但是项目上线后，请求地址就变成http://www.baidu.com/login。我们需要完成这种操作，需要用到DefinePlugin 文档插件 阅读全文
Jun 1, 2019 访问量 ( - ) 评论数 () #webpack
shimming简单翻译是垫片。我们之前写代码会遇到向下面情况一样，在一个文件中引入很多第三方库 阅读全文
May 31, 2019 访问量 ( - ) 评论数 () #webpack
小菜之前写过关于浏览器是如何缓存的nginx 缓存,感兴趣的小伙伴们可以看看。在前面小菜写的配置都是如何去缓存 阅读全文
May 30, 2019 访问量 ( - ) 评论数 () #webpack
在上一小节，我们将开发环境和生产环境区分开来。这一小节，我们来操作如何将样式文件的代码分割。 阅读全文
May 29, 2019 访问量 ( - ) 评论数 () #webpack
我们正常开发项目会有两种模式，一种是开发模式，另一种是生产模式。在开发模式中，为了便于代码调试方便我们快速定位错误，不会压缩混淆源代码。但在生成模式中，就不需要调试代码，而是需要更快的页面加载，缓存优化等来提高用户体验。因此开发环境和生产环境需要单独配置。 阅读全文
May 28, 2019 访问量 ( - ) 评论数 () #webpack
本小节主要给大家介绍如何提高代码的性能?我们从打包工具入手，然后到预提模块(Preloading)，预加载模块(Prefetching)。 阅读全文
May 27, 2019 访问量 ( - ) 评论数 () #webpack
懒加载或者按需加载，是一种很好的优化网页或应用的方式。这种方式实际上是先把你的代码在一些逻辑断点处分离开，然后在一些代码块中完成某些操作后，立即引用或即将引用另外一些新的代码块。这样加快了应用的初始加载速度，减轻了它的总体体积，因为某些代码块可能永远不会被加载。 阅读全文
May 26, 2019 访问量 ( - ) 评论数 () #webpack
代码分割是一个概念，和webpack无关，在没有webpack的时候，代码分割这个概念也存在。通过合理的代码分割会让我们程序运行的性能更高，在没有webpack的时候，我们需要思考手动做代码分割怎么样合适。但是在有webpack后，我们只需在webpack配置中使用几个配置项，webpack就会知道我们的代码怎么样做代码分割合适，就会自动做代码分割，不在需要我们去考虑这个事情。 阅读全文
May 25, 2019 访问量 ( - ) 评论数 () #webpack
Tree Shaking从字面上理解就是树摇晃。就是当我们在一个js文件中写入了多个导出的方法，但是引用时只使用了一部分，其他方法不应该被打包进来。 阅读全文
May 24, 2019 访问量 ( - ) 评论数 () #webpack
sourceMap是用做源码映射，当我们编写代码，webpack帮助我们把代码打包。可当我们写的代码在浏览器运行时报错，这个时候我们需要能够帮助我们定位到源代码哪行错误而不是定位到打包后的代码错误。 阅读全文
May 23, 2019 访问量 ( - ) 评论数 () #webpack
为什么要处理ES6语法呢？当我们使用新语法来写代码，一些浏览器如果不支持那么就会报错，导致用户体验非常糟糕。我们使用babel来将ES6语法处理成ES5语法，就可以解决这个问题。 阅读全文
May 22, 2019 访问量 ( - ) 评论数 () #webpack
webpack-dev-server是一个用来快速搭建本地运行环境的工具。在实际开发中调试接口需要打http请求，我们用之前的方式本地直接打开html文件是不行的，本地直接打开html文件，在浏览器中显示的协议是file协议不是http协议。 阅读全文
May 21, 2019 访问量 ( - ) 评论数 () #webpack
前端开发中iconfont字体图标现在用的也是非常多，下面小菜将配置iconfont。 阅读全文
May 20, 2019 访问量 ( - ) 评论数 () #webpack
这小节小菜带大家写有关图片的配置，在web中处理图片好像没有什么特别需要处理的，小菜能想到的主要是图片的路径问题，还有去缓存以及图片压缩。 阅读全文
May 19, 2019 访问量 ( - ) 评论数 () #webpack
不知道大家记不记得，之前我们配置样式，在命令窗口中运行webpack打包然后在dist目录中打开本地index.html。在html中我们手动引入了main.js文件。当我们需要打包多个js文件时，我们手动引入js文件是非常繁琐的一件事，有没有什么配置可以帮我们做这件事呢？HtmlWebpackPlugin就可为帮助我们自动引入打包好的文件。 阅读全文
May 18, 2019 访问量 ( - ) 评论数 () #webpack
webpack 只能理解 JavaScript 和 JSON 文件。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。 阅读全文
May 17, 2019 访问量 ( - ) 评论数 () #webpack
在上面一节中，我们把最基本的webpack环境搭建起来了，这一小节，小菜教大家写一个最基本的webpack配置。没有loader,module,resolve,server模块，只有entry,output模块。 阅读全文
May 16, 2019 访问量 ( - ) 评论数 () #webpack