Tag: Webpack

Webpack和外部库

我正在尝试webpack( http://webpack.github.io/ ),它看起来非常好,但我有点卡在这里。 说我正在使用一个CDN库,f.ex jQuery。 然后在我的代码中,我想让require('jquery')自动指向全局jquery实例,而不是试图从我的模块中包含它。 我试过使用像IgnorePlugin这样的IgnorePlugin : new webpack.IgnorePlugin(new RegExp("^(jquery|react)$")) 这可以忽略这个库,但是它仍然会说当我运行webpacker的时候需要的模块是“丢失”的。 不知何故,我需要告诉webpack,应该从全局上下文中取代jquery 。 看起来像一个常见的用例,所以我有点惊讶,文档没有针对这个具体。

如何在不需要语句的情况下使用webpack加载子目录中的所有文件

我的应用程序中有大量的javascript文件分成4个子目录。 在咕I中,我抓住了所有这些,并将它们编译成一个文件。 这些文件没有module.exports函数 我想使用webpack并将其分为4个部分。 我不想手动进去,并要求我所有的文件。 我想创build一个在编译时遍历目录树的插件,然后抓取所有的.js文件名和path,然后需要子目录中的所有文件并将其添加到输出中。 我希望将每个目录中的所有文件编译成一个模块,然后我可以从我的入口点文件中获取所需的模块,或者将其包含在http://webpack.github.io/docs/plugins.html提及的资源中。 当添加一个新的文件,我只想把它放在正确的目录,并知道它将被包括在内。 有没有办法做到这一点与webpack或有人写了这样做的插件?

NPM与Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack

我试图总结一下最stream行的JavaScript包pipe理器,打包器和任务运行器的知识。 请纠正我,如果我错了: npm & bower是包pipe理者。 他们只是下载依赖关系,不知道如何自己构build项目。 他们知道的是在获取所有依赖关系之后调用webpack / webpack / grunt 。 bower就像npm ,但build立平坦的依赖树(不像recursion的npm )。 这意味着npm为每个依赖获取依赖关系(可能会获取相同的几次),而bower期望您手动包含子依赖关系。 有时, bower和npm分别用于前端和后端(因为每兆字节可能在前端)。 grunt和gulp是任务运行器,可以自动执行所有可以自动化的任务(例如,编译CSS / Sass,优化映像,制作包并缩小/转储它)。 grunt与gradle (就像maven与gradle或者configuration与代码一样)。 Grunt基于configuration单独的独立任务,每个任务打开/处理/closures文件。 Gulp需要的代码量较less,基于Nodestream,这使得它可以构buildpipe道链(不重新打开相同的文件)并使其更快。 webpack ( webpack-dev-server ) – 对我来说,这是一个任务运行的热点重新加载的变化,让你忘记所有的JS / CSS的观察员。 npm / bower +插件可能取代任务跑步者。 他们的能力经常相交,所以如果你需要在npm +插件上使用gulp / grunt ,会有不同的含义。 但是对于复杂任务来说,任务运行者肯定更好(例如,“在每个构build中创build包,从ES6到ES5的转储,在所有浏览器模拟器上运行,通过ftp进行截图并部署到保pipe箱”)。 browserify允许为浏览器打包节点模块。 browserify vs node的require实际上是AMD与CommonJS 。 问题: 什么是webpack & webpack-dev-server ? 官方文档说这是一个模块打包器,但对我来说,这只是一个任务跑步者。 有什么不同? […]

如何复制静态文件与Webpackbuild立目录?

我正在尝试从Gulp转移到Webpack 。 在Gulp我有任务将所有文件和文件夹从/静态/文件夹复制到/ build /文件夹。 如何做到与Webpack ? 我需要一些插件吗?

从外部调用webpacked代码(HTML脚本标记)

假设我有这样的类(写在打字稿中),我把它与webpack捆绑到bundle.js 。 export class EntryPoint { static run() { … } } 在我的index.html中,我将包含这个包,但是我也想调用这个静态方法。 <script src="build/bundle.js"></script> <script> window.onload = function() { EntryPoint.run(); } </script> 但是,在这种情况下, EntryPoint是不确定的。 我怎样才能从另一个脚本调用捆绑的JavaScript呢? 增加 : Webpackconfiguration文件 。

jQuery没有在bootstrap-sass中定义

我使用angular-cli引导了Angular 2应用程序。 一切都很简单,直到我决定使用bootstrap模态。 我只是复制了我们的另一个不使用angular-cli的项目中打开模式的代码。 我在angular-cli.json文件中将jquery和bootstrap依赖项添加到了脚本中。 jQuery在项目中被识别,但是当我尝试运行this.$modalEl.modal(options)在angular度组件中我得到一个错误, jQuery is not defined 。 其实jQuery是导入到项目,但作为一个全球$ 。 我已经做了一些挖掘,显然引导期望jQuery作为一个“jQuery”variables传递给它。 它不给大鼠的屁股关于$ 。 我可以将jQuery作为webpack.config.js文件中的一个variables来webpack.config.js就像我们在其他项目中webpack.config.js那样:(为简洁起见,省略了许多代码) var jQueryPlugin = { $: 'jquery', jquery: 'jquery', jQuery: 'jquery' } exports.root = root; exports.plugins = { globalLibProvider: new webpack.ProvidePlugin(webpackMerge(jQueryPlugin, { svg4everybody: 'svg4everybody/dist/svg4everybody.js' })) } 但是angular-cli dev团队决定不让其他开发者干涉webpackconfiguration文件。 多谢你们! 非常想你。 我试过直接导入jQuery到Angular组件和一些其他的东西在这里提到https://github.com/angular/angular-cli/issues/3202 (添加导入到vendor.ts文件,然后添加vendor.ts脚本数组在angular-cli.json),但没有任何工作。 说实话,我很生气,这样一个微不足道的问题,如添加jquery依赖关系,在angular度cli bootstrap使用是这样一个雷区。 你有没有处理类似的问题?

使用Webpack将jQuery暴露给真正的Window对象

我不想将jQuery对象暴露给在浏览器中的开发者控制台中可访问的全局窗口对象。 现在在我的webpackconfiguration我有以下几行: plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }) ] 这些行将jQuery定义添加到我的webpack模块中的每个文件。 但是当我构build项目并尝试像这样访问开发者控制台中的jQuery: window.$; window.jQuery; 它说这些属性是未定义的… 有没有办法来解决这个问题?

使用react-router和webpack响应改变的URL给页面找不到错误

我有以下webpackconfiguration文件: var webpack = require('webpack'); var path = require('path'); var BUILD_DIR = path.resolve(__dirname, 'src/client/public'); var APP_DIR = path.resolve(__dirname, 'src/client/app'); var config = { entry: [ APP_DIR + '/config/routes.jsx', 'webpack/hot/dev-server', 'webpack-dev-server/client?http://localhost:8080' ], output: { publicPath: 'http://localhost:8080/src/client/public/' }, module : { loaders : [ { test: /\.jsx?$/, loader: 'babel-loader', include: APP_DIR, exclude: /node_modules/, query: { presets: ['es2015'] […]

使用webpackparsing需要的path

我仍然困惑如何解决与webpack模块path。 现在我写: myfile = require('../../mydir/myfile.js') 但我想写 myfile = require('mydir/myfile.js') 我以为resolve.alias可能会有所帮助,因为我看到一个类似的例子{ xyz: "/some/dir" }作为别名,然后我可以require("xyz/file.js") 。 但是,如果我将别名设置为{ mydir: '/absolute/path/mydir' } , require('mydir/myfile.js')将不起作用。 我觉得很愚蠢,因为我已经多次阅读文档,我觉得我失去了一些东西。 什么是正确的方法,以避免写所有的相对需要../../等?

babel-loader jsx SyntaxError:意外的标记

我是React + Webpack的初学者。 我在你好世界的networking应用程序中发现了一个奇怪的错误。 我在webpack中使用babel-loader来帮助我把jsx转换成js,但是好像babel不能理解jsx的语法。 这是我的依赖: "devDependencies": { "babel-core": "^6.0.14", "babel-loader": "^6.0.0", "webpack": "^1.12.2", "webpack-dev-server": "^1.12.1" }, "dependencies": { "react": "^0.14.1" } 这是我的webpack.config.js var path = require('path'); module.exports = { entry: ['webpack/hot/dev-server',path.resolve(__dirname, 'app/main.js')], output: { path: path.resolve(__dirname, 'build'), filename: 'bundle.js' }, module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"} ] } }; […]