本文目录
- 命令webpack和npm run webpack有什么区别
- webpack打包原理
- 什么是web pack
- Gulp和webpack的区别，是一种工具吗
- Webpack有哪些核心分别都代表了什么
- webpack到底有什么用
- 什么是WebPack，为什么要使用它
- Webpackz 最近非常火 谁能说下大概的意思是什么 看了几片文档还是不太懂
- 前端构建工具webpack有什么缺陷
- webpack和gulp有什么区别
命令webpack和npm run webpack有什么区别
webpack是webpack自带的一条打包命令，是最基本的打包命令。npm run webpack，则是在package.json文件中有一个script配置项，在这个script里面自定义的一条命令，它通过npm来运行。例如：
scripts“: {
“start“: “webpack --config webpack.config.js --progress --watch“
}
当脚本名为“start”时，可以省略“run”，直接为：
npm start
你说的属于这种情况：脚本名称为“webpack”
scripts“: {
“webpack“: “webpack --config webpack.config.js --progress --watch“
}
后面可以加一些参数来方便开发，执行下面这条语句
npm run webpack
就相当于执行脚本里的那一长串命令了
webpack打包原理
webpack打包原理是根据文件间的依赖关系对其进行静态分析，然后将这些模块按指定规则生成静态资源，当 webpack 处理程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
webpack有两种组织模块的依赖方式，同步、异步。异步依赖将作为分割点，形成一个新的块；在优化了依赖树之后，每一个异步区块都将作为一个文件被打包。
webpack有一个智能解析器，几乎可以处理任何第三方库。无论它们的模块形式是CommonJS、AMD还是普通的JS文件；甚至在加载依赖的时候，允许使用动态表require(“、/templates/“+name+“、jade“)。-run
扩展资料
在使用webpack构建的典型应用程序或站点中，有三种主要的代码类型：
1、团队编写的源码。
2、源码会依赖的任何第三方的library或“vendor“代码。
3、webpack的runtime和manifest，管理所有模块的交互。
runtime 包含：在模块交互时，连接模块所需的加载和解析逻辑；包括浏览器中的已加载模块的连接，以及懒加载模块的执行逻辑。
什么是web pack
1. 我是否需要系统管理员权限才能安装ISE WebPACK?
Windows2000用户必须是系统管理员或权限高的用户（power user ）才能进行注册。 如果您与第三方软件，如LeonardoSpectrum 或Model Sim XE III (MXE-III)一起使用ISE WebPACK，您需要修改注册表. 对于那些位于防火墙后，或公司有限制的人，如果您有关于代理服务器的问题，请咨询您的系统管理员。
在Red Hat Enterprise 3 Linux 上需要您以’root’登录才能成功安装 ISE WebPACK. 因为安装是在系统上安装驱动器，所以除非您以’root’登录，否则安装不会成功。
[返回页首]
2. ISE WebPACK可以安装到现有Xilinx工具所在的硬盘上吗？
可以，如果ISE WebPACK工具都安装到自己的目录中，他们就可以安装到现有Xilinx工具所在的同一硬盘上。
[返回页首]
3. 在 ISE Foundation 中包含了哪些 ISE WebPACK所不包含的工具?
没有, ISE WebPACK 包含了荣获众多奖项的 ISE Foundation 设计工具中全部的特性和功能。 区别仅仅在于 ISE Foundation 支持所有 FPGA 家族的器件。 ISE WebPACK 不支持某些大型 FPGA 器件。
[返回页首]
4. 我如何开始一个项目？
1 - 从项目浏览器中，选择File -》 New Project。 将会出现 New Project对话框。
2 - 在项目名称框中，键入您项目的名称。
3 - 通过指定项目位置选择项目文件的目录。 您可键入路径，或者点击浏览按钮找到一个放置项目文件的目录。
4 - 点击Device Family值，显示出已安装的Xilinx系列器件。
5 - 从列表中选择一个系列，然后点击第二列中的Device框，再选择特定的器件。 重复上述过程选择器件封装和速度级.
6 - 选择Design Flow 框并选择希望用于设计综合的语言和编译器。
7 - 一旦建立好您的项目，您可选择项目浏览器中的Project 菜单项，您可创建一个新的源设计文件或者增加一个现有的源文件。
有关这些过程的更多信息可从Help菜单》》 ISE Help Contents 选项中找到。
[返回页首]
5. 无法打开安装（setup）程序。 错误编码 - 2147024890 下载网页, 请稍侯. 这错误是什么意思？
这错误信息是在你的个人电脑未安装 IE 浏览器,而你试图用Netscape打开Web Install 下载网页时所发生。 即使你不用,也必需安装 IE 浏览器。
[返回页首]
器件和功能支持
1. ISE WebPACK/ WebFITTER 应用支持什么器件?
ISE WebPACK支持下表中所列的器件：
FPGA
Virtex™ 系列 Virtex-E: XCV50E - XCV600E
Virtex-II: XC2V40 - XC2V600
Virtex-II Pro: XC2VP2 - XC2VP7
Virtex-4:
LX: XC4VLX15, XC4VLX25, XC4VSX25、XC4VFX12
Spartan™ 系列 Spartan-II: 全部
Spartan-IIE: 全部
Spartan-3: XC3S50 - XC3S1500
Spartan-3E: 全部
Spartan-3L: XC3S1000L, XC3S1500L
CPLD
CoolRunner-II
CoolRunner-IIA
CoolRunner-XPLA3 全部
XC9500 / XL / XV 系列 全部
[返回页首]
2. ISE WebPACK提供哪些功能和特点？
参见ISE WebPACK性能支持矩阵。
[返回页首]
3. 就适配或布局性能来说，ISE WebPACK和其它Xilinx工具间有什么区别吗？
没有，ISE WebPACK 软件包含与其它ISE系列成员同样的PLD布线算法。 因此具有同样的性能。
[返回页首]
4. ModelSim Xilinx 版- III (MXE-III) Starter的使用限制是什么?
MXE-III Starter的调试代码为10,000 行。 超过这一限制，进程开始慢下来，但不会停止。 该软件的用途依赖于使用的代码类型和仿真方式（功能或时序）。
[返回页首]
5. 仅仅想从独立的便携式电脑中进行器件编程需要什么软件？
ISE WebPACK 提供了模块化安装方法，允许您选择安装所需要的软件。 在 ISE WebPACK 的主页选择 WebInstall 并按照 CPLD 编程工具安装的选项进行。
[返回页首]
6. 我如何重新设置CPLD器件的速度等级? FPGA呢？
对CPLD和FPGA ，速度等级都是在项目创建时做为器件项目属性的一部分选择的。 要改变器件的速度等级，双击项目所选择的器件并选择不同速度等级的器件即可。
[返回页首]
杂项
1. ISE WebPACK支持ABEL器件的仿真吗？ 如何支持？
支持的。ISE WebPACK 集成了ABEL 7.5版，以及ABEL-XST VHDL 和ABEL-XST Verilog设计流程，因此可支持仿真.
请看设计流程中的项目属性菜单。 这些流程提供了Verilog 和VHDL网表，这些网表可在HDL Bencher中进行功能仿真，并可利用ModelSim XE starter使用进行适配后仿真。
[返回页首]
2. 我如何获得旧的ISE WebPACK软件以重新编译老设计？
ISE Classics页有与所有旧软件工具的链接。 这些旧版本的设计软件可根据需要下载。 为了避免不同版本的软件冲突，这些老版本软件应当安装到与现有ISE WebPACK版本不同的目录中。
[返回页首]
3. 对基于Web的应用提供支持吗？
基于Web的工具利用基于Web的支持。 享有 ISE Foundation 和其他产品相同的热线专家提供的在线技术支持，但是其在线问题的优先级低于全付费软件用户。 所有问题都会在10天内回答。 求助快速服务，我们提供直接的网络工具支持信息包，请与您当地的Xilinx代表处联系购买。
[返回页首]
4. ISE WebPACK将在什么时候更新?
ISE WebPACK 是Xilinx 软件配置规划的一部分. ISE WebPACK 将使用与ISE Foundation 或ISE BaseX™相同的安装程序. 这一改进还允许ISE WebPACK 利用软件服务包进行升级。 如果您下载了WebInstall小程序，该程序调用时将自动更新您的软件
[返回页首]
5. 我如何通过命令行运行ISE WebPACK？
ISE WebPACK命令行操作仅适用于CPLD。 您必须首先保证Xilinx环境变量设置正确。 在安装过程中，有自动设置环境变量的选项。 如果没有选择该选项，那么您需要手动设置环境变量指向ISE WebPACK安装位置。
XFLOW是允许您自动化 Xilinx实施和仿真流程的命令行工具。 XFLOW可将设计文件、流程文件和选项文件作为输入。 如果想了解有关这方面的更多信息，请参考在线帮助手册中 开发系统参考指南部分的内容。
[返回页首]
6. 什么平台支持ISE WebPACK？
支持的操作系统有: Windows XP, Windows 2000 Service Pack 2 (中文, 韩文, 英文, 日文) 和 Red Hat Enterprise 3 Linux.
-c
Gulp和webpack的区别，是一种工具吗
gulp是工具链、构建工具，可以配合各种插件做js压缩，css压缩，less编译 替代手工实现自动化工作
1.构建工具
2.自动化
3.提高效率用
webpack是文件打包工具，可以把项目的各种js文、css文件等打包合并成一个或多个文件，主要用于模块化方案，预编译模块的方案
1.打包工具
2.模块化识别
3.编译模块代码方案用
所以定义和用法上来说 都不是一种东西，无可比性 ，更不冲突！【当然，也有相似的功能，比如合并，区分，但各有各的优势】
-run
Webpack有哪些核心分别都代表了什么
有四个核心：
1.入口文件：entr
入口文件根据依赖关系确定要打包的内容 可以将入口文件认为是第一个启动文档。
2.出口：output
可以控制webpack如何向硬盘写入编译文件 在webpack中配置output属性的最低要求是 将他的值设置值为一个对象 包括path 和 filename Path 是目标输出目录的绝对路径 Filename 是用于输出文件的文件名。
3.Loader
可以是在import或者加载模块时与处理文件 也就是类似于其他构件工具中“任务” 并且提供了前端构建步骤的强大方法。Loader中有两个目标 一是识别中被对应的loader进行转换的那些文件 二是转换这些文件 使其能够被添加到依赖图中。
4.插件
插件是webpack的支柱功能 webpack自身也是构建与插件系统之上 插件的目的在于解决loader无法解决的其他事。 （BY三人行慕课）
-c
webpack到底有什么用
1. 为什么用 webpack?
他像 Browserify, 但是将你的应用打包为多个文件. 如果你的单页面应用有多个页面, 那么用户只从下载对应页面的代码. 当他么访问到另一个页面, 他们不需要重新下载通用的代码.
他在很多地方能替代 Grunt 跟 Gulp 因为他能够编译打包 CSS, 做 CSS 预处理, 编译 JS 方言, 打包图片, 还有其他一些.
它支持 AMD 跟 CommonJS, 以及其他一些模块系统, (Angular, ES6). 如果你不知道用什么, 就用 CommonJS.
2. Webpack 给 Browserify 的同学用
对应地:
browserify main.js 》 bundle.js
webpack main.js bundle.js
Webpack 比 Browserify 更强大, 你一般会用 webpack.config.js 来组织各个过程:
// webpack.config.js
module.exports = {
entry: ’./main.js’,
output: {
filename: ’bundle.js’
}
};
这仅仅是 JavaScript, 可以随意添加要运行的代码.
3. 怎样启动 webpack
切换到有 webpack.config.js 的目录然后运行:
webpack 来执行一次开发的编译
webpack -p for building once for production (minification)
webpack -p 来针对发布环境编译(压缩代码)
webpack --watch 来进行开发过程持续的增量编译(飞快地!)
webpack -d 来生成 SourceMaps
4. JavaScript 方言
Webpack 对应 Browsserify transform 和 RequireJS 插件的工具称为 loader. 下边是 Webpack 加载 CoffeeScript 和 Facebook JSX-ES6 的配置(你需要 npm install jsx-loader coffee-loader):
// webpack.config.js
module.exports = {
entry: ’./main.js’,
output: {
filename: ’bundle.js’
},
module: {
loaders: [
{ test: /\.coffee$/, loader: ’coffee-loader’ },
{ test: /\.js$/, loader: ’jsx-loader?harmony’ } // loaders 可以接受 querystring 格式的参数
]
}
};
要开启后缀名的自动补全, 你需要设置 resolve.extensions 参数指明那些文件 Webpack 是要搜索的:
// webpack.config.js
module.exports = {
entry: ’./main.js’,
output: {
filename: ’bundle.js’
},
module: {
loaders: [
{ test: /\.coffee$/, loader: ’coffee-loader’ },
{ test: /\.js$/, loader: ’jsx-loader?harmony’ }
]
},
resolve: {
// 现在可以写 require(’file’) 代替 require(’file.coffee’)
extensions: [’’, ’.js’, ’.json’, ’.coffee’]
}
};
5. 样式表和图片
首先更新你的代码用 require() 加载静态资源(就像在 Node 里使用 require()):
require(’./bootstrap.css’);
require(’./myapp.less’);
var img = document.createElement(’img’);
img.src = require(’./glyph.png’);
当你引用 CSS(或者 LESS 吧), Webpack 会将 CSS 内联到 JavaScript 包当中, require() 会在页面当中插入一个 ｀《style》标签. 当你引入图片, Webpack 在包当中插入对应图片的 URL, 这个 URL 是由require()` 返回的.
你需要配置 Webpack(添加 loader):
// webpack.config.js
module.exports = {
entry: ’./main.js’,
output: {
path: ’./build’, // 图片和 JS 会到这里来
publicPath: ’http://mycdn.com/’, // 这个用来成成比如图片的 URL
filename: ’bundle.js’
},
module: {
loaders: [
{ test: /\.less$/, loader: ’style-loader!css-loader!less-loader’ }, // 用 ! 来连接多个人 loader
{ test: /\.css$/, loader: ’style-loader!css-loader’ },
{test: /\.(png|jpg)$/, loader: ’url-loader?limit=8192’} // 内联 base64 URLs, 限定 《=8k 的图片, 其他的用 URL
]
}
};
6. 功能开关
有些代码我们只想在开发环境使用(比如 log), 或者 dogfooging 的服务器里边(比如内部员工正在测试的功能). 在你的代码中, 引用全局变量吧:
if (__DEV__) {
console.warn(’Extra logging’);
}
// ...
if (__PRERELEASE__) {
showSecretFeature();
}
然后配置 Webpack 当中的对应全局变量:
// webpack.config.js
// definePlugin 接收字符串插入到代码当中, 所以你需要的话可以写上 JS 的字符串
var definePlugin = new webpack.DefinePlugin({
__DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || ’true’)),
__PRERELEASE__: JSON.stringify(JSON.parse(process.env.BUILD_PRERELEASE || ’false’))
});
module.exports = {
entry: ’./main.js’,
output: {
filename: ’bundle.js’
},
plugins: [definePlugin]
};
然后你在控制台里用 BUILD_DEV=1 BUILD_PRERELEASE=1 webpack 编译. 注意一下因为 webpack -p 会执行 uglify dead-code elimination, 任何这种代码都会被剔除, 所以你不用担心秘密功能泄漏.
7. 多个进入点(entrypoints)
比如你用 profile 页面跟 feed 页面. 当用户访问 profile, 你不想让他们下载 feed 页面的代码. 因此你创建多个包: 每个页面一个 “main module“:
// webpack.config.js
module.exports = {
entry: {
Profile: ’./profile.js’,
Feed: ’./feed.js’
},
output: {
path: ’build’,
filename: ’[name].js’ // 模版基于上边 entry 的 key
}
};
针对 profile, 在页面当中插入 《script src=“build/Profile.js“》《/script》. feed 页面也是一样.
8. 优化共用代码
feed 页面跟 profile 页面共用不要代码(比如 React 还有通用的样式和 component). Webpack 可以分析出来他们有多少共用模块, 然后生成一个共享的包用于代码的缓存.
// webpack.config.js
var webpack = require(’webpack’);
var commonsPlugin =
new webpack.optimize.CommonsChunkPlugin(’common.js’);
module.exports = {
entry: {
Profile: ’./profile.js’,
Feed: ’./feed.js’
},
output: {
path: ’build’,
filename: ’[name].js’
},
plugins: [commonsPlugin]
};
在上一个步骤的 script 标签前面加上 《script src=“build/common.js“》《/script》 你就能得到廉价的缓存了.
9. 异步加载
CommonJS 是同步的, 但是 Webpack 提供了异步指定依赖的方案. 这对于客户端的路由很有用, 你想要在每个页面都有路由, 但你又不像在真的用到功能之前就下载某个功能的代码.
声明你想要异步加载的那个“分界点“. 比如:
if (window.location.pathname === ’/feed’) {
showLoadingState();
require.ensure(, function() { // 语法奇葩, 但是有用
hideLoadingState();
require(’./feed’).show(); // 函数调用后, 模块保证在同步请求下可用
});
} else if (window.location.pathname === ’/profile’) {
showLoadingState();
require.ensure(, function() {
hideLoadingState();
require(’./profile’).show();
});
}
Webpack 会完成其余的工作, 生成额外的 chunk 文件帮你加载好.
Webpack 在 HTML script 标签中加载他们时会假设这些文件是怎你的根路径下. 你可以用 output.publicPath 来配置.
// webpack.config.js
output: {
path: “/home/proj/public/assets“, // path 指向 Webpack 编译能的资源位置
publicPath: “/assets/“ // 引用你的文件时考虑使用的地址
-run
什么是WebPack，为什么要使用它
为什要使用WebPack
现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法
模块化，让我们可以把复杂的程序细化为小的文件;
类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能转换为JavaScript文件使浏览器可以识别；
Scss，less等CSS预处理器
...
这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的，这就为WebPack类的工具的出现提供了需求。
什么是Webpack
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
来自：https://segmentfault.com/a/1190000006178770
-c
Webpackz 最近非常火 谁能说下大概的意思是什么 看了几片文档还是不太懂
前端构建工具;模块打包器
可以帮助你把很多js/css文件打包成一个js/css文件并在全局引入。
构建各模块的依赖关系。
当一个项目文件很少的时候或许不用这个工具，但是当有很多模块，很多文档时，引入这个webpack能够快速构建项目。
如果想理解webpack，必须先理解“模块”的概念，在项目中的应用。
-run
前端构建工具webpack有什么缺陷
1.文档缺失，尤其中文文档
长期以来webpack官方文档和example匮乏，提供的一些例子都是很简单那种，经常发现完全按照例子来配置但就是跑不起来，中文文档就更不用说了，少的可怜。这个问题也直接导致下面的第2点。
2.配置难&难调试
稍微复杂一点的项目，如果使用webpack编译，不经过一段痛苦不堪的配置调试过程是没法正常跑起来的。这还没完，在自己机器上跑起来之后可能到了另一个同事哪儿又报错了等等。总之正如下面有人回答那样，配置文件一旦跑起来，是根本不敢去改的，生怕又出错。
webpack的错误提示也非常难看懂，基本不可能从错误很直观的找到原因，长期以来碰到问题只能靠猜，你没看错，就是靠猜！！
3.编译慢
经验不足的同学很容易碰到这个问题，当然可以通过一些手段做优化，比如配置module的resolve、root等，使用happypack加速、dll提前编译等等。但是笔者曾经尝试过happypack，对编译速度有提升但效果不明显，dll的话我有按照官方文档的做法去做，但是最终编译出来又报了一些莫名其妙的错（也有可能是代码写的有问题），总之心累，后来直接改成externals方式，全局script引入第三方库。
4.对server-render不友好
webpack本质上还是静态打包，意思就是打包完成之后其实文件的加载顺序已经固定，只是被加载的时间不定而已。所以使用webpack原则上不存在按需加载之类的说法，code split其实是人工分隔，但是真实的按需加载场景岂是人工能枚举完的 （下划线这句话不太好解释，也不想过多解释，熟悉前端工程的人应该都明白啥意思）。
在这里我要说的对server-render不友好其实是指html的处理，webpack其实是通过在js里用require标记资源然后加载任意资源（css、图片、fonts等等），但其实html文件才是页面真实的入口，最终编译出的js还是需要引入到html里，为了防止css懒加载导致页面抖动，编译完的css还需要从js里边提取出来放到html外链。
目前一般都是通过html-webpack-plugin来做这个事情，先搜集某个html所引用的静态资源最终自动插入到html。这种方式对于前端渲染的应用没有问题，但是对于server-render的那就不行了，因为server-render下html是作为模板由后端语言吐出，而开发模式下（例如webpack-dev-server）webpack是不会输出任何文件的（开发环境webpack是将文件放到内存然后在路由层自动serve了），所以这会导致开发环境模板无法引用静态资源。当然，有一种解决方案就是静态资源不改变文件名称，预先写好路径，开发环境和生产环境同名（即覆盖式发布）。
-c
webpack和gulp有什么区别
Gulp应该和Grunt比较，他们的区别我就不说了，说说用处吧。Gulp / Grunt 是一种工具，能够优化前端工作流程。比如自动刷新页面、combo、压缩css、js、编译less等等。简单来说，就是使用Gulp/Grunt，然后配置你需要的插件，就可以把以前需要手工做的事情让它帮你做了。
说到 browserify / webpack ，那还要说到 seajs / requirejs 。这四个都是JS模块化的方案。其中seajs / require 是一种类型，browserify / webpack 是另一种类型。
seajs / require : 是一种在线“编译“ 模块的方案，相当于在页面上加载一个 CMD/AMD 解释器。这样浏览器就认识了 define、exports、module 这些东西。也就实现了模块化。
browserify / webpack : 是一个预编译模块的方案，相比于上面 ，这个方案更加智能。没用过browserify，这里以webpack为例。首先，它是预编译的，不需要在浏览器中加载解释器。另外，你在本地直接写JS，不管是 AMD / CMD / ES6 风格的模块化，它都能认识，并且编译成浏览器认识的JS。
这样就知道，Gulp是一个工具，而webpack等等是模块化方案。Gulp也可以配置seajs、requirejs甚至webpack的插件。
-run
