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"} ] } }; […]