Tag: Webpack

在使用Webpack的vue.js项目中使用（'@'）loginES6导入path

我开始了一个新的vue.js项目，所以我使用vue-cli工具来构build一个新的webpack项目（即vue init webpack ）。 当我走过生成的文件，我注意到在src/router/index.js文件中的以下导入： import Vue from 'vue' import Router from 'vue-router' import Hello from '@/components/Hello' // <- this one is what my qusestion is about Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'Hello', component: Hello } ] }) 我之前没有看到路标（ @ ）。 我怀疑它允许相对path（也许？），但我想确定我明白它真正的作用。 我试图在网上search，但无法find解释（因为search“在符号”或使用文字字符@没有帮助作为search条件）。 @在这条路上做什么（链接到文档将是太棒了），这是一个es6的东西？ 一个webpack的东西？ 一个vue加载器的东西？ UPDATE 感谢Felix Kling将我指向另一个关于同一个问题的重复的stackoverflow问题/回答。 […]

我怎样才能使用快递的webpack？

当我尝试使用一个简单的快递服务器的webpack时，我总是得到吨的错误： express.js 'use strict'; var express = require('express'); var path = require('path'); var url = require('url'); // ——– my proxy———————- var app = express(); app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'ejs'); app.set('port', process.env.PORT || 8080); app.use(function logErrors(err, req, res, next) { console.error(err.stack); next(err); } ); app.listen(app.get('port'), function() { console.info('Express server started at http://localhost:' + app.get('port')); }); […]

如果我使用像express这样的节点服务器，是否需要webpack-dev-server？

我正在跟随一些教程来构build一个同构的应用程序与快递和反应。 我对webpack-dev-server感到困惑。 webpack教程介绍了关于webpack-dev-server： 这绑定一个小型快递服务器localhost：8080，它为您的静态资产以及捆绑包（自动编译）提供服务。 它会在重新编译包（socket.io）时自动更新浏览器页面。 在浏览器中打开http：// localhost：8080 / webpack-dev-server / bundle 。 因为我有快递服务器，我真的需要webpack-dev-server吗？ 或者使用它的优点和缺点是什么？ 如果我想使用react-hot-loader，webpack-dev-server是否必要？

Webpack – 错误：无法在加载器列表中定义“查询”和多个加载器

我在数组中添加'react-hot'加载器后出现错误。 我已经按照这个教程︰https: //robots.thoughtbot.com/setting-up-webpack-for-react-and-hot-module-replacement然而，我越来越Error: Cannot define 'query' and multiple loaders in loaders list 。 var WebpackDevServer = require("webpack-dev-server"); var webpack = require('webpack'); var path = require('path'); require("babel-polyfill"); var BUILD_DIR = path.resolve(__dirname, 'build'); var APP_DIR = path.resolve(__dirname, 'src'); module.exports = { entry: [ 'babel-polyfill', 'bootstrap-loader', 'webpack/hot/dev-server', APP_DIR + '/import.js', ], output: { path: BUILD_DIR, filename: 'bundle.js' }, […]

Angular2 CLI巨大的供应商捆绑：如何提高产品尺寸？

我有一个简单的应用程序，由angular-cli初始化。 它显示了一些相对于3条路线的页面。 我有3个组件。 在这个页面上，我使用lodash和Angular2 Http模块来获取一些数据（使用Rxjs Observables，map和subscribe）。 我用一个简单的ngFor来显示这些元素。 但是，尽pipe我的应用程序真的很简单，但我得到了一个巨大的（在我看来）捆绑软件包和地图。 我不讨论gzip版本，但是在gzip之前大小。 这个问题只是一个普遍的build议问。 一些testing结果： build立 Hash：8efac7d6208adb8641c1时间：10129ms chunk {0} main.bundle.js，main.bundle.map（main）18.7 kB {3} [initial] [rendered] chunk {1} styles.bundle.css，styles.bundle.map，styles.bundle.map（styles）155 kB {4} [initial] [rendered] 块{2} scripts.bundle.js，scripts.bundle.map（脚本）128 kB {4} [initial] [rendered] chunk {3} vendor.bundle.js，vendor.bundle.map（vendor）3.96 MB [initial] [rendered] 块{4} inline.bundle.js，inline.bundle.map（内联）0字节[条目] [呈现] 等等： 10Mb供应商捆绑包这样一个简单的应用程序？ ng build –prod Hash：09a5f095e33b2980e7cc时间：23455ms chunk {0} main.6273b0f04a07a1c2ad6c.bundle.js，main.6273b0f04a07a1c2ad6c.bundle.map（main）18.3 kB {3} [initial] [rendered] […]

Webpack：沉默输出

我想知道是否有一个configuration选项告诉webpack只logging到terminal的“重要信息”。 几乎只是错误和警告，并不是所有这些： 有这么多的输出！ 愿意压制常见的东西，只有webpack输出的警告/错误。 想为webpack ， webpack-dev-server和karma-webpack解决scheme。 注意 ：我尝试了noInfo: true and quiet: true但是这似乎没有办法。 编辑：我想这可能是不可能的，所以我在github上创build了一个问题： https ： //github.com/webpack/webpack/issues/1191

使用Webpack基于环境的条件构build

我有一些发展的东西 – 例如嘲笑，我不想膨胀我的分布式构build文件。 在RequireJS中，你可以在一个插件文件中传递一个configuration文件，并根据这个configuration文件需要一些东西。 对于webpack来说，似乎没有办法做到这一点。 首先为一个环境创build一个运行时configuration，我已经使用resolve.alias来根据环境重新指定一个require，例如： // All settings. var all = { fish: 'salmon' }; // `envsettings` is an alias resolved at build time. module.exports = Object.assign(all, require('envsettings')); 然后当创buildwebpackconfiguration我可以dynamic地分配哪个文件envsettings指向（即webpackConfig.resolve.alias.envsettings = './' + env ）。 不过，我想做一些事情： if (settings.mock) { // Short-circuit ajax calls. // Require in all the mock modules. } 但是，如果环境不是模拟的，显然我不想在这些模拟文件中构build。 我可能会手动重新使用所有需要的存根文件再次使用resolve.alias – 但有没有一种方法，感觉lesshacky？ […]

Webpack无法加载字体文件：意外的令牌

我有一个使用字体文件的style.css文件，而且我无法使用Webpack加载字体文件。 这是我的装载机configuration： loaders : [ { test : /\.(js|jsx)$/, exclude : /node_modules/, loader : 'react-hot!babel-loader' }, { test : /\.styl/, loader : 'style-loader!css-loader!stylus-loader' }, { test : /\.css$/, loader : 'style-loader!css-loader' }, { test : /\.(png|jpg)$/, loader : 'url-loader?limit=8192' }, { test : /\.(ttf|eot|svg|woff(2))(\?[a-z0-9]+)?$/, loader : 'file-loader' } /*}, { test : /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader : […]

我应该如何使用webpack的时刻？

在使用webpack构build我的项目时，我通常需要使用npm模块的CommonJS中的模块。 我需要在我的项目中使用时区，但在构build软件包时，您还必须从时区（time-timezone）构build所有数据，这可能相当多。 此外，构build失败，出现以下错误： ERROR in ./~/moment-timezone/data/packed/latest.json Module parse failed: /site/node_modules/moment-timezone/data/packed/latest.json Line 2: Unexpected token : You may need an appropriate loader to handle this file type. | { | "version": "2015a", | "zones": [ | "Africa/Abidjan|LMT GMT|g.8 0|01|-2ldXH.Q", @ ./~/moment-timezone/index.js 4:15-51 在这一点上，我不关心构build失败，因为如果它实际上成功了，我就是构build的大小。 但是，显然这个失败的构build也需要在某个时候解决。 我将不胜感激任何关于如何处理这个问题的指针，特别是如果你们中的任何一个使用webpack（或者也许是浏览器）遇到同样的问题。

React-Native：模块AppRegistry不是已注册的可调用模块

我目前正在试图在Android模拟器上运行ES6 react-native-webpack-server 。 所不同的是，我已经升级了我的package.json和build.grade来使用反应0.18.0 ，并在启动时得到这个错误。 据我所知， AppRegistry正确导入。 即使我要将代码注释掉，这个错误仍然会出现。 这在iOS上没有问题。 我究竟做错了什么？ 编辑：在尝试其他支持0.18.0的样板后，我仍然遇到同样的问题。