模块打包器 Webpack

模块打包器 Webpack

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);
    });
}
的码云指数为
超过 的项目
加载中

评论(6)

霍啸林
霍啸林
#Webpack# 4.0.0 正式来袭
3
3535yy
沙发迪
沙发迪
这玩意就是个鸡肋,使用复杂。到处bug
曾建凯
曾建凯
#gulp# 是对现行所有的前端类库的一种兼容,他很容忍,并不关心内部引用资源是否存在。#Webpack# 是一个bundler,他是非常strict的,很适合对前端领域的靠后的人员掌握。浅层前端可以用gulp等进行开发,而后由一个人统一使用webpack进行打包,最后publish上cdn或正式站点。
曾建凯
曾建凯
用了 #Webpack# ,终于可以对一些开源的js类库的一些奇怪问题进行实时调试了。也让双屏有了用武之地。
曾建凯
曾建凯
#Webpack# 的 stylus处理效能不如gulp高,但js的合并就比gulp靠谱多了。
曾建凯
曾建凯
丢掉了 #gulp# 又迎来一大波 #Webpack# loader,哎。
曾建凯
曾建凯
#Webpack# 好爽!忽然觉得屏幕不够大了……

webpack v5.0.0-alpha.16 发布,JS 模块打包器

webpack v5.0.0-alpha.16 发布了,webpack 是一个模块打包器,主要目的是在浏览器上打包 JavaScript 文件。 更新内容如下: 新特性 为所有非输出、非输入 fs 操作添加 Compiler.intermediat...

今天 07:16

webpack 4.33.0 发布,JS 模块打包器

webpack 4.33.0 发布了,webpack 是一个模块打包器,主要目的是在浏览器上打包 JavaScript 文件。 此版本更新如下: 新特性 为 electron 5 新增 target: "electron-preload" 在 electron 5 中...

06/06 07:03

webpack v5.0.0-alpha.12 发布,模块打包器

webpack v5.0.0-alpha.12 发布了,webpack 是一个模块打包器,主要目的是在浏览器上打包 JavaScript 文件。 此版本带来的新特性包括: 新增 __webpack_get_script_filename__ 函数 使用 find...

05/12 07:44

webpack 4.31.0 发布,JS 模块打包器

webpack 4.30.1 发布了,webpack 是一个模块打包器,主要目的是在浏览器上打包 JavaScript 文件。 此版本更新内容如下: 新特性 新增 errors-warnings 的统计预设(stats preset) Bug 修复 ...

05/10 07:22

webpack 4.30.0 发布,JS 模块打包器

webpack 4.30.0 发布了,webpack 是一个模块打包器,主要目的是在浏览器上打包 JavaScript 文件。 此版本新特性如下: 新增 amd: false 禁用 AMD 支持 Compilation.hooks.finishModules 现在...

04/13 07:10

webpack 4.29.5 发布,JS 模块打包器

webpack 4.29.5 发布了,webpack 是一个模块打包器,主要目的是在浏览器上打包 JavaScript 文件。 更新内容如下: 升级 @webassemblyjs 移除 git 依赖 更新说明...

02/19 08:17

webpack 4.29.4 发布,JS 模块打包器

webpack 4.29.4 发布了,webpack 是一个模块打包器,主要目的是在浏览器上打包 JavaScript 文件。 更新内容如下: update @webassemblyjs for bugfixes 更新说明...

02/16 07:40

webpack v5.0.0 alpha.10 发布,JS 模块打包器

webpack v5.0.0 alpha.10 发布了,webpack 是一个模块打包器,主要目的是在浏览器上打包 JavaScript 文件。 更新内容如下: Bug 修复 添加 optimization.mangleExports 选项 (仅在生产模式下...

02/08 07:14

webpack 4.29.1 发布,JS 模块打包器

webpack 4.29.1 发布了,webpack 是一个模块打包器,主要目的是在浏览器上打包 JavaScript 文件。 更新内容如下: 错误修复 当模块被连接,但没有使用信息时,添加缺少的_esModule标记 更新日...

02/05 07:46

webpack 5.0.0 alpha 9 发布,JS 模块打包器

webpack 5.0.0 alpha 9 发布了,webpack 是一个模块打包器,主要目的是在浏览器上打包 JavaScript 文件。 更新内容如下: Features 持久性缓存的性能改进 测量缓存对象的大小,以确定它们是否...

01/28 08:02

没有更多内容

加载失败,请刷新页面

2
回答
vue-cli 构建项目没有build文件,我需要如何配置文件

最近接手一个项目,项目已经做好了,但是不兼容ie,用的是iview;然后在网上找了很多兼容ie的例子,都发现这个项目没有bulid文件,找不到webpac...

06/12 10:05
1
回答
question: webpack 打包项目, 每次都需要很长时间,30-40分钟不等。 热更新一次要10几分钟

最近接手别人的项目,我资历尚浅,发现这个项目每次终端运行打开的时候,都需要很长时间 热更新就更慢了 不知道有没有大佬愿意花时间教教我的 可以贡献一个项目的...

06/12 20:45
1
回答
webpack vue 打包一直再报es6 的 问题?

npm ERR! Exit status 1 ERROR in static/js/0.1f806b0b6172f1f7121b.js from Ugli...

04/24 11:42
7
回答
前端有办法一次开发,全平台通用吗?比如小程序,h5,vue,react各种框架。

比如webpack有没有类似的编译功能,写个h5就能同时编译出小程序的代码。 这样只需要开发一次,其他平台都有了。

04/17 14:40
2
回答
NodeJS代码webpack打包到html上使用的问题
zclhlmgqzc 的回答 03/01 13:30
最佳答案
你的student类不是全局变量 window.Student = Student
2
回答
明明没有也能热部署,在React开发中,还有必要配置HotModuleReplacementPlugin 插件吗?

RT, 网上文章清一色都说需要配置这个插件来热部署。 我也赞同热部署很重要很方便,但我现在没有配置这个插件,明明也能热部署自动刷新啊?下面是我的webpa...

2016/10/31 11:31
2
回答
webpack打包后的不是本地代码

就是接手上个前端vue项目,他用的是SVN,我换成了,增加新功能后本地npm run dev,运行起来没毛病,然后打包,上传到服务器发现,自己新增的新功能...

2018/09/09 20:06
2
回答
webpack 打包出错
-鹏 的回答 2018/08/24 14:23
最佳答案
es2015 preset doesn't transform async functions. Consider using babel-preset-env. Also, you can use es2017 preset alongside es2015 to convert every...
1
回答
火狐浏览器刷新偶尔出现报错 TypeError: e is null

框架使用的是react框架搭建,本地用localhost:8080访问火狐刷新不会存在报错的情况 ,求帮助提供一下好的解决思路 webpack配置如下

2018/07/02 10:43

没有更多内容

加载失败,请刷新页面

webpack学习笔记 2018/12/26

webpack4.0+ 从零基础学习webpack4.0 一.安装 说明:webpack4.0需要node 8.5以上的版本支持 node -v 1.从新建文件项目开始讲webpack a.创建文件webpackLearn, 初始化项目npm init -y 生成pac...

2018/12/27 19:52
8
0
Webpack 、git常用命令总结

一、Webpack 常用命令总结 npm install webpack -g // 全局安装webpack npm init -y //初始化默认的package.json文件 npm install webpack --save-dev //下载webpack插件到node_modules 并在...

2017/10/19 10:31
16
0
从基础到实战 手把手带你掌握新版Webpack4.0

第1章 课程导学(打消你的学习疑虑) 掌握Webpack越来越成为前端工程师的标配技能,本章会对课程整体进行介绍,打消你的学习疑虑。 1-1 课程导学试看 第2章 Webpack 初探 本章通过清晰易懂的...

03/20 19:06
40
0
从基础到实战 手把手带你掌握新版Webpack4.0

第1章 课程导学(打消你的学习疑虑) 掌握Webpack越来越成为前端工程师的标配技能,本章会对课程整体进行介绍,打消你的学习疑虑。 1-1 课程导学试看 第2章 Webpack 初探 本章通过清晰易懂的...

04/03 08:50
0
0
gulp与webpack-stream集成配置

webpack非常强大,但是也有不足的地方,批量式处理依然是gulp更胜一筹.我们是否可以将两者的优点结合起来呢? 这篇文章就是讲述如何集成gulp和webpack ### 1.安装webpack-stream 很重要的插件,...

2016/05/12 11:03
2.4K
2
Webpack学习笔记 - 入门篇

如果你已经读了 [Webpack学习笔记 - 体验篇](https://my.oschina.net/myshow/blog/813869 "体验篇"),是不是有想进一步了解 `Webpack` 的冲动。 > 没有。那是因为包子太大,你还没有咬馅儿呢...

2016/12/28 16:47
39
0
webpack使用

http://www.css88.com/doc/webpack/ webpack的中文文档 https://www.cnblogs.com/brandonhulala/p/6057378.html 一.安装node 二.安装webpack命令环境 npm install webpack -g 安装后验证:w...

2017/09/18 12:24
19
0
webpack4.0安装使用

全局安装 npm install webpack -g npm install webpack-cli -g (这里提示安装 webpack-cli// 是因为到了webpack4, webpack 已经将 webpack 命令行相关的内容都迁移到 webpack-cli,所以除了...

2018/05/31 14:35
122
0
webpack2--tidying up

webpack2--tidying up,本学习记录来自于:[webpack2书籍 ](https://survivejs.com/webpack/building/tidying-up/ ) **tidying up**的理由:一次次的setup,导致以前每次使用webpack时产生的...

2017/06/20 23:05
10
0
webpack 先这么用

Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源; 开发便捷,能替代部分 grunt/gulp 的工作,比如打包、压缩混淆、图片转...

2016/09/24 22:56
55
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部