授权协议: MIT
开发语言: JavaScript 查看源码 »
操作系统: 跨平台
收录时间: 2014-07-27
提 交 者: 红薯

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

原理

特性

  • 打包 CommonJs 和 AMD 模块(以及绑定)

  • 可创建单个或多个按需加载的块,以减少初始加载时间

  • 在编译期间会解决依赖关系,减少了运行时的大小

  • 加载器可以在编译时预处理文件,如 coffee-script 到 javascript

示例代码

// 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);
    });
}
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

Webpack 的相关博客

webpack -- webpack安装

一、新建项目 mkdir projectName 切换到项目里面 cd projectName 二、初始化项目 npm init -y 三、安装webpack 不推荐全局...

使用webpack---安装webpack和webpack-dev-server

1.先确保安装了最新版的Node.js和NPM,并已经了解NPM的基本用法 (以下使用cmd命令行进行) 2.安装webpack   (1)全局安装  ...

webpack-clean-webpack-plugin

在webpack中打包生成的文件会覆盖之前的文件,不过生成文件的时候文件名加了hash之后会每次都生成不一样的文件,这就会很麻烦...

Webpack

webpack介绍 webpack是一个打包工具,他的宗旨是一切静态资源即可打包。有人就会问为什么要webpack?webpack是现代前端技术的...

webpack

1. webpack介绍 在传统的项目中,一个html文件可能会加载多个js、css文件,如果多人协同开发的话,就会出现全局变量被污染、文...

WebPack

一、WebPack:https://www.webpackjs.com/concepts/   WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到...

webpack的插件 http-webpack-plugin。 webpack-dev-server

自动的生成: bundle.js 和 index.html 在该项目的目录下: npm init -yes npm install vue -D npm install webpack@3.12.0 ...

WebPack

一、Webpack和gulp/grunt对比 1、Gulp和Grunt Grunt和Gulp的工作方式是:在一个配置文件中,指明对某些文件进行类似编 译,组合...

webpack

注: ** 先来说下前端为什么需要学习webpack吧!** 因为现在SPA流行,javascript的依赖包,less,scss.sass样式文件的编译。 ...

评论 (7)

加载中
#Webpack# 4.0.0 正式来袭
2018/02/25 22:48
回复
举报
2017/11/06 09:32
回复
举报
打分: 很差
这玩意就是个鸡肋,使用复杂。到处bug
2017/06/09 10:20
回复
举报
赞同你
07/22 17:36
回复
举报
#Webpack# 好爽!忽然觉得屏幕不够大了……
2016/05/13 10:02
回复
举报
丢掉了 #gulp# 又迎来一大波 #Webpack# loader,哎。
2016/05/13 14:06
回复
举报
#Webpack# 的 stylus处理效能不如gulp高,但js的合并就比gulp靠谱多了。
2016/05/13 14:13
回复
举报
用了 #Webpack# ,终于可以对一些开源的js类库的一些奇怪问题进行实时调试了。也让双屏有了用武之地。
2016/05/14 10:19
回复
举报
#gulp# 是对现行所有的前端类库的一种兼容,他很容忍,并不关心内部引用资源是否存在。#Webpack# 是一个bundler,他是非常strict的,很适合对前端领域的靠后的人员掌握。浅层前端可以用gulp等进行开发,而后由一个人统一使用webpack进行打包,最后publish上cdn或正式站点。
2016/05/14 10:25
回复
举报
更多评论
7 评论
108 收藏
分享
在线直播报名
返回顶部
顶部