当前位置：首页 > 软件库 > Web应用开发 > 常用JavaScript包 >

Webpack

模块打包器

授权协议 MIT

开发语言 JavaScript

所属分类 Web应用开发、常用JavaScript包

软件类型开源软件

地区不详

投递者蓝昊然

操作系统跨平台

开源组织 Linux 基金会

适用人群未知

软件概览

Webpack 是一个模块打包器，主要目的是在浏览器上打包 JavaScript 文件。

TL;DR

捆绑 ES 模块、CommonJS 和 AMD 模块（以及绑定）。
可以创建在运行时异步加载的单个捆绑包或多个块（以减少初始加载时间）。
在编译过程中解决了依赖性，从而减小了运行时大小。
加载程序可以在编译时对文件进行预处理，例如，将 TypeScript 转换为 JavaScript、将Handlebars字符串转换为已编译函数、将图像转换为 Base64，等等。
高度模块化的插件系统可以执行您的应用程序所需的其他任何操作。

原理

示例代码

// webpack is a module bundler
// This means webpack takes modules with dependencies
//   and emits static assets representing those modules.

// dependencies can be written in CommonJs
var commonjs = require("./commonjs");
// or in AMD
define(["amd-module", "../file"], function(amdModule, file) {
    // while previous constructs are sync
    // this is async
    require(["big-module/big/file"], function(big) {
         // for async dependencies webpack splits
         //  your application into multiple "chunks".
         // This part of your application is
         //  loaded on demand (Code Splitting)
        var stuff = require("../my/stuff");
        // "../my/stuff" is also loaded on demand
        //  because it's in the callback function
        //  of the AMD require
    });
});


require("coffee!./cup.coffee");
// "Loaders" can be used to preprocess files.
// They can be prefixed in the require call
//  or configured in the configuration.
require("./cup");
// This does the same when you add ".coffee" to the extensions
//  and configure the "coffee" loader for /\.coffee$/


function loadTemplate(name) {
    return require("./templates/" + name + ".jade");
    // many expressions are supported in require calls
    // a clever parser extracts information and concludes
    //  that everything in "./templates" that matches
    //  /\.jade$/ should be included in the bundle, as it
    //  can be required.
}


// ... and you can combine everything
function loadTemplateAsync(name, callback) {
    require(["bundle?lazy!./templates/" + name + ".jade"], 
      function(templateBundle) {
        templateBundle(callback);
    });
}

使用案例

webpack

webpack 1. webpack 1.1 静态资源多了带来的问题网页加载速度慢，因为我们要发起很多的二次请求要处理错综复杂的依赖关系 1.2 如何解决上述问题合并、压缩、精灵图、图片的Base64编码可以使用webpack解决各个包之间的复杂依赖关系 2. webpack的使用 2.1 webpack的安装全局安装运行npm i webpack -g这样就可以在全局使用webpa
Webpack

什么是Webpack? Webpack 是一个开源的前端打包工具。Webpack 提供了前端开发缺乏的模块化开发方式,将各种静态资源视为模块,并从它生成优化过的代码。 Webpack 可以从终端、或是更改 webpack.config.js 来设置各项功能。要使用 Webpack 前须先安装 Node.js。(以上介绍来自百度,看着懵逼的话可以看我下边自己总结的) Webpack是前端的一个自动
浅析webpack的原理

一、前言现在随着前端开发的复杂度和规模越来越大，鹰不能抛开工程化来独立开发，比如：react的jsx代码必须编译后才能在浏览器中使用，比如sass和less代码浏览器是不支持的。如果摒弃这些开发框架，开发效率会大幅下降。在众多前端工程化工具中，webpack脱颖而出成为了当今最流行的前端构建工具。二、webpack的原理知其然知其所以然。 1、核心概念（1）entry：一个可执行模块
webpack 优劣

webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)，将有依赖关系的模块打包成静态资源。 webpack 自然就采用了折中的法子，编译所有模块时，将彼此关系密切的模块打包在一起，因此多个模块被分割成若干个小包，形成多次小请求，模块包可以按需加载，比如一个多页面网站，不同页面其实有很多公共的代码块，这时就可以优先加载，其他的按需加载。至于代码如何分
超详细 WebPack 入门教程

前端工程化 1.什么是前端工程化前端工程化指的是: 在企业级的前端项目开发中，把前端开发所需要的工具，技术，流程，经验等进行规范化，标准化。 1)模块化（js的模块化,css的模块化,资源的模块化） 2)组件化（复用现有的UI结构，样式，行为） 3)规范化（目录结构的划分，编码规范化，接口规范化，文档规范化，Git分支管理） 4)自动化（自动化构建，自动化部署，自动化测试） 4)前端工程化的解
查看webpack版本

1.安装 npm info webpack 2.查看 npx webpack -v
webpack 错误

1 ERROR in ./src/main.css Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ReferenceError: document is not defined at Object.insertStyleElement (D:\front-end-
webpack使用

1. 安装webpack，webpack-cli 只安装webpack，运行webpack -v 提醒我需要安装webpack-cli sudo cnpm install webpack -g sudo cnpm install webpack-cli -g webpack -v # webpack: 5.72.0 webpack-cli: 4.9.2
Webpack 使用

简介 webpakc的定位实际上是打包器.而不是任务执行器. 当然也可以配合grunt进行使用. webpack也提供了便捷的打包流程,项目构建,插件管理等等. 为了更好的构建项目从开发到生产都一一提供了解决方案. Vue官方也推荐使用的vue-loader也是基于webpack的. 因此这里简单介绍一下webpack的使用一些总结.更详细细致的内容可以到官网进行拓展. 安装局部安装使用命令行
webpack基本配置

webpack工程化实战 webpack5.x已经在今年10.1国庆期间发布上线，但是考虑到不稳定性，和生态插件的更新，所以本课程仍以webpack4.x版本为主。(webpack@4.43.0，webpack-cli@3.3.12，webpack-dev-server:@3.11.0） webpack入门 1.webpack简介 Webpack 是一个现代 JavaScript 应用程序的静态模
WebPack

官网：https://webpack.js.org/ 中文网：https://www.webpackjs.com/ 快速入门：https://webpack.js.org/guides/getting-started/ 慕课网的讲师Dell：http://www.dell-lee.com/ file-loader：https://webpack.js.org/loaders/file-loade
Mac 安装webpack

1.用npm的方式安装，首先你要安装node.js,地址 https://nodejs.org/en/download/下载安装 2、安装完看有没有安装成功，看下版本,打开终端输入：node -v【查看node版本】、npm -v【查看npm版本】 3(必)、在终端里输入： sudo -s 回车，输入你的开机密码回车（为什么必须：管理员模式才能进行安装） 4、全局安装webpack：npm in
webpack配置module详解

module: { rules: [ // loader配置 { test: '/\.css$/', // 多个loader用use use: ['style-loader', 'css-loader'] }, { test: '/

Webpack

同类工具

相关阅读

相关文章

相关问答

相关文档