Webpack
文章平均质量分 76
书和咖啡
学习python的小侠客
展开
-
webpack 热更新
本节我们学习 webpack 的模块热更新,也可以叫做模块热替换。其目的是为了加快用户的开发速度,提高编程体验,方便开发人员在不刷新页面的情况下,就能修改代码,并且直观地在页面上看到变化。这个功能主要用于开发过程中,对于生产环境没有任何帮助。什么是模块热更新HMR 全称为 Hot Module Replacement ,中文意思为模块热更新,是 webpack 提供的最有用的功能之一。它允许在运行时替换,添加,删除各种模块,而无需进行完全刷新重新加载整个页面。热更新中的“热”我们可以理解为这个模块正在运原创 2021-05-17 20:19:42 · 3285 阅读 · 2 评论 -
webpack 图片处理和优化
本节我们来学习如何在 webpack 中处理和优化图片。前面我们讲过,webpack 中只有 JS 类型文件才能够被识别并直接打包,其他类型的文件,例如 CSS、JS、图片等,则需要通过特定的 loader 来进行加载打包。而在实际项目中,我们也会经常用到图片,所以本节我们就来看一下如何在 webpack 中打包图片。如何在webpack中打包图片在 webpack 中打包图片要用到 file-loader 或者 url-loader 加载器,这两个加载器的功能基本一样,但是还是存在一些区别:f原创 2021-05-16 20:25:48 · 759 阅读 · 0 评论 -
webpack 如何压缩文件
本节我们学习如何压缩 webpack 中的文件。在实际应用中,为了缩小打包后包的体积,我们可能需要将 CSS 和 JS 文件进行压缩,这需要用到 webpack 中的不同插件来实现。压缩 CSS在 webpack 中要压缩 CSS 文件,需要用到 optimize-css-assets-webpack-plugin 插件,这个插件会在 webpack 构建过程中搜索 CSS ,并优化 CSS。首先我们需要安装这个插件,命令如下所示:npm install optimize-css-assets-we原创 2021-05-15 20:40:23 · 1013 阅读 · 0 评论 -
webpack plugins插件
本节我们来学习 webpack 中的插件(plugins),插件可以让 webpack 能够执行更多任务,从优化和压缩,到重新定义环境中的变量等,非常强大。在 webpack 中, Plugin 和 loader 是两个比较容易混淆的概念。loader 用于对模块的源代码进行转换,所以 loader 的执行层面是单个的源文件。而插件的目的在于解决 loader 无法实现的问题,所以插件的功能更加强大,插件的执行层面是整个构建过程。上一节我们在学习loader 时可以发现,在使用 loader 时是不需要原创 2021-05-14 19:40:25 · 239 阅读 · 1 评论 -
webpack loader使用
本节我们来学习 webpack 中 loader 加载器的使用,那么什么是 loader 呢。从本质上来说,loader 就是一个 Node.js 模块,在 webpack 的定义中,loader 导出一个函数,loader 会在转换源模块的时候调用该函数。webpack 本身依然是只能处理 JS 文件的,但是通过一系列的 loader ,就可以处理其他文件啦。例如 Less 和 Sass,以前我们编译这些 CSS 预处理器,需要使用 gulp 进行编译,而显示可以通过 webpack 中的 loader原创 2021-05-08 10:49:30 · 734 阅读 · 1 评论 -
webpack output出口
上一节我们将了 webpack 的入口 entry,那既然有入口,对应就会有出口。所以本节我们来讲 webpack 中的出口 output。output 属性用于指定 webpack 如何输出、以及在哪里输出它所创建的 bundles,以及如何命名这些文件。基本上整个应用程序结构都会被编译到指定的输出路径的文件夹中。我们可以通过在配置文件中指定一个 output 字段,来配置这些处理过程。output输出配置output 是一个 object 对象,其中包含一系列的配置项,其中比较重要的是 filen原创 2021-05-06 11:19:10 · 385 阅读 · 0 评论 -
webpack entry入口
上一节我们讲到了 webpack 的配置文件 webpack.config.js ,这个文件需要我们手动在项目根目录下创建。创建后要对其进行配置,本节我们来看一下如何配置 webpack 中的入口,也就是 entry 属性。entry 入口可以用于指定 webpack 是从哪个模块开始构建项目的,通过配置 entry 属性的值可以指定一个或多个入口起点,默认值为 ./src。entry 的三种形式在 webpack.config.js 配置 entry 属性,有三种形式的值,其中 string 和原创 2021-04-30 10:37:19 · 2234 阅读 · 0 评论 -
webpack 配置文件
像上一节中,我们每次在打包文件时都需要手动输入源文件名和输出文件名,这样会比较麻烦,要解决这个问题,我们可以使用配置文件来进行管理。本节我们来学习 webpack 的配置文件 webpack.config.js ,由于 webpack 配置文件是导出一个对象的 JavaScript 文件,因此很少有 webpack 的配置看起来是完全相同的。因为 webpack 配置是一个标准的 Node.js 模块,所以在配置文件中可以执行以下操作:通过 require() 导入其他文件。通过 require(原创 2021-04-27 11:34:43 · 1361 阅读 · 2 评论 -
webpack 文件打包
上一节中,我们已经安装好了 webpack ,本节我们来学习 何使用 webpack 进行文件打包。使用webpack打包文件要打包文件,首先我们需要初始化一个项目,前面我们已经创建好了一个 xkd_webpack 的项目,并且这个项目根目录下已经有了一个 package.json 文件、package-lock.json 文件和一个 node_modules 文件夹,如下所示:在实际项目中,为了方便管理许多文件,我们可能需要创建一个 src 文件夹存放入口文件等开发文件,然后创建一个 dist 文原创 2021-04-23 15:47:20 · 407 阅读 · 1 评论 -
Webpack 安装
本节我们来学习 webpack4.0 的安装,webpack 的运行需要依赖 Node.js 的运行环境,在安装 webpack 时也需要用到 npm ,所以我们需要先安装 Node.js,Node.js 自带了软件包管理器 npm。webpack 需要 Node.js v0.6 以上版本支持,所以建议使用最新版,安装地址为:https://nodejs.org/en/download/,安装过程如果不熟悉的同学可以去看一下 Node.js 入门教程,这里就不给大家演示啦。创建一个项目首先我们需要创建原创 2021-04-21 13:26:12 · 2509 阅读 · 0 评论 -
webpack 简介
本教程我们来学一下 webpack 的基础入门知识,webpack 作为一个 JavaScript 应用程序的静态模块打包器,可以将各种静态资源作为模块来处理,是当下前端工程化的一个很受欢迎的工具,我们将在 webpack4.0 的基础上来学习 webpack 的使用。什么是webpackwebpack 是一个开源的前端打包工具,webpack 提供了前端开发缺乏的模块化开发方式,将各种静态资源视为模块,并从它生成优化过的代码,例如静态资源可以包括 js、css、html、less、图片等等。webp原创 2021-04-19 11:18:06 · 150 阅读 · 0 评论