webpack命令运行

Ⅰ htmlwebpackplugin配置后直接运行不显示内容

win+r，然后找到菜单标签，运行cmd，回车，关掉窗口，就有内容了。
快捷键win+r打开运行窗口，然后点击小三角看到是空记录的，我们找到开始按钮，右键选择属性，再出的界面点击开始菜单标签，再出的界面点击开始菜单标签，然后我们再次打开运行窗口输入CMD命令，按回车，然后关掉该窗口，点击三角号，这回我们发现有记录了。

Ⅱ webpack build命令怎么写

Compilation 源文件
插件基本结构
Plugins是可以用自身原型方法apply来实例化的对象。apply只在安装插件被Webpack compiler执行一次。apply方法传入一个Webpck compiler的引用，来访问编译器回调。
一个简单的插件结构：
function HelloWorldPlugin(options) {
// Setup the plugin instance with options...
}
HelloWorldPlugin.prototype.apply = function(compiler) {
compiler.plugin('done', function() {
console.log('Hello World!');
});
};
mole.exports = HelloWorldPlugin;
安装插件时, 只需要将它的一个实例放到 Webpack config plugins 数组里面:
var HelloWorldPlugin = require('hello-world');
var webpackConfig = {
// ... config settings here ...
plugins: [
new HelloWorldPlugin({options: true})
]
};
访问 compilation
使用compiler对象，你可能需要绑定带有各个新compilation的引用的回调函数。这些compilation提供回调函数连接成许多构建过程中的步骤。
function HelloCompilationPlugin(options) {}
HelloCompilationPlugin.prototype.apply = function(compiler) {
// Setup callback for accessing a compilation:
compiler.plugin("compilation", function(compilation) {
// Now setup callbacks for accessing compilation steps:
compilation.plugin("optimize", function() {
console.log("Assets are being optimized.");
});
});
});
mole.exports = HelloCompilationPlugin;
更多关于在compiler, compilation等对象中哪些回调有用，看一下
plugins API
异步编译插件
有些compilation插件的步骤时异步的，并且会传入一个当你的插件运行完成时候必须调用的回调函数。
function HelloAsyncPlugin(options) {}
HelloAsyncPlugin.prototype.apply = function(compiler) {
compiler.plugin("emit", function(compilation, callback) {
// Do something async...
setTimeout(function() {
console.log("Done with async work...");
callback();
}, 1000);
});
});
mole.exports = HelloAsyncPlugin;
例子
我们了解了Webpack compiler和各个compilations，我们就可以用它们来创造无尽的可能。我们可以重定当前文件的格式，生成一个衍生文件，或者制造出一个全新的assets
下面我们将写一个简单的插件，生成一个filelist.md文件，里面的内容是，列出我们build的所有asset 文件。
function FileListPlugin(options) {}
FileListPlugin.prototype.apply = function(compiler) {
compiler.plugin('emit', function(compilation, callback) {
// Create a header string for the generated file:
var filelist = 'In this build:\n\n';
// Loop through all compiled assets,
// adding a new line item for each filename.
for (var filename in compilation.assets) {
filelist += ('- '+ filename +'\n');
}
// Insert this list into the Webpack build as a new file asset:
compilation.assets['filelist.md'] = {
source: function() {
return filelist;
},
size: function() {
return filelist.length;
}
};
callback();
});
};
mole.exports = FileListPlugin;

Ⅲ npm安装webpack,运行webpack-v，提示node不是内部或外部命令，运行node -v是正常的

重新安装webpack 安装全局的

使用 这个命令

npm i webpack -g

Ⅳ webpack可以提高代码的运行效率吗

工具常见模块化开发规范：CMD（seaJS）AMD（requireJS）一、webpack环境搭建1.webpack安装首先需要安装nodeJS，先在nodeJS官网下载，进行NodeJS安装下载地址https://nodejs.org/en/download/下载完毕后，进行安装，一切都以默认的选择即可2.npm安装安装完毕后，打开cmd工具，输入命令npminstall--savemocha等待安装完毕3.webpack安装cmd工具中，输入命令npminstallwebpack-g执行命令安装webpack到此webpack安装完毕，可以使用webpack-h来查看版本号到此，webpack安装完成二、webpack打包1.打开cmd工具，进入你的开发文件夹，其中此文件夹必须包含webpack.config.js文件，config配置参考如下varwebpack=require("webpack")mole.exports={entry:{"mcDemoMain":"./mcDemoMain.js"//直接require进来的文件会直接打包到这个文件中，如require('./common/Enum')，延迟加载的文件则不会，如require("bundle?lazy&name=demo!./demo/demo1")},output:{path:"../../dist/demo/1.0",//设置打包后的js的输出位置filename:"[name].js",//和入口文件的名字相同chunkFilename:"[name].young.js",//值模块里需要单独打包的文件require.ensure//path:path.join(__dirname,'static/js/app/dist'),//设置打包后的js的输出位置//filename:"[name].[hash].js",//和入口文件的名字相同publicPath:"[sDomain]static/dist/demo/1.0/"//浏览器会从这个目录开始查找模块},mole:{loaders:[//{test:/\.css$/,loader:"style!css"},//{test:/\.js[x]?$/,exclude:/node_moles/,loader:'babel-loader',query:{presets:'es2015'}},]},plugins:[newwebpack.BannerPlugin('文件顶部注释说明'),//newwebpack.IgnorePlugin(/\.\/AsnyMoleA.js$/),//排除不想打包进去的插件//newwebpack.ProvidePlugin({//这是把jquery挂到全局上，不用每个模块都去require//"AsnyMoleA":'../../../dist/demo/AsnyMoleA.js',//}),//newwebpack.optimize.CommonsChunkPlugin('common.js')//有多个入口文件的话提取公共部分，利用浏览器缓存然后commonsPlugin可以用于分析模块的共用代码,单独打一个包出来:],resolve:{//molesDirectories:'C:\Users\Administrator\AppData\Roaming\npm\node_moles',//["C:\Users\Administrator\AppData\Roaming\npm\node_moles"],//root:'C:\Users\Administrator\AppData\Roaming\npm\node_moles',alias:{//jquery:path.join(__dirname,'dev/jquery/jquery.js'),//AsnyMoleA:"../../../dist/demo/start/commom/AsnyMoleA.js",//在正常情况下我们以CommonJS风格引用avalon,以require('avalon')//'../avalon':path.join(__dirname,'dev/avalon/avalon.js')//由于oniui都以是../avalon来引用avalon的，需要在这里进行别名}},//externals:{//'AsnyMoleA':'AsnyMoleA'//}}2.cmd进入开发目录后，输入webpack就可以进行打包了，如果显示以下则表示成功

Ⅳ 怎么解决webpack@1

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.

Ⅵ webpack执行机制流程是怎么样的

几乎所有业务的开发构建都会用到 webpack 。的确，作为模块加载和打包神器，只需配置几个文件，加载各种 loader 就可以享受无痛流程化开发。但对于 webpack 这样一个复杂度较高的插件集合，它的整体流程及思想对我们来说还是很透明的。那么接下来我会带你了解 webpack 这样一个构建黑盒，首先来谈谈它的流程。 准备工作 1. webstorm 中配置 webpack-webstorm-debugger-script 在开始了解之前，必须要能对 webpack 整个流程进行 debug ，配置过程比较简单。 先将 webpack-webstorm-debugger-script 中的软件外包企业公司 置于 webpack.config.js 的同一目录下，搭建好你的脚手架后就可以直接 Debug 这个 webstorm-debugger.js 文件了。 2. webpack.config.js 配置 估计大家对 webpack.config.js 的配置也尝试过不少次了，这里就大致对这个配置文件进行个分析。 var path = require('path'); var node_moles = path.resolve(__dirname, 'node_moles'); var pathToReact = path.resolve(node_moles, 'react/dist/react.min.js'); mole.exports = { // 入口文件，是模块构建的起点，同时每一个入口文件对应最后生成的一个 chunk。 entry: { bundle: [ 'webpack/hot/dev-server', 'webpack-dev-server/client?', path.resolve(__dirname, 'app/app.js') ], }, // 文件路径指向(可加快打包过程)。 resolve: { alias: { 'react': pathToReact } }, // 生成文件，是模块构建的终点，包括输出文件与输出路径。 output: { path: path.resolve(__dirname, 'build'), filename: '[name].js', }, // 这里配置了处理各模块的 loader ，包括 css 预处理 loader ，es6 编译 loader，图片处理 loader。 mole: { loaders: [ { test: /\.js$/, loader: 'babel', query: { presets: ['es2015', 'react'] } } ], noParse: [pathToReact] }, // webpack 各插件对象，在 webpack 的事件流中执行对应的方法。 plugins: [ new webpack.HotMoleReplacementPlugin(); ] }; 除此之外再大致介绍下 webpack 的一些核心概念: loader : 能转换各类资源，并处理成对应模块的加载器。loader 间可以串行使用。 chunk : code splitting后的产物，也就是按需加载的分块，装载了不同的mole。 对于mole和chunk的关系可以参照webpack官方的这张图: plugin : webpack 的插件实体，这里以 UglifyJsPlugin 为例。 function UglifyJsPlugin(options) { this.options = options; } mole.exports = UglifyJsPlugin; UglifyJsPlugin.prototype.apply = function(compiler) { compiler.plugin("compilation", function(compilation) { compilation.plugin("build-mole", function(mole) { }); compilation.plugin("optimize-chunk-assets", function(chunks, callback) { // Uglify 逻辑 }); compilation.plugin("normal-mole-loader", function(context) { }); }); }; 在 webpack 中你经常可以看到 compilation.plugin('xxx', callback) ，你可以把它当作是一个事件的绑定，这些事件在打包时由 webpack 来触发。 3. 流程总览 在具体流程学习前，可以先通过这幅 webpack整体流程图 了解一下大致流程(建议保存下来查看)。 shell 与 config 解析 每次在命令行输入 webpack 后，操作系统都会去调用 ./node_moles/.bin/webpack 这个 shell 脚本。这个脚本会去调用./node_moles/webpack/bin/webpack.js 并追加输入的参数，如 -p , -w 。(图中 webpack.js 是 webpack 的启动文件，而 $@ 是后缀参数) 在 webpack.js 这个文件中 webpack 通过 optimist 将用户配置的 webpack.config.js 和 shell 脚本传过来的参数整合成 options 对象传到了下一个流程的控制对象中。 1. optimist 和 commander 一样，optimist 实现了 node 命令行的解析，其 API 调用非常方便。 var optimist = require("optimist"); optimist .boolean("json").alias("json", "j").describe("json") .boolean("colors").alias("colors", "c").describe("colors") .boolean("watch").alias("watch", "w").describe("watch") ... 获取到后缀参数后，optimist 分析参数并以键值对的形式把参数对象保存在 optimist.argv 中，来看看 argv 究竟有什么？ // webpack --hot -w { hot: true, profile: false, watch: true, ... } 2. config 合并与插件加载 在加载插件之前，webpack 将 webpack.config.js 中的各个配置项拷贝到 options 对象中，并加载用户配置在 webpack.config.js 的 plugins 。接着 optimist.argv 会被传入到 ./node_moles/webpack/bin/convert-argv.js 中，通过判断 argv 中参数的值决定是否去加载对应插件。(至于 webpack 插件运行机制，在之后的运行机制篇会提到) ifBooleanArg("hot", function() { ensureArray(options, "plugins"); var HotMoleReplacementPlugin = require("../lib/HotMoleReplacementPlugin"); options.plugins.push(new HotMoleReplacementPlugin()); }); ... return options; options 作为最后返回结果，包含了之后构建阶段所需的重要信息。 { entry: {},//入口配置 output: {}, //输出配置 plugins: [], //插件集合(配置文件 + shell指令) mole: { loaders: [ [Object] ] }, //模块配置 context: //工程路径 ... } 这和 webpack.config.js 的配置非常相似，只是多了一些经 shell 传入的插件对象。插件对象一初始化完毕， options 也就传入到了下个流程中。 var webpack = require("../lib/webpack.js"); var compiler = webpack(options); 编译与构建流程 在加载配置文件和 shell 后缀参数申明的插件，并传入构建信息 options 对象后，开始整个 webpack 打包最漫长的一步。而这个时候，真正的 webpack 对象才刚被初始化，具体的初始化逻辑在 lib/webpack.js 中，如下: function webpack(options) { var compiler = new Compiler(); ...// 检查options,若watch字段为true,则开启watch线程 return compiler; } ... webpack 的实际入口是 Compiler 中的 run 方法，run 一旦执行后，就开始了编译和构建流程 ，其中有几个比较关键的 webpack 事件节点。 compile 开始编译 make 从入口点分析模块及其依赖的模块，创建这些模块对象 build-mole 构建模块 after-compile 完成构建 seal 封装构建结果 emit 把各个chunk输出到结果文件 after-emit 完成输出 1. 核心对象 Compilation compiler.run 后首先会触发 compile ，这一步会构建出 Compilation 对象: compilation类图 这个对象有两个作用，一是负责组织整个打包过程，包含了每个构建环节及输出环节所对应的方法，可以从图中看到比较关键的步骤，如 addEntry() , _addMoleChain() , buildMole() , seal() , createChunkAssets() (在每一个节点都会触发 webpack 事件去调用各插件)。二是该对象内部存放着所有 mole ，chunk，生成的 asset 以及用来生成最后打包文件的 template 的信息。 2. 编译与构建主流程 在创建 mole 之前，Compiler 会触发 make，并调用 Compilation.addEntry 方法，通过 options 对象的 entry 字段找到我们的入口js文件。之后，在 addEntry 中调用私有方法 _addMoleChain ，这个方法主要做了两件事情。一是根据模块的类型获取对应的模块工厂并创建模块，二是构建模块。 而构建模块作为最耗时的一步，又可细化为三步: 调用各 loader 处理模块之间的依赖 webpack 提供的一个很大的便利就是能将所有资源都整合成模块，不仅仅是 js 文件。所以需要一些 loader ，比如 url-loader ，jsx-loader ， css-loader 等等来让我们可以直接在源文件中引用各类资源。webpack 调用 doBuild() ，对每一个 require() 用对应的 loader 进行加工，最后生成一个 js mole。 Compilation.prototype._addMoleChain = function process(context, dependency, onMole, callback) { var start = this.profile && +new Date(); ... // 根据模块的类型获取对应的模块工厂并创建模块 var moleFactory = this.dependencyFactories.get(dependency.constructor); ... moleFactory.create(context, dependency, function(err, mole) { var result = this.addMole(mole); ... this.buildMole(mole, function(err) { ... // 构建模块，添加依赖模块 }.bind(this)); }.bind(this)); }; 调用 acorn 解析经 loader 处理后的源文件生成抽象语法树 AST Parser.prototype.parse = function parse(source, initialState) { var ast; if(!ast) { // acorn以es6的语法进行解析 ast = acorn.parse(source, { ranges: true, locations: true, ecmaVersion: 6, sourceType: "mole" }); } ... }; 遍历 AST，构建该模块所依赖的模块 对于当前模块，或许存在着多个依赖模块。当前模块会开辟一个依赖模块的数组，在遍历 AST 时，将 require() 中的模块通过addDependency() 添加到数组中。当前模块构建完成后，webpack 调用 processMoleDependencies 开始递归处理依赖的 mole，接着就会重复之前的构建步骤。 Compilation.prototype.addMoleDependencies = function(mole, dependencies, l, cacheGroup, recursive, callback) { // 根据依赖数组(dependencies)创建依赖模块对象 var factories = []; for(var i = 0; i < dependencies.length; i++) { var factory = _this.dependencyFactories.get(dependencies[i][0].constructor); factories[i] = [factory, dependencies[i]]; } ... // 与当前模块构建步骤相同 } 3. 构建细节 mole 是 webpack 构建的核心实体，也是所有 mole的 父类，它有几种不同子类：NormalMole , MultiMole ,ContextMole , DelegatedMole 等。但这些核心实体都是在构建中都会去调用对应方法，也就是 build() 。来看看其中具体做了什么: // 初始化mole信息，如context,id,chunks,dependencies等。 NormalMole.prototype.build = function build(options, compilation, resolver, fs, callback) { this.buildTimestamp = new Date().getTime(); // 构建计时 this.built = true; return this.doBuild(options, compilation, resolver, fs, function(err) { // 指定模块引用，不经acorn解析 if(options.mole && options.mole.noParse) { if(Array.isArray(options.mole.noParse)) { if(options.mole.noParse.some(function(regExp) { return typeof regExp === "string" ? this.request.indexOf(regExp) === 0 : regExp.test(this.request); }, this)) return callback(); } else if(typeof options.mole.noParse === "string" ? this.request.indexOf(options.mole.noParse) === 0 : options.mole.noParse.test(this.request)) { return callback(); } } // 由acorn解析生成ast try { this.parser.parse(this._source.source(), { current: this, mole: this, compilation: compilation, options: options }); } catch(e) { var source = this._source.source(); this._source = null; return callback(new MoleParseError(this, source, e)); } return callback(); }.bind(this)); }; 对于每一个 mole ，它都会有这样一个构建方法。当然，它还包括了从构建到输出的一系列的有关 mole 生命周期的函数

Ⅶ webpack问题。。。，。。。，

webpack-dev-server有两种推荐的用法
1、命令行方式。这个取决于你的webpack.config.js文件，然后调用“node_moles/.bin/webpack-dev-server”
2、npm script的方式。

可能你文件路径或者调用命令行写法有误吧