Webpack 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
Webpack 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
Webpack 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
Webpack 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
Webpack 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !
授权协议 MIT
操作系统 跨平台
软件类型 开源软件
开源组织 Linux 基金会
地区 不详
投 递 者 红薯
适用人群 未知
收录时间 2014-07-27

软件简介

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

代码

的 Gitee 指数为
超过 的项目

评论 (7)

加载中
#Webpack# 4.0.0 正式来袭
2018/02/25 22:48
回复
举报
2017/11/06 09:32
回复
举报
打分: 很差
该评论暂时无法显示,详情咨询 QQ 群:912889742
赞同你
2020/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
回复
举报
更多评论
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
2020/04/23 10:24

2020入坑前端,来自90后老男孩的最后一次挣扎

本身Java后台开发,有一点前端开发基础,了解vue全家桶、webpack、ES6语法,但不懂的地方也很多,例如: 网页是怎么响应式布局的 HTML、CSS的一些高级用法都不会 大的前端项目具体架构是什么样的,怎么开发的,在哪些地方用到了那些组件、技术 前端框架、UI框架有什么用,在项目里要用这些框架吗? …… 总体来说就是一个前端小白,好在有软件开发基础,前端的代码还能看懂一些 我的计划: 1、看《CSS权威指南 第四版》,HTML5...

39
2
2019/04/17 14:40

前端有办法一次开发,全平台通用吗?比如小程序,h5,vue,react各种框架。

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

10
0
发表于DevOps专区
2019/11/18 17:14

vue 编译后如何嵌入到类似 jsp 老系统中?

背景:一个老项目,前后端未分离,前端用的类似 jsp 这种技术,和后端是一期打包发布。现在要做一个大需求模块,和原来系统有关联,但不是很大,想使用 vue,jsp 这种技术已经不考虑的,开发太慢了。 手段:新模块单独起个工程,采用 vue 开发。在老系统新增一个菜单 /目录,新模块编译好将文件放置老系统对应目录,然后老系统向以前一样随后端一期打包部署。 问题:如何打包 vue 工程,编译好又如何嵌入老系统? 否定方案:新系...

6
0
发表于大前端专区
2018/07/24 16:32

webpack将多个JS 打包,作为一个库来使用,该怎么在其他项目中引用

如图我生成了 一个study.xxx.js 这个是我将多个js文件一起打包的 commonjs是提取的公用方法。 引用: 尝试1:我将生成的包拉进了一个新工程里;在引用了这个文件。但当我使用其中的方法时报错:'webpackJsonp' is not defined 。这个错误原因就是 webpackjsonP未定义;后来我发现公用方法commonjs中定义了 webpackjsonp。我又将commonjs引入但是当我编译的时候却是 commonjs内容格式错误。我觉得应该不是内容错误,应该是我用的...

1
0
2019/07/05 10:53

electron+vue环境下加载其它人开发功能或项目

项目:electron+vue 前提:我司项目主框架,是一个主项目,每个人负责一个子功能,每个功能都是一个项目。假设同事张三写个功能,如计算器calculate.vue; 期待:张三写完功能后,将整个张三的项目或仅仅一个vue文件,经过若干操作(打包、发布等等),得到一个打包后的文件calculate.app。然后我得到这个文件,放到某个目录下,如static/app/。然后我就可以import Calculate from calculate,进而在tamplate中使用<calculate>...

2
0
发表于开发技能专区
2019/06/12 10:05

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

最近接手一个项目,项目已经做好了,但是不兼容ie,用的是iview;然后在网上找了很多兼容ie的例子,都发现这个项目没有bulid文件,找不到webpack配置文件;都不知道这个从哪里下手了,以前没有过iview;写了个demo也能在ie上运行;所以请教各位大佬;这个是什么原因???

4
0
2019/06/12 20:45

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

最近接手别人的项目,我资历尚浅,发现这个项目每次终端运行打开的时候,都需要很长时间 热更新就更慢了 不知道有没有大佬愿意花时间教教我的 可以贡献一个项目的代码包 如果能帮我解决问题,我出点钱也行,只是迫切想知道解决的方案 还请各位大佬在百般忙碌之中能帮我看一看这个问题 感激不尽

2
0
发表于服务端专区
2019/05/08 10:03

目标:vue项目,在谷歌控制台source中通过搜索组件名称,搜索到vue组件源码,如何配置webpack

# dev开发环境

4
0
2019/04/24 11:42

webpack vue 打包一直再报es6 的 问题?

npm ERR! Exit status 1 ERROR in static/js/0.1f806b0b6172f1f7121b.js from UglifyJs Unexpected token: punc (() [static/js/0.1f806b0b6172f1f7121b.js:141,6] npm ERR! This is probably not a problem with npm. There is likely additional logging output above. ERROR in static/js/1.9224e8645c0786209540.js from UglifyJs Unexpected token: punc (() [static/js/1.9224e8645c0786209540.js:187,9] npm ERR! C:\Use...

1
0
2019/03/01 11:43

NodeJS代码webpack打包到html上使用的问题

nodejs代码test.js function Student(name, age) { this.name = name; this.age = age; } module.exports = Student; 在另外一个hello.js文件里可以使用 var Student = require("./test"); exports.test = function() { var stu = new Student(); stu.name = "Jack"; stu.age = 20; console.log(stu.name); } 但是用webpack打包test.js成main.js在html文件中引用,new Student()报错Uncau...

2
1
发表了问答
2016/10/31 11:31

明明没有也能热部署,在React开发中,还有必要配置HotModuleReplacementPlugin 插件吗?

RT, 网上文章清一色都说需要配置这个插件来热部署。 我也赞同热部署很重要很方便,但我现在没有配置这个插件,明明也能热部署自动刷新啊?下面是我的webpack配置: module.exports = {    entry: __dirname + "/app/main.js", output: { path: __dirname + "/public", filename: "bundle.js" }, module: { loaders: [ { test: /\.json$/, loader: "json" }, { ...

2
0
2018/09/09 20:06

webpack打包后的不是本地代码

就是接手上个前端vue项目,他用的是SVN,我换成了,增加新功能后本地npm run dev,运行起来没毛病,然后打包,上传到服务器发现,自己新增的新功能并没有,但是确实是在我写好的文件夹跟目录运行的build 也打包成功了。dist放进nginx测试,发现和本地运行有所区别。(例如我现在改掉了这个表格的宽度)执行打包命令,放进nginx文件夹测试结果如图

2
1
2018/08/20 16:26

webpack 打包出错

.babelrc文件 package文件 npm run dev不报错 build就编译失败了,求大神解答!

2
0
发表于开发技能专区
2018/07/02 10:43

火狐浏览器刷新偶尔出现报错 TypeError: e is null

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

2
0
2018/06/27 17:29

nginx如何配置restful api反向代理?

问题描述: 前后端分离项目需要配置nginx负载均衡(反向代理) 1、前端项目是使用webpack搭建的一个vue + element + axios项目 2、后端采用springboot来快速开发接口,并且API接口使用了restful风格,shiro做安全验证 目前跨域问题是采用后台配置cors解决(nginx反向代理亦可),现在碰到一个问题: 由于restful api 并没有后缀给nginx匹配把http://localhost:8080/api/xxx这样的URL反向代理给tomcat 试过如下配置 location / {...

1
0
发表了问答
2017/11/08 11:46

React使用echarts图表,webpack打包后包还是很大该怎么办

使用React框架,是多页面应用,引入了echarts图表,最后webpack打包出来的文件还是很大(已经配置为生产环境,进行过压缩)。 打包压缩后, 引入的echarts: webpack配置文件: jquery通过外链cdn方式引入的,但是echarts通过相同方式引入就一直报can not find modules 错误 所以,老哥们,怎么能让包再小一点啊,最好能不把echarts打进我自己的包里,能用cdn外链方式引入就好了。 感激不尽!!如果有没描述清楚的,我会及时补充...

5
0
发表于DevOps专区
2018/04/28 15:45

React项目中热更新问题

配置文件: const webpack = require('webpack') const HtmlWebpackPlugin = require('html-webpack-plugin'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { devtool: 'false', entry: __dirname + "/public/js/index.js", output: { path: __dirname + "/build", filename: "bundle.js" }, devServer: { historyApiFallback: true, ...

1
0
发表于大前端专区
2018/01/31 10:35

vue-cli如何设置proxytable

用脚手架生成项目vue create projectname之后结构是这样的 里面并没有vue init webpack xxx这种方式生成的config目录,也没有分环境的dev/prod什么的配置文件,只有一个package.json,请问该如何配置proxytable呢?

3
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
7 评论
111 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部