LizequaNNN的博客

重构Webpack系列之六 ---- 配置文件一、基本用法webpack的配置文件不尽相同。这是因为webpack的配置文件是JavaScript文件，文件内导出了一个webpack配置的对象，然后webpack会根据该配置定义的属性进行处理。本文的结论是，webpack的配置可以有许多不同的样式和风格。关键在于，为了易于维护和理解这些配置，需要再团队内部保持一致。a.基本配置const path = require('path');module.exports = { mode:

重构Webpack系列之五 ---- Plugins很高兴你能读到我这篇文章，对于前端工程师来讲，webpack是一块硬骨头，个人认为，一个合格的前端工程师不应该不懂webpack。我写这系列的文章也是为了能把这块硬骨头啃下来，希望大家一起加油进步吧！这个系列只是为大家介绍了webpack比较浅显的一些概念，后续会继续持续输出原理系列的文章，请大家保持关注~一、概念插件（plugins）是webpack的支柱功能。插件的目的在于解决loader无法实现的其他操作，除此之外，webpack还提供

重构Webpack系列之四 ---- Loaders一、概念Loader用于对模块的源代码进行转换。loader可以使你在import或“load（翻译为 加载）”模块时预处理文件。因此，loader类似于其他构建工具中“task（任务）”，并提供了处理前端构建步骤的得力方式。loader可以将文件从不同语言（例如TypeScript）转换为JavaScript，或将内联图像转换为data URL。loader甚至允许你直接在JavaScript模块中import一些CSS文件。以下代码均在we

重构Webpack系列之三 ----出口（output）一、概念Webpack可以通过配置output选项，告知程序如何向硬盘写入编译后的文件。注意，即使可以存在多个entry起点，但也只能指定一个output配置。备注：以下代码均在webpack.config.js文件进行编辑。在webpack配置中，output属性的最低要求是，将它的值设置为一个对象，然后为将输出的文件名配置一个output.filename:module.exports = { output: { fil

重构Webpack系列之二 ---- 入口起点一、概念入口起点（entry point）指示Webpack应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，Webpack会找出哪些模块和库是跟入口起点（直接或间接）有依赖的关系。默认值是./src/index.js，但可以通过在webpack configuration中配置entry属性，来指定一个（或多个）不同的入口起点。例如：本文以下代码均在webpack.config.js之中实现module.exports = {

重构Webpack系列之一 ---- 概念篇一、概念本质上，Webpack是一个用于现代JavaScript应用程序的静态模块打包工具。当Webpack处理应用程序时，它会从内部一个或多个入口点构建一个依赖图，然后将项目中所需的每一个模块组合成一个或多个bundle，这些bundle均为静态资源，用于展示你的内容。二、概念分支——模块什么是模块？模块就是在前端领域的模块化编程中，开发者将程序分解为功能离散的chunk（翻译为，块），并称之为模块。每个模块都拥有小于完整程序的体积，使得验证、调试

学习webpack系列之四 ---- （学习开发环境）本章所用的代码继续沿用上一章（输出管理）的代码。在开始之前我们要想想，为什么要了解webpack的开发环境？其实很简单，自动化打包工具就是为我们的开发提供便利的。之前的几个章节讲的都是比较基础的一些功能以及用法，我们的目的就是要在开发的过程中尽可能的提高工作效率，所以我们有必要来学习他的一个开发环境的配置。OK准备好了我们就开始！一、开发环境MODEmode有三个参数：none，development，production。如果没有设置

学习webpack系列之三 ---- （输出管理）零、前言差不多就要国庆假期啦！正处于金九银十的你有没有找到自己心仪的工作呢！我的日常就是跟下面差不多~总之希望大家都能过一个轻松惬意的国庆节！接下来进入正题。到目前为止，我们都是在 index.html 文件中手动引入所有资源，然而随着应用程序增长，并且一旦开始在文件名中使用 hash 并输出多个 bundle，如果继续手动管理 index.html 文件，就会变得困难起来。然而，通过一些插件可以使这个过程更容易管控。这篇文章继续沿用上一篇文章

学习webpack系列之二 ---- （管理静态资源）本文的项目代码是基于上一篇文章延续下来的。在开始之前，让我们对项目做一个小的修改：把dist/index.html里面的main.js改为bundle.js把webpack.config.js里面的output改为bundle.js这么做的目的只是为了使代码看起来更加符合语义一点，阅读起来比较舒服，没有什么特别的含义。css、images、fonts都是项目的必备资源，所以webpack为了加载这些静态资源，是必须引入部分loaders的

学习webpack系列之一 ---- （手动部署环境）一、创建以及初始化项目mkdir webpack-simple-projectcd webpack-simple-projectnpm init -ynpm install webpack webpack-cli安装webpack以及webpack-cli脚手架工具，生成package.json文件，如果是npm5以上还有package-lock.json。值得一提的是，根据官方文档，这个package-lock.json 是在 npm

什么是webpack？一、前言webpack真的是做前端的程序员们一项必备的技能了。如果你之前接触过webpack但又不太明白它到底是做什么的，或者你了解的比较浅薄，没有深入了解过，那么你应该仔细阅读这篇文章。读完这篇文章之后，相信你已经对webpack有一个全方面大致的了解。二、为什么选择webpack？那我们为什么选择webpack呢？首先我这里有几个问题，我希望你读这篇文章的时候带着问题去阅读，读完这篇文章之后，我希望你不仅能学习到了webpack，也能学习到了这种学习方式。为什么会出现w