Tag: webpack

如何从本地networking中的设备访问webpack-dev-server？: 有一些webpack dev服务器configuration（它是整个configuration的一部分）： config.devServer = { contentBase: './' + (options.publicFolder ? options.publicFolder : 'public'), stats: { modules: false, cached: false, colors: true, chunk: false }, proxy: [{ path: /^\/api\/(.*)/, target: options.proxyApiTarget, rewrite: rewriteUrl('/$1'), changeOrigin: true }] }; function rewriteUrl(replacePath) { return function (req, opt) { // gets called with request and proxy object var queryIndex = […]

ReferenceError：webpack没有定义: 在我的webpack应用程序中，我有一个基本的构build过程，由“npm run build”执行，它执行webpack二进制文件，并将我的index.html复制到/ app到/ dist中。每当我运行npm run build我得到的ReferenceError: webpack is not defined但是当我运行npm start ，启动webpack-dev-server，一切都很好。这是我的webpackconfiguration文件： var ExtractTextPlugin = require('extract-text-webpack-plugin'); var config = { context: __dirname + '/app', entry: './index.js', output: { path: __dirname + '/app', filename: 'app.js' }, module: { loaders: [ { test: /\.js$/, loader: 'babel', exclude: /node_modules/ }, { test: /\.html$/, loader: 'raw', […]

在webpack中的多个编译器configuration中提取常用块？: 我正在尝试webpack中的多编译器选项，并按照他们的github上的例子。但是，我似乎无法理解如何在多个configuration中拆分通用代码。例如，我可能在不同的configuration集中使用相同的供应商库。我希望将这些共享代码捆绑到一个共同的文件中。我尝试了以下内容，但是最终为每个编译configuration创build了单独的vendors条目捆绑包。 var path = require("path"); var webpack = require("webpack"); module.exports = [ { name: "app-mod1", entry: { vendors: ['jquery', 'react', 'react-dom'], pageA: ['./mod1/pageA'], pageB: ['./mod1/pageB'] }, output: { path: path.join(__dirname, "/mod1/js"), filename: "[name].bundle.js" }, plugins: [ new webpack.optimize.CommonsChunkPlugin({ names: ['vendors'], minChunks: Infinity }) ] }, { name: "app-mod2", entry: { […]

如何将socket.io与webpack-hot-middleware一起使用？: 我有一个使用webpack-dev-middleware的Koa服务器和使用热模块replace（HMR）的webpack-hot-middleware，所以中间件使用一个websocket将更改推送到客户端。但是我的应用程序代码在客户端和Koa服务器之间也需要自己的websocket连接。我不知道如何实现？看起来好像两个是相冲突的。我可以并排吗？我的服务器代码看起来像这样 const compiler = webpack(webpackConfig) const app = new Koa() app.use(webpackDevMiddleware(compiler, { quiet: true, noInfo: true stats: { colors: true, reasons: true } }))) app.use(webpackHotMiddleware(compiler)) const server = require('http').createServer(app.callback()) const io = require('socket.io')(server) io.on('connection', function() { console.log('socket connection!!') }) 和我的客户端一样 import Client from 'socket.io-client' const io = Client() io.on('connection', (socket) […]

Sass loader不能在webpack中工作: 我正在尝试获取* .scss文件在我的webpackconfiguration中受支持，但是当我运行webpack构build命令时，我不断收到以下错误： ERROR in ./~/css-loader!./~/sass-loader!./app/styles.scss Module build failed: TypeError: Cannot read property 'sections' of null at new SourceMapConsumer (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/node_modules/postcss/node_modules/source-map/lib/source-map/source-map-consumer.js:23:21) at PreviousMap.consumer (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/node_modules/postcss/lib/previous-map.js:37:34) at new Input (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/node_modules/postcss/lib/input.js:42:28) at parse (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/node_modules/postcss/lib/parse.js:17:17) at new LazyResult (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:54:47) at Processor.process (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/node_modules/postcss/lib/processor.js:30:16) at processCss (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/lib/processCss.js:168:24) at Object.module.exports (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/lib/loader.js:21:15) @ ./app/styles.scss 4:14-117 我不能为了我的生活找出原因。这是一个非常基本的设置。我已经创build了一个最低限额的Dropbox共享，说明了这一点： https : //www.dropbox.com/s/quobq29ngr38mhx/webpack.sass.test.zip?dl=0 解压缩然后运行： npm install webpack […]

Angular 2 / webpack“未捕获的ReferenceError：require没有定义”: 我正在使用节点和webpack将一个来自平面devise公司的HTML模板join到我的Angular 2项目中。 HTML吸引了像这样的各种脚本： <script src="js/jquery.icheck.min.js"></script> <script src="js/waypoints.min.js"></script> 所以我要求他们在我的component.ts中： var icheckJs = require('../js/jquery.icheck.min'); var waypointsJs = require('../js/waypoints.min'); 还有其他几个脚本和一些SASS似乎正常工作。 webpack很高兴，并build立了一切，“npm开始”也是成功的。但是，当它到达浏览器，我得到这个抱怨： Uncaught ReferenceError: require is not defined node_modules/angular2/platform/browser.js:1 Uncaught ReferenceError: require is not defined 这实际上是从url.js抛出的这一行： var punycode = require('punycode'); 这是CommonJs的要求吗？在几个星期之前，我还没有在网页开发中使用过这个function，所以我仍然从webback中解决了各种各样的需求，CommonJs et。从我的webpack.config.js提取.js加载程序如下所示： { test: /\.js$/, loader: 'script' } 我该如何解决这个错误？

节点JS和Webpack意外的标记<: 我开始研究节点JS 。所以这里是我的文件。的index.html <!DOCTYPE html> <html> <head> </head> <body> <div id="app"> <h1>Hello<h1> </div> <script src='assets/bundle.js'></script> </body> </html> app.js var http = require("http"), path = require('path') fs = require("fs"), colors = require('colors'), port = 3000; var Server = http.createServer(function(request, response) { var filename = path.join(__dirname, 'index.html'); fs.readFile(filename, function(err, file) { if(err) { response.writeHead(500, {"Content-Type": "text/plain"}); […]

Webpack vs webpack-dev-server vs webpack-dev-middleware vs webpack-hot-middleware vs等: 我开始与webpack一起使用一个node/express环境来开发一个带有react-router的ReactJS服务器端应用程序。每个webpack软件包在dev和prod（运行时）环境中的作用我都很困惑。以下是我的理解总结： webpack ：是一个包，一个工具，将不同的Web应用程序组合在一起，然后捆绑到一个.js文件（通常是bundle.js ）中。然后将结果文件提供给prod环境以由应用程序加载，并包含运行代码所需的全部组件。 function包括缩小代码，缩小等。 webpack-dev-server ：是一个提供服务器来处理网站文件的软件包。它还从客户端组件构build一个.js文件（ bundle.js ），但将其存储在内存中。如果还有选项（ -hot ）来监视所有的构build文件，并且在代码改变的情况下在内存中build立一个新的bundle。服务器直接在浏览器中提供（例如： http:/localhost:8080/webpack-dev-server/whatever ）。内存加载，热处理和浏览器服务的结合，让用户在代码更改时能够在浏览器上更新应用程序，是开发环境的理想select。如果我对上述文字有疑问，我真的不确定下面的内容，所以如果有必要请告诉我当使用webpack-dev-server和node/express时，一个常见的问题是webpack-dev-server是一个服务器，和node/express 。这使得这个环境很难运行客户端和一些节点/快速代码（一个API等）。注：这是我所面对的，但将是很好理解为什么会发生在更多的细节… webpack-dev-middleware ：这是一个与webpack-dev-server具有相同function的中间件（inmemory bundling，hot reloading），但格式可以注入到server/express应用程序中。这样，节点服务器中就有一种服务器（ webpack-dev-server ）。糟糕：这是一个疯狂的梦吗？这件作品如何解决开发和生产方程式，使生活更简单 webpack-hot-middleware ：这个… 卡在这里…当findwebpack-dev-middleware时候发现了这一块…不知道如何使用它。 ENDNOTE：对不起有没有错误的想法。我真的需要帮助，以便在复杂的环境中展现这些变体。如果方便，请添加更多的包或数据，将构build整个scheme。

如何使用webpack在js文件中加载CDN或外部供应商的JavaScript库，而不是在html文件中: 我正在使用反应入门套件进行客户端编程。它使用反应和webpack。没有index.html或任何html来编辑，所有的js文件。我的问题是，如果我想从云加载供应商js库，我该怎么做？在html文件中这将很容易做到这一点。 <script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script> 但是，在js文件中，它只使用npm安装的软件包。我怎样才能导入上述库没有HTML文件？我试过导入和要求，他们只适用于本地文件。更新10/21/15到目前为止，我尝试了两个方向，既不理想。 @minheq是的，有一个html文件的反应启动工具包。它是src / components / Html下的html.js。我可以把云lib和它的所有依赖关系放在这里： <div id="app" dangerouslySetInnerHTML={{__html: this.props.body}} /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script> <script src="/app.js"></script> <script dangerouslySetInnerHTML={this.trackingCode()} /> </body> 好消息是它的工作原理，我不需要在js文件中做任何事情，也不需要导入或者需要。不过，现在我有两个jQuery的库以不同的方式加载。一个在这里，另一个通过npm和webpack。我不知道以后会给我带来麻烦。我使用的反应路由给我'未定义的variables'错误，如果我在浏览器窗口中input一个无主path由于服务器端加载我猜。所以这个解决scheme不是很好。使用webpack外部function。这被logging为：链接。 “你也可以在应用程序中使用外部选项，当你想要将现有的API导入到bundle中时，也就是说你想使用CDN中的jquery（单独的标签）并且仍然需要（”jquery“）。将其指定为外部：{externals：{jquery：“jQuery”}}“。然而，我发现几个地方的文档都是如何做到这一点的挑剔。到目前为止，我不知道如何使用它来代替<script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>在html中。

在内存中编译Webpack，但parsing为磁盘上的node_modules: 我正在尝试使用networking包编译一个有效的javascript代码的内存string。我在这里使用内存fs： https ： //webpack.github.io/docs/node.js-api.html#compile-to-memory 。所以我采取了一个string包含原始的JavaScript，将其写入内存FS，然后networking包parsing到该入口点。但编译在第一个require语句上失败，大概是因为它无法查看node_modules的实际fs。任何想法我怎么能做到这一点？ import webpack from 'webpack'; import MemoryFS from 'memory-fs'; import thenify from 'thenify'; function* compile(code) { const fs = new MemoryFS(); fs.writeFileSync('/file.js', code); const compiler = webpack({ entry: { file: '/file.js' }, output: { path: '/build', filename: '[name].js' }, module: { loaders: [ { test: /\.json$/, loader: […]