Tag: Webpack

Webpack不排除node_modules: 我使用的是我正在构build的Node框架的webpack（虽然我应该可能会使用gulp，不可否认）。当我包含EJS模块时，webpack将它包含在编译后的源代码中，即使我明确地告诉它不包含node_modules dir。 module.exports = { context: __dirname, target: 'node', // … output: { libraryTarget: 'commonjs' // … }, module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?{ "stage": 0, "optional": ["runtime"] }' } ] } }; 正如你所看到的，我有一个JS文件testing，并告诉它排除node_modules; 为什么忽略我的排除？

Webpack“OTSparsing错误”加载字体: 我的webpackconfiguration指定应该使用url-loader加载字体，当我尝试使用Chrome查看页面时，出现以下错误： OTS parsing error: invalid version tag Failed to decode downloaded font: [My local URL] 我的configuration的相关部分如下所示： { module: { loaders: [ // … { test: /\.scss$/, loaders: ['style', 'css?sourceMap', 'autoprefixer', 'sass?sourceMap'], }, { test: /images\/.*\.(png|jpg|svg|gif)$/, loader: 'url-loader?limit=10000&name="[name]-[hash].[ext]"', }, { test: /fonts\/.*\.(woff|woff2|eot|ttf|svg)$/, loader: 'file-loader?name="[name]-[hash].[ext]"', } ], }, } 这在Safari中不会发生，我还没有试过Firefox。在开发中，我通过webpack-dev-server提供文件，在生产中它们被写入磁盘并复制到S3; 在这两种情况下，我都会在Chrome中获得相同的行为。这也发生在较大的图像上（大于图像加载器configuration中的10kB限制）。

什么是使用webpack导入angularjs的最佳做法？: 你怎么一起使用Webpack和AngularJS，以及如何模板加载和按需提取资源？非常感谢为此目的编写的webpack.config.js文件的例子。这里显示的所有代码片段都可以在这个github仓库中访问。代码已经从这个packetloop git仓库慷慨地改编。 webpack.config.json var path = require('path'); var ResolverPlugin = require("webpack/lib/ResolverPlugin"); var config = { context: __dirname, entry: ['webpack/hot/dev-server', './app/app.js'], output: { path: './build', filename: 'bundle.js' }, module: { loaders: [{ test: /\.css$/, loader: "style!css-loader" }, { test: /\.scss$/, loader: "style!css!sass?outputStyle=expanded" }, { test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$/, loader: "file" }, { test: /\.html$/, loader: […]

噶/茉莉花超时没有运行testing: 我正在尝试从Grunt运行Karma / Jasmine，在http://newtriks.com/2013/12/31/automating-react-with-yeoman-and-grunt/ Karma推出PhantomJS（或Chrome），根据singleRun，它要么超时，要么坐在那里，什么都不做。我试着改变基于阅读类似问题的人的解决schemecaptureTimeout和browserNoActivityTimeout ，但似乎并没有工作。我的相关版本： NodeJS：0.10.25 噶玛：0.12.16 Webpack：1.1.11 webpack-dev-server：1.4.1 业力 – 茉莉花：0.1.5 Linux：Ubuntu 14.04 我发现在OS X上有同样的问题：我试过更新所有我的开发依赖到最新版本，但问题仍然存在。我的控制台输出如下。引用bundle的webpack行现在有效/无效令人担忧，但是我找不到任何有关它们的含义的信息。这是我的控制台输出： Running "karma:unit" (karma) task DEBUG [config]: autoWatch set to false, because of singleRun DEBUG [plugin]: Loading karma-* from /home/ed/workspace/wwb-app/node_modules DEBUG [plugin]: Loading plugin /home/ed/workspace/wwb-app/node_modules/karma-chrome-launcher. DEBUG [plugin]: Loading plugin /home/ed/workspace/wwb-app/node_modules/karma-coffee-preprocessor. DEBUG [plugin]: Loading […]

Webpack-dev-server提供一个目录列表，而不是应用程序页面: 我只能在/public下看到实际的应用程序。 webpack.config.js中的configuration如下： var path = require('path'); var webpack = require('webpack'); module.exports = { entry: [ 'webpack-dev-server/client?http://localhost:8080', 'webpack/hot/only-dev-server', './app/js/App.js' ], output: { path: path.join(__dirname, 'public'), filename: 'bundle.js', publicPath: 'http://localhost:8080' }, module: { loaders: [ { test: /\.js$/, loaders: ['react-hot', 'babel-loader'], exclude: /node_modules/ } ] }, plugins: [ new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin() ] }; 项目层次是：应用 JS […]

错误：找不到模块'webpack': 我刚刚开始使用webpack，并且难以获得多入口点样本。示例中的webpack.config.js文件包含该行 var CommonsChunkPlugin = require("../../lib/optimize/CommonsChunkPlugin"); 这对我来说是错误的 Error: Cannot find module '../../lib/optimize/CommonsChunkPlugin' 在周围search，我发现使用CommonsChunkPlugin与expression式的其他例子 var commonsPlugin = new webpack.optimize.CommonsChunkPlugin("common.js"); 与错误失败 ReferenceError: webpack is not defined 一些更多的search发现了一些例子，其中包括 var webpack = require('webpack'); 而我的构build现在失败了 Error: Cannot find module 'webpack' 我不知如何进行。

如何使用React和Webpack设置Babel 6阶段0: 我从文档的理解我看到Babel 6现在有三个预置：es2015，反应和stage-x。我读过，我可以像这样在.babelrc设置它们： { "presets": ["es2015", "react", "stage-0"] } 或者直接在package.JSON中如下所示： { …, "version": xxx, "babel": { "presets": ["es2015", "react", "stage-0"] }, …, } 我可以进一步使用webpack这样的babel-loader： loader: 'babel?presets[]=es2015' 我的问题所以要编译一切很好，干净我添加babel-loader ，刚刚更新与Babel6一起工作，到这样的webpackconfiguration： module.exports = function(options) { var jsLoaders = ['babel?presets[]=es2015']; […] loaders: [ { test: /\.js$/, exclude: /node_modules/, loaders: jsLoaders }, { test: /\.jsx$/, exclude: /node_modules/, loaders: […]

为什么在使用babel-loader的时候Object.assign（）需要一个polyfill？: 我正在尝试在由webpack编译的Babel编译的ES6 Web应用程序中使用Object.assign() ，但是出现错误： Uncaught TypeError: Object.assign is not a function 我已经使用babel-loader将ES6转换为ES5，所以我所有的其他ES6代码都可以正常工作。然而， Object.assign()只在我的代码库中import "babel-core/polyfill"之后才起作用。我看到我也可以通过导入babel-runtime来解决这个问题，但是我想知道为什么 Object.assign()需要比babel-loader执行 – 不应该使用babel-loader预处理所有东西，包括Object.assign() ？

如何最小化webpack的包的大小？: 我正在编写一个web应用程序，使用react和webpack作为我的模块webpack器。到目前为止，我的jsx代码非常轻巧，整个文件夹的大小是25 kb。我从bundle.js创build的webpack是2.2 MB。使用-p标志运行优化后，将包减小到700kb，这仍然是非常大的。我已经查看了react.min.js文件，它的大小是130kb。 webpack可能产生这么大的文件，或者我做错了什么？ webpack.config.js var path = require('path'); var webpack = require('webpack'); module.exports = { entry: './public/components/main.jsx', output: { path: __dirname + "/public", filename: 'bundle.js' }, module: { loaders: [{ test: /.jsx?$/, loader: 'babel-loader', exclude: /node_modules/, query: { presets: ['es2015', 'react'] } }, { test: /\.css$/, loader: "style!css" }] } […]

webpack css-loader在外部样式表的url（）引用中找不到图像: 我是整个Node / NPM / Webpack世界的新手，所以如果这是显而易见的道歉。我试图build立一个简单的前端项目与Webpack捆绑在一起。我已经安装了节点，并configuration了一个package.json文件。如果我在根目录下运行“npm start”，我不会从控制台得到任何错误，并且可以在浏览器中转到“localhost：3000”，看到我的“hello，world”输出。我的下一个任务是包含一个样式表，其中包含对图像的引用，如下所示： .myimg {background: url(path/to/file.jpg);} 通过这样的设置，我可以通过webpack-dev-server（通过web浏览器中的localhost：3000）来查看图像，但是如果构build项目，则图像的path是错误的。我不知道自己做错了什么，所以我把这些东西扔给了Stackiverse，希望有人知道我在做什么愚蠢的事情。这是我的package.json文件： { "name": "webpack-test1", "version": "0.0.1", "description": "My project WTF.", "private": true, "scripts": { "start": "node server.js" }, "devDependencies": { "css-loader": "^0.15.2", "file-loader": "^0.8.4", "style-loader": "^0.12.3", "url-loader": "^0.5.6" }, "dependencies": { "webpack": "^1.9.6", "webpack-dev-server": "^1.8.2" } } …这是我的webpack.config.js文件： var path […]