模块打包器 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 5.0.0 alpha 5 发布,JS 模块打包器

webpack 5.0.0 alpha 5 发布了,webpack 是一个模块打包器,主要目的是在浏览器上打包 JavaScript 文件。 更新内容包括: 删除 compilationParams.compilationDependencies 插件可以通过添加...

01/11 07:28

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

webpack 5.0.0 alpha 4 发布了,webpack 是一个模块打包器,主要目的是在浏览器上打包 JavaScript 文件。 更新内容包括: 重构 删除module.buildMeta.providedExports。 移到 ModuleGraph 中...

01/10 07:31

webpack 5.0.0 alpha 3 发布,序列化 API、缓存分层

webpack 5.0.0 alpha 3 发布了,webpack 是一个模块打包器,主要目的是在浏览器上打包 JavaScript 文件。 更新内容包括: Bugfixes 修复了 stats json namedChunkGroups 中缺少的入口点 Mult...

2018/12/31 07:17

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

webpack 5.0.0 alpha 2 发布了,webpack 是一个模块打包器,主要目的是在浏览器上打包 JavaScript 文件。 此版本主要修复了一些 bug: 具有 null 原型的对象现在可以序列化。 toJson 现在对所...

2018/12/30 07:55

Webpack 4.28.0 发布,JavaScript 模块打包器

Webpack 4.28.0 已发布,更新内容如下: 新特性 IgnorePlugin: checkResource现在有一个额外的context参数 Bug 修复 对于.mjs文件,当它崩溃时,禁用了 node.js 全局变量的注入 下载地址: ...

2018/12/20 07:15

Webpack 4.27.0 发布,JavaScript 模块打包器

Webpack 4.27.0 已发布,更新内容如下: Features When using functions as plugins they are now also called with the compiler as parameter This make it possible to use arrow functi...

2018/12/05 07:05

Webpack 4.26.1 发布,JavaScript 模块打包器

Webpack 4.26.1 已发布,这是对 4.26.0 的修复版本: fix a bug where splitChunks.maxSize causes a hanging build fix a bug where splitChunks.maxSize crashes when minSize > maxSize ...

2018/11/26 07:18

Webpack 4.25.1 发布,JavaScript 模块打包器

在刚刚发布 4.25.0 版本后,Webpack 又快速发布 4.25.1 对上个版本进行修复: fix replacement of compile-time constant expression when expression is a wrapped expression (string pref...

2018/11/06 07:11

Webpack 4.24.0 发布,JavaScript 模块打包器

Webpack 4.24.0 已发布,Webpack 是一个模块打包器,主要目的是在浏览器上打包 JavaScript 文件。 特性 allow to pass no dependencies to DefinePlugin runtime value DefinePlugin.runtime...

2018/11/03 07:16

webpack 4.21.0 发布,JavaScript 模块打包器

webpack 4.21.0 发布了,webpack 是一个模块打包器,主要目的是在浏览器上打包 JavaScript 文件。 更新内容如下: Features 添加 output.libraryTarget: "amd-require",它生成 AMD require(...

2018/10/18 07:56

没有更多内容

加载失败,请刷新页面

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
1
回答
nginx如何配置restful api反向代理?

问题描述: 前后端分离项目需要配置nginx负载均衡(反向代理) 1、前端项目是使用webpack搭建的一个vue + element + axios项目...

2018/06/27 17:29
3
回答
React使用echarts图表,webpack打包后包还是很大该怎么办
-鹏 的回答 2018/06/27 11:03
最佳答案
两种办法解决: 1. 配置别名 webpack alias , 具体配置参考文档:https://webpack.js.org/configuration/resolve/ 2. 直接懒加载, 将echarts 和 echarts-for-react打包出来单独的文件,然后按需引入,这样就解决...
1
回答
React项目中热更新问题

配置文件: const webpack = require('webpack') const HtmlWebpackPlugin = require('h...

2018/04/28 15:45
2
回答
vue-cli如何设置proxytable

用脚手架生成项目vue create projectname之后结构是这样的 里面并没有vue init webpack xxx这种方式生成的config...

2018/01/31 10:35
2
回答
webpack打包速度慢

webpack 打包速度比较慢,尤其是在windows上用, webpack.DllPlugin 和 webpack.DllReferencePlugin...

2017/12/21 17:17
1
回答
webpack中如何使用vue

@zTree 你好,想跟你请教个问题: 在webpack构建的vue项目中,如何使用ztree插件呢?

2017/09/14 13:38

没有更多内容

加载失败,请刷新页面

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
5
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
12
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
12
0
gulp与webpack-stream集成配置

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

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

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

2016/12/28 16:47
38
0
webpack4.0安装使用

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

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

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

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

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

2016/09/24 22:56
45
0
Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead...

2018/06/01 16:44
1K
0
168开奖网WebPack 学习:从阮神的15个DEMO开始

WebPack 是什么 168开奖网出售有需要可以点击联系 官方就一句话,打包所有的资源。 从阮神的 15 DEOM入手 Webpack Github 地址 阮神GIT 按照 ReadME 操作 npm webpack-dev-server ,为了能够...

2018/12/07 15:04
6
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部