zoukankan      html  css  js  c++  java
  • webpack 简介

    本教程我们来学一下 webpack 的基础入门知识,webpack 作为一个 JavaScript 应用程序的静态模块打包器,可以将各种静态资源作为模块来处理,是当下前端工程化的一个很受欢迎的工具,我们将在 webpack4.0 的基础上来学习 webpack 的使用。

    什么是webpack

    webpack 是一个开源的前端打包工具,webpack 提供了前端开发缺乏的模块化开发方式,将各种静态资源视为模块,并从它生成优化过的代码,例如静态资源可以包括 js、css、html、less、图片等等。

    webpack 可以从终端或者是通过更改 webpack.config.js 文件来设置各项功能。我们要使用 webpack,有一个前提条件就是必需先安装 Node.js, 在安装 webpack 或者其他的插件等都需要用到 npm 命令。

    webpack 其中一个特性是使用加载器来将资源转化成模块,开发者可以自定义加载器的顺序、格式来适应项目的需求。

    为什么使用webpack

    我们在开发的时候,经常会遇到在一个 HTML 页面中引入多个 CSS 和 JS 文件,或者是一些 JS 资源彼此之间存在依赖关系,或者是需要使用一大堆安装包的情况,这些问题可能容易导致页面加载缓慢。所以为了解决这个问题,我们可以使用 webpack 来打包这些文件,将各种静态资源都打包成了一个文件,这样浏览器加载起来就快很多。

    在 webpack 中,任何静态资源都可以视为模块,模块之间也可以相互依赖,通过 webpack 对模块进行处理后,可以打包成我们想要的静态资源。

    webpack四个核心概念

    webpack 中有四个核心概念,包括入口(entry)、输出(output)、loader、插件(plugins)。如下所示:

    • entry:用于指定 webpack 应该使用哪个模块来作为构建的开始,可以指定一个或多个起点,默认值为 ./src。
    • output:指定 webpack 最终输出的文件输出位置和文件名等信息,默认输出位置为 ./dist。
    • loader:可以将所有类型的文件转换为 webpack 能够处理的有效模块,然后我们就可以利用 webpack 的打包能力,对它们进行处理。
    • plugins:目的在于解决 loader 无法实现的其他事。可以让 webpack 能够执行更多任务,从优化和压缩,到重新定义环境中的变量,功能非常强大。

    webpack优势

    • webpack 是以 commonJS 的形式来书写脚本的,但对 AMD/CMD 的支持也很全面,方便旧项目进行代码迁移。
    • 可以通过配置,打包成多个文件,有效利用浏览器的缓存功能提升性能。
    • 将样式文件和图片等静态资源也可视为模块进行打包。配合 loader 加载器,可以支持 Sass,Less 等 CSS 预处理器。
    • 专注于处理模块化的项目,能做到开箱即用、 一步到位。
    • 扩展性强,插件 plugins 机制完善。

    总结

    webpack 是一个模块打包工具,或者也可以叫做模块化打包机。通过 webpack 可以帮助我们将不同的资源和文件,进行打包,也就是合并在一个文件里面。除此之外,webpack 还可以进行 CSS 预处理,将 ES6 转为 ES5 等作用。下一节我们将会学习如何安装 webpack 。

    漫思
  • 相关阅读:
    DVWA 黑客攻防演练(十)反射型 XSS 攻击 Reflected Cross Site Scripting
    DVWA 黑客攻防演练(九) SQL 盲注 SQL Injection (Blind)
    DVWA 黑客攻防演练(八)SQL 注入 SQL Injection
    DVWA 黑客攻防演练(七)Weak Session IDs
    DVWA 黑客攻防演练(六)不安全的验证码 Insecure CAPTCHA
    DVWA 黑客攻防演练(五)文件上传漏洞 File Upload
    工作流表结构设计
    Visual Studio 2019尝鲜----新建空项目体验
    《使用CSLA 2019:CSLA .NET概述》原版和机译文档下载
    .NET快速开发平台的在线预览
  • 原文地址:https://www.cnblogs.com/sexintercourse/p/14952484.html
Copyright © 2011-2022 走看看